Jquery Datatable сортировка не работает с элементами HTML

Question

Сортировка не будет работать с HTML-элементами в ячейке таблицы.

Попытка добавить aoColumnDefs в него. Также укажите данные столбца для столбца с 'sType': 'html', и сортировка не работает.

Прикрепленный пример кода здесь (jsfiddle)

Answer 1

Я сталкивался с этой проблемой ранее в каком-то проекте, используйте mRender() вместо fnCreatedCell(). Функция render получает type в качестве второго аргумента, из которого вы можете обнаружить, если рендеринг для 'display' или 'sort' среди прочего. Таким образом, если тип 'display', вы можете вернуть HTML, а в противном случае вернуть необработанные данные.

var data = [
  ["test", [20.2, "green"], "test"],
  ['test1', ['10.2', 'red'], "test"],
  ['test2', ['15.2', 'red'], "test"],
  ['test3', ['0', 'red'], "test"],
  ['test4', ['0.5', 'green'], "test"],
  ['test5', ['1.5', 'green'], "test"],
];  

$(document).ready(function()
{
    $('#data2').DataTable(
    {
      bSort: true,
      aaData: data,
      aaSorting: [[1, 'asc']],
      aoColumnDefs: [
        { 
          bSortable: true,
          sType: "numeric", 
          aTargets: [1],
          mRender: function(data, type)
          {
            if (type !== 'display')
              return data[0];

            return '<label style="color:' + data[1] + '">' + data[0] + '</label>';
          },
        }
      ]
    });    
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src=https://cdn.datatables.net/1.9.4/js/jquery.dataTables.min.js></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.9.4/css/jquery.dataTables.css">

<table id="data2" class="">
  <thead>
  <tr>
    <th>col1</th>
    <th>col2</th>
    <th>col3</th>
  </tr>
  </thead>
</table>