DataTables

DataTables Examples

HTML

<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.1.2/css/buttons.dataTables.min.css">
<script src="https://cdn.datatables.net/buttons/1.1.2/js/dataTables.buttons.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/select/1.1.2/css/select.dataTables.min.css">
<script src="https://cdn.datatables.net/select/1.1.2/js/dataTables.select.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="//cdn.datatables.net/responsive/2.0.2/js/dataTables.responsive.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/responsive/2.0.2/css/responsive.dataTables.min.css">
<script src="http://kingkode.com/datatables.editor.lite/js/altEditor/dataTables.altEditor.free.js"></script>
<div class="container">
  <table class="table table-bordered" id="passed">
    <thead>
      <tr>
        <th>Имя</th>
        <th>Месяц</th>
        <th>Дата сдачи отчета</th>						
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Киселёва Мальвина</td>
        <td>Июль, 2019 </td>
        <td>22.12.2019</td>

      </tr>
       <tr>
        <td>Ежикова Ирина</td>
        <td>Сентябрь, 2019 </td>
        <td>21.12.2019</td>

      </tr>
      <tr>
        <td>Ёжикова Ирина</td>
        <td>Сентябрь, 2019 </td>
        <td>21.12.2019</td>

      </tr>
       <tr>
        <td>Аремина Кристина</td>
        <td>Декабрь, 2019 </td>
        <td>29.12.2019</td>
      </tr>
      <tr>
        <td>Ýремина Кристина</td>
        <td>Декабрь, 2019 </td>
        <td>29.12.2019</td>
      </tr>
      <tr>
        <td>A</td>
        <td>Декабрь, 2019 </td>
        <td>21.12.2019</td>
      </tr>
       <tr>
       ...

JavaScript

$.extend( $.fn.dataTableExt.oSort, {
   "ru-pre": function ( a ) {
        var special_letters = {
            "А": "Aa", 
            "а": "aa", 
            "Б": "Ab", 
            "б": "ab",
            "В": "Ca", 
            "в": "ca", 
            "Г": "Cb", 
            "г": "cb",
            "Д": "Da", 
            "д": "da", 
            "Е": "Db", 
            "е": "db",
            "Ё": "Ea", 
            "ё": "ea", 
            "Ж": "eb", 
            "ж": "eb", 
            "З": "Ec", 
            "з": "ec",
            "И": "Ia", 
            "и": "ia", 
            "Й": "Ib", 
            "й": "ib",
            "К": "Na", 
            "к": "na", 
            "Л": "Nb", 
            "л": "nb",
            "М": "Oa", 
            "м": "oa", 
            "Н": "Ob", 
            "н": "ob",
            "О": "Ra", 
            "о": "ra", 
            "П": "Rb", 
            "п": "rb",
            "Р": "Sa", 
            "р": "sa", 
            "С": "Sb", 
            "с": "sb",
            "Т": "Ta", 
            "т": "ta", 
            "У": "Tb", 
            "у": "tb",
            "Ф": "Ua", 
            "ф": "ua", 
            "Х": "Ub", 
            "х": "ub", 
            "Ч": "Uc", 
            "ч": "uc",
            "Ш": "Ya", 
            "ш": "ya", 
            "Щ": "Yb", 
            "щ": "yb",
            "Ъ": "Za", 
            "ъ": "za", 
            "Ы": "Zb", 
            "ы": "zb",
            "Э": "zba", 
            "э": "zbb", 
            "Я": "zbc", 
            "я": "zbd"
            };
    for (var val in special_letters)
            a = a.split(val).join(special_letters[val]).toLowerCase();
        return a;
    },

    "ru-asc": function ( a, b ) {
        return ((a < b) ? -1 : ((a > b) ? 1 : 0));
    },

    "ru-desc": function ( a, b ) {
        return ((a < b) ? 1 : ((a > b) ? -1 : 0));
    }
 
} );

$('#passed').dataTable( {
     columnDefs: [
       { type: 'ru', targets: 0 }
     ]
  } );