DataTables řazení a vyhledávání v CZ

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 mi klidně napište :-) 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 :-)

DataTables řazení a vyhledávání v CZ

Autor

Lubomír Merta