Держите включенные флажки в верхней части jQuery DataTables, несмотря на порядок сортировки

Question

Я хочу, чтобы мой jQuery DataTable всегда отображал группу включенных строк флажка вверху и отключенных строк флажка внизу. До сих пор я могу достичь этого только нажатием на первую метку заголовка "клики". По сути, я добавляю класс 'grey out' в соответствующие строки и сортирую по нему. Проблема в том, что я не могу поддерживать эти две группы, когда сортирую по другим заголовкам. Мне также нужно сохранить порядок при использовании фильтров столбцов. Например, при нажатии на "Длинные" в раскрывающемся фильтре "Группа продуктов" должны отображаться 2 включенные строки "Длинные" в верхней части и 1 отключенная строка "Длинные" в нижней части. Боюсь, я запутался и, откровенно говоря, ушел из глубины в следующих шагах. Любой совет высоко ценится. Скрипка: https://jsfiddle.net/mxb6vp3b/

<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/select/1.2.0/js/dataTables.select.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css"></script>
<script src="https://cdn.datatables.net/select/1.2.0/css/select.dataTables.min.css"></script>


<form id="frm-example" action="/nosuchpage" method="POST">
  <table id="example" class="display select" cellspacing="0" width="100%">
    <thead>
      <tr>
        <th>Clicks</th>
        <th>Trading Code</th>
        <th>Product Group</th>
        <th>Product description</th>
      </tr>
    </thead>

    <tbody>
      <tr id="row250200">
        <td><input id="HS250200" type="checkbox" value="HS 250200" /></td>
        <td> 250200 </td>
        <td> Longs </td>
        <td> Iron Ore - unroasted </td>
      </tr>
      <tr id="row260111">
        <td><input id="HS260111" type="checkbox" value="HS 260111" /></td>
        <td> 260111 </td>
        <td> Raw Materials - Iron ore </td>
        <td> Iron Ore - fines, concentrate, lump </td>
      </tr>
      <tr id="row730490" class="TypeCarbon_Alloy">
        <td><input id="HS730490" type="checkbox" value="HS 730490" /></td>
        <td> 730490 </td>
        <td> Pipe &amp; tube - Seamless </td>
        <td> Seamless tube - other </td>
      </tr>
      <tr id="row730512" class="TypeCarbon_Alloy">
        <td><input id="HS730512" type="checkbox" value="HS 730512" /></td>
        <td> 730512 </td>
        <td> Longs </td>
        <td> Welded tube - line pipe, LW, >406.4mm </td>
      </tr>
      <tr id="row730230" class="TypeCarbon_Alloy_Stainless">
        <td><input id="HS730230" type="checkbox" value="HS 730230" /></td>
        <td> 730230 </td>
        <td> Longs </td>
        <td> Railway Materials </td>
      </tr>
      <tr id="row721921" class="TypeStainless">
        <td><input id="HS721921" type="checkbox" value="HS 721921" /></td>
        <td> 721921 </td>
        <td> Flats - HR plate </td>
        <td> HR plate - discrete or CTL, >10mm </td>
      </tr>
    </tbody>
  </table>
</form>

.grey_out {
  color: lightgrey;
}

$(function() {

    // Disable all rows
    $('#example td input').prop("disabled", true).closest('tr').addClass('grey_out');
    // Eanable relevant rows
    $("#HS260111, #HS730512, #HS730230").prop("disabled", false).closest('tr').removeClass('grey_out');


    $('#example').DataTable({
        orderCellsTop: true,
        scrollY: '50vh',
        scrollCollapse: true,
        orderCellsTop: true,

        'columnDefs': [{
            'targets': 0,
            'orderDataType': 'dom-checkbox',
            'orderable': true,
        }],

        "order": [
            [0, "asc"]
        ],
        responsive: true,

        initComplete: function() {
            this.api().columns([1, 2, 3]).every(function() {
                var column = this;
                var select = $('<select><option value="">Show all</option></select>')

                    .appendTo($(column.header()))
                    .on('change', function() {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );

                        column
                            .search(val ? '^' + val + '$' : '', true, false)
                            .draw();
                    });

                column.data().unique().sort().each(function(d, j) {
                    select.append('<option value="' + d + '">' + d + '</option>')
                });

            });
        }
    });


    // Sort for Enabled'
    $.fn.dataTable.ext.order['dom-checkbox'] = function(settings, col) {
        return this.api().column(col, {
            order: 'index'
        }).nodes().map(function(td, i) {
            return $(td).parent().is(':not(.grey_out)') ? '0' : '1';
        });
    }

});

Answer 1

Смотреть на orderFixed,

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

Теперь добавьте скрытый столбец к вашей таблице и используйте его в качестве основы для orderFixed:

var table = $('#example').DataTable({
   columnDefs: [
     { targets: 0, visible: false }
   ],
   orderFixed: [0, 'desc']
}) 

Затем обновите скрытый столбец, например, 1 а также 0 когда его флажок одноуровневый установлен или снят:

$('#example').on('click', 'input[type="checkbox"]', function() {
   var row = table.row($(this).closest('tr'));
   table.cell({ row: row.index(), column: 0 } ).data( this.checked ? 1 : 0 )
   row.invalidate().draw()
})

"проверенные" строки теперь всегда остаются на вершине независимо от того, как пользователь сортирует таблицу.

Я взял разметку выше и сделал новую демонстрацию для простоты -> http://jsfiddle.net/6e56cu8u/