Визуализация столбца Datatables для игнорирования буквы и сортировки по номеру

Question

У меня проблемы с использованием jQuery Datatables для сортировки данных.

У меня есть таблица, которая имеет много столбцов. Я хочу отсортировать столбец Document Number. У некоторых номеров документов в начале есть буква A, а у некоторых - нет. Я пытаюсь отсортировать их по убыванию без учета этого письма A.

В настоящее время данные выглядят так:

A83052
A83030
A83019
A08565
A08554
A08542
A08455
 08500
 08365
 08345
 00098

Но я хочу отсортировать его следующим образом:

A83052
A83030
A83019
A08565
A08554
A08542
 08500
A08455
 08365
 08345
 00098

Однако я должен оставить там A, поскольку он является частью Document number.

Вот мой код:

j$("table[id$=policyBlock]").DataTable({
    "order": [[0, 'desc']],
    "bFilter": false,
    "bPaginate": false,
    "bInfo": false
});

Я попытался добавить следующее после поля «bInfo»:

 "columnDefs": [ {
     "targets": 0,
     "render": function( data, type, row ) {
         return type=="sort" ? data.replace(/\D/g,'') : data;
      }
  }]

Затем список упорядочился так:

 00098
 08365
 08500
A83019
A08565
A83030
A08554
A83052
A08455
 08345
A08542

Что я делаю не так?

Answer 1

Вы можете установить атрибут data-order для ячейки таблицы, и Datatable будет упорядочивать по этому атрибуту. Ваша ячейка таблицы должна выглядеть так:

<td data-order="08542">A08542</td>

Подробнее: https://datatables.net/examples/advanced_init/html5-data-attributes.html

$('#dataTable').DataTable({
    "order": [[0, "desc"]], 
    "bFilter": false,
    "bPaginate": false,
    "bInfo": false
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<table id="dataTable">
    <thead>
        <tr>
            <th>Number</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td data-order="83052">A83052</td>
        </tr>
        <tr>
            <td data-order="83030">A83030</td>
        </tr>
        <tr>
            <td data-order="83019">A83019</td>>
        </tr>
        <tr>
            <td data-order="08565">A08565</td>>
        </tr>
        <tr>
            <td data-order="08554">A08554</td>>
        </tr>
        <tr>
            <td data-order="08542">A08542</td>>
        </tr>
        <tr>
            <td data-order="08455">A08455</td>>
        </tr>
        <tr>
            <td data-order="08500">08500</td>>
        </tr>
        <tr>
            <td data-order="08365">08365</td>>
        </tr>
        <tr>
            <td data-order="08345">08345</td>>
        </tr>
        <tr>
            <td data-order="00098">00098</td>>
        </tr>
    </tbody>
</table>

Answer 2

Примерно так должно работать:

jQuery.extend(jQuery.fn.dataTableExt.oSort, {
  "justNum-pre": a => parseFloat(a.replace(/\D/g, "")),
  "justNum-asc": (a, b) => a - b,
  "justNum-desc": (a, b) => b - a
});

const table = $('#example').DataTable({
  columnDefs: [{
    type: 'justNum',
    targets: 0
  }]
});

Рабочий пример здесь . Однако, если вы используете сервер, все может быть иначе ...

Answer 3

Одним из способов добиться этой работы может быть добавление скрытого столбца, в котором удалена буква A.

Это упоминается в качестве примера в документации для опции columns.orderData .