Сортировать DataTable по неделям и дням

Question

Я использую jQuery datatables , чтобы создать таблицу, которая показывает прогресс проекта в следующем формате:

Project   |Stage   |Start   |Finish
____________________________________
project 1 |stage 1 |W1D1    |W2D2
project 1 |stage 2 |W2D3    |W4D5
...

Вехи проекта измеряются в форме «W_D_» (неделя, день). Проблема в том, что когда я начинаю сортировку по столбцу Start или Finish, он не работает должным образом.

Пока мой код:

HTML

<table id="projectStatus">
    <thead>
        <tr>
            <th>Project</th><th>Stage</th><th>Start</th><th>Finish</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>project 1</td><td>stage 1</td><td>W1D1</td><td>W2D2</td>
        </tr>
        <tr>
            <td>project 1</td><td>stage 2</td><td>W2D3</td><td>W11D5</td>
        </tr>
        <tr>
            <td>project 1</td><td>stage 3</td><td>W11D6</td><td>W5D6</td>
        </tr>       
    </tbody>
</table>

JS

$('#projectStatus').DataTable({
    orderable: true,
  processing: true,
  defaultContent: '',
  pageLength: 10
});

Как мне исправить проблему с сортировкой? Спасибо.

Answer 1

Вы должны предоставить неправильные результаты.

Я вижу, что у вас есть строковые значения, которые не рассматриваются как числа. Например, W11D5 отображается перед W2D3.

Попробуйте использовать атрибут data-order, объединяя неделю и день:

<td>project 1</td>
<td>stage 2</td>
<td data-order="23">W2D3</td>
<td data-order="115">W11D5</td>

Если это все еще не работает, добавьте ноль:

<td>project 1</td>
<td>stage 2</td>
<td data-order="023">W2D3</td>
<td data-order="115">W11D5</td>

Answer 2

Поскольку ваши данные имеют числовой характер, боюсь, вы не сможете воспользоваться data-order / data-sort атрибутами соответствующих ячеек таблицы, которые будут сортировать ваши строки по алфавиту .

Выход (без загрузки дополнительного плагина) состоит в том, чтобы установить свой собственный тип данных (скажем, «день недели») и соответствующий метод сортировки для этого:

//init DataTable
$('#projectStatus').DataTable({
//set data type 'weekday' for columns 2, 3
  columnDefs: [{
    targets: [2,3],
    type: 'weekday'
  }]
});
//turn 'week+day' string into number of days
const weekDay2Num = str => ([week, day] = str.match(/W(\d+)D(\d+)/).slice(1), week*7+day);
//specify sorting method for type 'weekday'
Object.assign($.fn.DataTable.ext.oSort, {
  'weekday-asc': (a,b) => weekDay2Num(a)-weekDay2Num(b),
  'weekday-desc': (a,b) => weekDay2Num(b)-weekDay2Num(a)
});

<script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="application/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<table id="projectStatus">
    <thead>
        <tr>
            <th>Project</th><th>Stage</th><th>Start</th><th>Finish</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>project 1</td><td>stage 1</td><td>W1D1</td><td>W2D2</td>
        </tr>
        <tr>
            <td>project 1</td><td>stage 2</td><td>W2D3</td><td>W11D5</td>
        </tr>
        <tr>
            <td>project 1</td><td>stage 3</td><td>W11D6</td><td>W5D6</td>
        </tr>       
    </tbody>
</table>

Answer 3

Вы можете добавить атрибут data-order в ячейки. DataTables будет использовать это значение для упорядочивания строк вместо текста внутри. Вы можете объединить Week и Day в этом атрибуте.

<table id="projectStatus">
    <thead>
        <tr>
            <th>Project</th><th>Stage</th><th>Start</th><th>Finish</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>project 1</td><td>stage 1</td><td data-order="11">W1D1</td><td data-order="22">W2D2</td>
        </tr>
        <tr>
            <td>project 1</td><td>stage 2</td><td data-order="23">W2D3</td><td data-order="115">W11D5</td>
        </tr>
        <tr>
            <td>project 1</td><td>stage 3</td><td data-order="116">W11D6</td><td data-order="56">W5D6</td>
        </tr>       
    </tbody>
</table>