DataTables

DataTables Examples

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.0/css/jquery.dataTables.css">
<script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.js"></script>
<script src="https://cdn.datatables.net/rowreorder/1.0.0/js/dataTables.rowReorder.js"></script>
<link rel="stylesheet" href="http://cdn.datatables.net/rowreorder/1.0.0/css/rowReorder.dataTables.css">
<table id="example">
        <thead>
            <tr>
                <th>Test AN &amp; LC</th>
            </tr>
        </thead>
        <tbody>
<tr><td>Ýchtyl</td></tr>
<tr><td>Adolf</td></tr>
<tr><td>Áda</td></tr>
<tr><td>Bohuš</td></tr>
<tr><td>Šulin</td></tr>
<tr><td>Carda</td></tr>
<tr><td>Čičina</td></tr>
<tr><td>David</td></tr>
<tr><td>Ňiňo</td></tr>
<tr><td>Ďefka</td></tr>
<tr><td>Eelefant</td></tr>
<tr><td>Éliška</td></tr>
<tr><td>Ěva</td></tr>
<tr><td>Oráč</td></tr>
<tr><td>Papoušek</td></tr>
<tr><td>Qerty</td></tr>
<tr><td>Ryba</td></tr>
<tr><td>Sako</td></tr>
<tr><td>Tác</td></tr>
<tr><td>Figu</td></tr>
<tr><td>Guma</td></tr>
<tr><td>Houno</td></tr>
<tr><td>Inkous</td></tr>
<tr><td>Ívanice</td></tr>
<tr><td>Jack</td></tr>
<tr><td>Kokos</td></tr>
<tr><td>Lumos</td></tr>
<tr><td>Muflon</td></tr>
<tr><td>Nebe</td></tr>
<tr><td>Utron</td></tr>
<tr><td>Ůber</td></tr>
<tr><td>Úkrop</td></tr>
<tr><td>Vlak</td></tr>
<tr><td>Walda</td></tr>
<tr><td>Xena</td></tr>
<tr><td>Yvona</td></tr>
<tr><td>Zóna</td></tr>
<tr><td>Říp</td></tr>
<tr><td>Žena</td></tr>
<tr><td>Óda</td></tr>    
        </tbody>
    </table>

CSS

body {
  margin: 0 10rem 0 10rem;
  padding: 1rem;
}

JavaScript

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' },
  ]
})

 $('#example_filter input').keyup(function () {
    table
    .search(
      jQuery.fn.dataTable.ext.type.search.string(NeutralizeAccent(this.value))
    )
    .draw()
 })