отключить сортировку столбцов с помощью jquery datatables

Question

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

"aoColumns": [
    { "bSearchable": false },
    null
]   

Я также попробовал следующий код:

"aoColumnDefs": [
     { "bSearchable": false, "aTargets": [ 1 ] }
 ]

но это все равно не дало желаемых результатов.

Answer 1

Это то, что вы ищете:

$('#example').dataTable( {
      "aoColumnDefs": [
          { 'bSortable': false, 'aTargets': [ 1 ] }
       ]
});

Answer 2

Начиная с DataTables 1.10.5, теперь можно определить инициализацию опции, использующие атрибуты данных HTML5 *.

- документация dataTables: HTML5 data- * атрибуты - параметры таблицы

Таким образом, вы можете использовать data-orderable="false" на th столбца, который вы не хотите сортировать. Например, второй столбец «Аватар» в таблице ниже не будет сортироваться:

<table id="example" class="display" width="100%" data-page-length="25">
    <thead>
        <tr>
            <th>Name</th>
            <th data-orderable="false">Avatar</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td><img src="https://www.gravatar.com/avatar/8edcff60cdcca2ad650758fa524d4990?s=64&amp;d=identicon&amp;r=PG" alt="" style="width: 64px; height: 64px; visibility: visible;"></td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
        <tr>
            <td>Garrett Winters</td>
            <td><img src="https://www.gravatar.com/avatar/98fe9834dcca2ad650758fa524d4990?s=64&amp;d=identicon&amp;r=PG" alt="" style="width: 64px; height: 64px; visibility: visible;"></td>
            <td>2011/07/25</td>
            <td>$170,750</td>
        </tr>
        ...[ETC]...
    </tbody>
</table>

См. рабочий пример на https://jsfiddle.net/jhfrench/6yxvxt7L/.

Answer 3

Чтобы отключить сортировку по первому столбцу, попробуйте следующий код в datatables jquery. Ноль представляет здесь возможность сортировки.

$('#example').dataTable( {
  "aoColumns": [
  { "bSortable": false },
  null,
  null,
  null
  ]
} );

Отключить сортировку по столбцу в jQuery Datatables

Answer 4

Использование Datatables 1.9.4 Я отключил сортировку для первого столбца с этим кодом:

/* Table initialisation */
$(document).ready(function() {
    $('#rules').dataTable({
        "sDom" : "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>",
        "sPaginationType" : "bootstrap",
        "oLanguage" : {
            "sLengthMenu" : "_MENU_ records per page"
        },
        // Disable sorting on the first column
        "aoColumnDefs" : [ {
            'bSortable' : false,
            'aTargets' : [ 0 ]
        } ]
    });
});

EDIT:

Вы можете отключить даже с помощью класса no-sort на <th>,

и используйте этот код инициализации:

// Disable sorting on the no-sort class
"aoColumnDefs" : [ {
    "bSortable" : false,
    "aTargets" : [ "no-sort" ]
} ]

РЕДАКТИРОВАТЬ 2

В этом примере я использую Datables с Bootstrap, следуя старому сообщению в блоге. Теперь есть одна ссылка с обновленным материалом о стилях Datatables с начальной загрузкой .

Answer 5

Что я использую, так это просто добавление пользовательского атрибута в thead td и управление сортировкой, автоматически проверяя это значение attr.

Таким образом, HTML-код будет

<table class="datatables" cellspacing="0px" >

    <thead>
        <tr>
            <td data-bSortable="true">Requirements</td>
            <td>Test Cases</td>
            <td data-bSortable="true">Automated</td>
            <td>Created On</td>
            <td>Automated Status</td>
            <td>Tags</td>
            <td>Action</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>

И JavaScript для инициализации таблиц данных будет (он будет динамически получать информацию о сортировке из самой таблицы;)

$('.datatables').each(function(){
    var bFilter = true;
    if($(this).hasClass('nofilter')){
        bFilter = false;
    }
    var columnSort = new Array; 
    $(this).find('thead tr td').each(function(){
        if($(this).attr('data-bSortable') == 'true') {
            columnSort.push({ "bSortable": true });
        } else {
            columnSort.push({ "bSortable": false });
        }
    });
    $(this).dataTable({
        "sPaginationType": "full_numbers",
        "bFilter": bFilter,
        "fnDrawCallback": function( oSettings ) {
        },
        "aoColumns": columnSort
    });
});

Answer 6

columnDefs теперь принимает класс.Я бы сказал, что это предпочтительный метод, если вы хотите указать столбцы для отключения в вашей разметке:

<table>
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th class="datatable-nosort">Actions</th>
        </tr>
    </thead>
    ...
</table>

Затем в вашем JS:

$("table").DataTable({
    columnDefs: [{
        targets: "datatable-nosort",
        orderable: false
    }]
});

Answer 7

Вот что вы можете использовать, чтобы отключить определенные столбцы:

 $('#tableId').dataTable({           
            "columns": [
                { "data": "id"},
                { "data": "sampleSortableColumn" },
                { "data": "otherSortableColumn" },
                { "data": "unsortableColumn", "orderable": false}
           ]
});

Так что все, что вам нужно сделать, это добавить "orderable": false к столбцу, который вы не хотите сортировать.

Answer 8

$("#example").dataTable(
  {
    "aoColumnDefs": [{
      "bSortable": false, 
      "aTargets": [0, 1, 2, 3, 4, 5]
    }]
  }
);

Answer 9

Начиная с 1.10.5 , просто включите

'orderable: false'

в columnDefs и нацеливайте свой столбец на

'цели: [0,1]'

Таблица должна выглядеть так:

var table = $('#data-tables').DataTable({
    columnDefs: [{
        targets: [0],
        orderable: false
    }]
});

Answer 10

Для отключения сортировки по одному столбцу попробуйте этот пример:

<script type="text/javascript">                         
    $(document).ready(function() 
    {
        $("#example").dataTable({
           "aoColumnDefs": [
              { 'bSortable': false, 'aTargets': [ 0 ] }
           ]
        });
    });                                         
</script>

Для нескольких столбцов попробуйте этот пример: вам просто нужно добавить номер столбца.По умолчанию он начинается с 0

<script type="text/javascript">                         
    $(document).ready(function() 
    {
        $("#example").dataTable({
           "aoColumnDefs": [
              { 'bSortable': false, 'aTargets': [ 0,1,2,4,5,6] }
           ]
        });
    });                                         
</script>  

Здесь только Column 3 работает