Задать вопрос

Почему в плагине dataTable не работает сортировка с буквой Ё?

Использую плагин dataTable
Ситуация такая, что имена начинающиеся с буквы Ё ушли вниз.
Подскажите, как решить эту проблему.

пример кода:

jsfiddle.net/m6f71krx/3
  • Вопрос задан
  • 152 просмотра
Подписаться 2 Простой Комментировать
Пригласить эксперта
Ответы на вопрос 4
xmoonlight
@xmoonlight
https://sitecoder.blogspot.com
Править код либы нужно и заодно создать issue в репе.
Ответ написан
Комментировать
MrDecoy
@MrDecoy Куратор тега JavaScript
Верставший фронтендер
Решение здесь и сейчас - не использовать Ё.
В код либы не заглядывал, но, скорее всего, дьявол кроется в том, что asci код символа ё больше других в алфавите.
"деёж".charCodeAt(0) // д -1076
"деёж".charCodeAt(1) // е - 1077
"деёж".charCodeAt(2) // ё - 1105
"деёж".charCodeAt(3) // ж -1078

Если не использовать Ё - не вариант, то, насколько я помню, в этом плагине можно указывать сортировку по дата атрибутам.
Таким образом, Вы сами можете определить значения, на основе которых будет осуществляться сортировка, где "е" и "ё" будут идти последовательно или иметь одинаковй вес, а потом натравить dataTable на эти значения.
Ответ написан
Комментировать
@Luksiko
фрилансер, интернет магазины, разработка лендингов
Вам нужно определить порядок самостоятельно, что-то вроде чешского плагина.
$.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 }
     ]
  } );


На вашем примере посмотрите тут...
Ответ написан
Комментировать
@ingvarzharov
Программист
Ловите

import DataTable from 'datatables.net-bs4';

export function dataTableRusType(data) {

const special_letters = {
А: 'Aa', а: 'aa', Б: 'Ab', б: 'ab', В: 'Ac', в: 'ac', Г: 'Ad', г: 'ad',
Д: 'Ae', д: 'ae', Е: 'Af', е: 'af', Ё: 'Ag', ё: 'ag', Ж: 'Ah', ж: 'ah',
З: 'Ai', з: 'ai', И: 'Aj', и: 'aj', Й: 'Ak', й: 'ak', К: 'Al', к: 'al',
Л: 'Am', л: 'am', М: 'An', м: 'an', Н: 'Ao', н: 'ao', О: 'Ap', о: 'ap',
П: 'Aq', п: 'aq', Р: 'Ar', р: 'ar', С: 'As', с: 'as', Т: 'At', т: 'at',
У: 'Au', у: 'au', Ф: 'Av', ф: 'av', Х: 'Aw', х: 'aw', Ц: 'Ax', ц: 'ax',
Ч: 'Ay', ч: 'ay', Ш: 'Az', ш: 'az', Щ: 'Aza', щ: 'aza', Ъ: 'Azb', ъ: 'azb',
Ы: 'Azc', ы: 'azc', Ь: 'Azd', ь: 'azd', Э: 'Aze', э: 'aze', Ю: 'Azf', ю: 'azf',
Я: 'Azg', я: 'azg',
};

if (typeof data !== 'string') return data;

return data.split('').map(char => special_letters[char] || char).join('').toLowerCase();
}

DataTable.ext.type.order['rus-pre'] = (data) => dataTableRusType(data); // Для сортировки
DataTable.ext.type.search['rus'] = (data) => dataTableRusType(data); // Для поиска

В самой таблице делаем в columnDefs

{
targets: 1,
data: 'user',
orderable: true,
width: '230px',
type: 'rus', // ВАЖНО!!!
render: (data, type) => {
// Ваш рендер, где отдает русские символы для поиска
}
}

Для поиска по колонке 1

this.dataTable.column(1).search(dataTableRusType(value)).draw();
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы