Máte problém při řazení sloupců s českým textem? Nefunguje vyhledávání pomocí českých znaků? Mrkněte na skript níže. Oboje by měl v pohodě zvládat.

Následující skript využívá localeCompare a upravený DataTable plugin Accent neutralise. Obojí je docela slušně popsané na fóru DataTable (dále jen DT), ale bohužel bez existence pluginu, který by kombinoval obě funkce. Proto jsem napsal několik řešení, ale níže uvedené bylo jako jediné spolehlivé. Ano, šlo by to i jinak, proč ale nepoužít již vytvořené a ověřené funkce :-) Jinak finální podobu skriptu jsem dal dohromady s uživatelem HPB z DT fóra, za což mu patří dík.

Další řešení jsou dotupná různě na internetu a fóru DT, ale spousty z nich negungují dobře, nebo jsou zbytečně složité a pomalé. Případně se musí sáhnout do kódu DT a přepsat (v tom lepším případě) pár řádků skriptu knihovny. Pokud ale používáte CDN, tak máte smůlu a musíte si napsat něco vlastního pro CZ jazyk.

Jak to vypadá a funguje můžete vidět zde http://live.datatables.net a skript máte níže.


jQuery.extend(jQuery.fn.dataTableExt.oSort, {
  'locale-compare-asc': function (a, b) {
    return a.localeCompare(b, 'cs', { sensitivity: 'case' })
  },
  'locale-compare-desc': function (a, b) {
    return b.localeCompare(a, 'cs', { sensitivity: 'case' })
  }
})

jQuery.fn.dataTable.ext.type.search['locale-compare'] = function (data) {
  return NeutralizeAccent(data)
}

function NeutralizeAccent (data) {
  return !data ? '' : typeof data === 'string' ? data
        .replace(/\n/g, ' ')
        .replace(/[éÉěĚèêëÈÊË]/g, 'e')
        .replace(/[šŠ]/g, 's')
        .replace(/[čČçÇ]/g, 'c')
        .replace(/[řŘ]/g, 'r')
        .replace(/[žŽ]/g, 'z')
        .replace(/[ýÝ]/g, 'y')
        .replace(/[áÁâàÂÀ]/g, 'a')
        .replace(/[íÍîïÎÏ]/g, 'i')
        .replace(/[ťŤ]/g, 't')
        .replace(/[ďĎ]/g, 'd')
        .replace(/[ňŇ]/g, 'n')
        .replace(/[óÓ]/g, 'o')
        .replace(/[úÚůŮ]/g, 'u') : data
}

var table = $('#example').DataTable({
  columnDefs: [
        { targets: 0, type: 'locale-compare' }
  ]
})
var filterVal = ''
$('#example_filter input').unbind()
$('#example_filter input').on('keyup change', function () {
  var val = NeutralizeAccent(this.value)
  if (val !== filterVal) {
    filterVal = val
    $('#example').DataTable().search(val).draw()
  }
})

Pokud máte někdo lepší řešení, nebo Vás napadlo vylepšení skriptu výše, tak můžete napsat do komentáře :-) Budu rád za každý nápad. Stále se DT učím, takže jakékoliv nakopnutí se hodí :-)

Snad to někomu pomůže :-)

Lubomír Merta

Původem správce sítě a Linux serverů, aktálně frontend kodér, Android geek a sportovec z gauče.

LubosMertak
LubosMertak


Vytvořeno