DataTables js неправильно сортирует строки

Question

Я использую последние DataTables. js с jquery 3.3.1.

Это структура данных таблицы

<table id="table_id" class="display">
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1 Data 1</td>
            <td>Row 1 Data 2</td>
        </tr>
        <tr>
            <td>Row 100 Data 1</td>
            <td>Row 2 Data 2</td>
        </tr>
        <tr>
            <td>Row 11 Data 1</td>
            <td>Row 2 Data 2</td>
        </tr>
    </tbody>
</table>

Должна сортироваться строка 1

to row 1, row 11, row 100
or row 100, row 11, row 1

но это делает

row 1, row 100, row 11

или

row 11, row 100, row 1

Это нормальное поведение сортировки в javascript, что также не правильно для сортировки.

Любой идеи?

Answer 1

Установите type = "textNum" в определении столбца и затем выполните пользовательскую сортировку, используя jquery.extend jQuery.extend( jQuery.fn.dataTableExt.oSort,{//comparator function})

jQuery.extend( jQuery.fn.dataTableExt.oSort, {
    "textNum-asc": function ( a, b ) {
        return a.match(/\s*\d*\s/)[0]- b.match(/\s*\d*\s/)[0]
    },
    "textNum-desc": function ( a, b ) {
       return b.match(/\s*\d*\s/)[0]- a.match(/\s*\d*\s/)[0]
    }
});

Запустите следующий фрагмент

$("#table_id").dataTable({
"columnDefs": [
    { type: 'textNum',"targets": 0 },
    { type: 'textNum',"targets": 1 },
  ]
})
jQuery.extend( jQuery.fn.dataTableExt.oSort, {
    "textNum-asc": function ( a, b ) {
       //regex will match first number i.e number to right of row
        return a.match(/\s*\d*\s/)[0]- b.match(/\s*\d*\s/)[0] 
    },
    "textNum-desc": function ( a, b ) {
       return b.match(/\s*\d*\s/)[0]- a.match(/\s*\d*\s/)[0]
    }
});

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" >
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<table id="table_id" class="display">
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 6 Data 1</td>
            <td>Row 4 Data 2</td>
        </tr>
         <tr>
            <td>Row 3 Data 1</td>
            <td>Row 7 Data 2</td>
        </tr>
        <tr>
            <td>Row 10 Data 1</td>
            <td>Row 0 Data 2</td>
        </tr>
         <tr>
            <td>Row 1 Data 1</td>
            <td>Row 2 Data 2</td>
        </tr>
        <tr>
            <td>Row 11 Data 1</td>
            <td>Row 3 Data 2</td>
        </tr>
    </tbody>
</table>

Answer 2

Я смотрел, как DataTables js сортирует пар. Пример

row 1, row 100, row 11

Данный пример работает некорректно, но я написал JS -Solution

const c = [[0 , "row 11"],[2 , "row 100"],[1 , "row 1"]];
c.sort(function(a,b) {
    var x = a[1].toLowerCase();
    var y = b[1].toLowerCase();
    var intX = 0;
    var intY = 0;

    for (let c = 0; c < x.length; c++) {
        intX += x.charCodeAt(x[c]);
    }
    for (let c = 0; c < y.length; c++) {
        intY += y.charCodeAt(y[c]);
    }
    return intX - intY;
});

Результат

[
    [ 1, "row 1" ],
    [ 0, "row 11" ],
    [ 2, "row 100" ]
]

Это решение не окончательный. Вы должны отфильтровать числа внутренней строки и считать их отдельно. Но это верный способ решения проблемы.

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