Отключить сортировку для определенного столбца в jQuery DataTables

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

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

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

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

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

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

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

Начиная с DataTables 1.10.5, теперь можно определять параметры инициализации, используя атрибуты data- * 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/ .

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

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

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

Использование 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 ]
        } ]
    });
});

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

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

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

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

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

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

Я просто добавляю в 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
    });
});

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
    }]
});

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

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

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

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

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

<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работает

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

'orderable: false'

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

'target: [0,1]'

Таблица должна понравиться как:

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

Если для orderableсвойства FIRST столбца задано значение false, необходимо также установить orderстолбец по умолчанию, иначе он не будет работать, поскольку первый столбец является столбцом порядка по умолчанию. Пример ниже отключает сортировку по первому столбцу, но устанавливает второй столбец в качестве столбца порядка по умолчанию (помните, что индексы dataTables основаны на нуле).

$('#example').dataTable( {
  "order": [[1, 'asc']],
  "columnDefs": [
    { "orderable": false, "targets": 0 }
  ]
} );

"aoColumnDefs" : [   
{
  'bSortable' : false,  
  'aTargets' : [ 0 ]
}]

Вот 0индекс столбца. Если вы хотите, чтобы несколько столбцов не сортировались, укажите значения индекса столбца, разделенныеcomma(,)

Чтобы обновить ответ Bhavish (который я думаю, для более старой версии DataTables и не работал для меня). Я думаю, что они изменили имя атрибута. Попробуй это:

<thead>
    <tr>
        <td data-sortable="false">Requirements</td>
        <td data-sortable="false">Automated</td>
        <td>Created On</td>
    </tr>
</thead>
<tbody>
    <tr>
        <td>

Используя класс:

<table  class="table table-datatable table-bordered" id="tableID">
    <thead>
        <tr>
            <th class="nosort"><input type="checkbox" id="checkAllreInvitation" /></th>
            <th class="sort-alpha">Employee name</th>
            <th class="sort-alpha">Send Date</th>
            <th class="sort-alpha">Sender</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox" name="userUid[]" value="{user.uid}" id="checkAllreInvitation" class="checkItemre validate[required]" /></td>
            <td>Alexander Schwartz</td>
            <td>27.12.2015</td>
            <td>dummy@email.com</td>
        </tr>
    </tbody>
</table>
<script type="text/javascript">
    $(document).ready(function() {
        $('#tableID').DataTable({
            'iDisplayLength':100,
            "aaSorting": [[ 0, "asc" ]],
            'aoColumnDefs': [{
                'bSortable': false,
                'aTargets': ['nosort']
            }]
        });
    });
</script>

Теперь вы можете присвоить класс "nosort" <TH>

Это работает для меня для одного столбца

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

Если вы уже должны скрыть некоторые столбцы, как я скрыть фамилию столбца. Мне просто нужно было объединить fname, lname, поэтому я сделал запрос, но скрыл этот столбец от внешнего интерфейса. Изменения в отключить сортировку в такой ситуации:

    "aoColumnDefs": [
        { 'bSortable': false, 'aTargets': [ 3 ] },
        {
            "targets": [ 4 ],
            "visible": false,
            "searchable": true
        }
    ],

Обратите внимание, что у меня была функция скрытия здесь

    "columnDefs": [
            {
                "targets": [ 4 ],
                "visible": false,
                "searchable": true
            }
        ],

Затем я слил это в "aoColumnDefs"

1. Используйте следующий код, чтобы отключить порядок в первом столбце:

   $('#example').dataTable( {
     "columnDefs": [
       { "orderable": false, "targets": 0 }
     ]
   } );

2. Чтобы отключить порядок по умолчанию, вы также можете использовать:

   $('#example').dataTable( {
        "ordering": false, 
   } );

Вы можете напрямую использовать метод .notsortable () для столбца

 vm.dtOpt_product = DTOptionsBuilder.newOptions()
                .withOption('responsive', true)
        vm.dtOpt_product.withPaginationType('full_numbers');
        vm.dtOpt_product.withColumnFilter({
            aoColumns: [{
                    type: 'null'
                }, {
                    type: 'text',
                    bRegex: true,
                    bSmart: true
                }, {
                    type: 'text',
                    bRegex: true,
                    bSmart: true
                }, {
                    type: 'text',
                    bRegex: true,
                    bSmart: true
                }, {
                    type: 'select',
                    bRegex: false,
                    bSmart: true,
                    values: vm.dtProductTypes
                }]

        });

        vm.dtColDefs_product = [
            DTColumnDefBuilder.newColumnDef(0), DTColumnDefBuilder.newColumnDef(1),
            DTColumnDefBuilder.newColumnDef(2), DTColumnDefBuilder.newColumnDef(3).withClass('none'),
            DTColumnDefBuilder.newColumnDef(4), DTColumnDefBuilder.newColumnDef(5).notSortable()
        ];

Есть два способа, один определяется в html при определении заголовков таблицы

<thead>
  <th data-orderable="false"></th>
</thead>

Другой способ - использовать javascript, например, у вас есть таблица.

<table id="datatables">
    <thead>
        <tr>
            <th class="testid input">test id</th>
            <th class="testname input">test name</th>
    </thead>
</table>

затем,

$(document).ready(function() {
    $('#datatables').DataTable( {
        "columnDefs": [ {
            "targets": [ 0], // 0 indicates the first column you define in <thead>
            "searchable": false
        }
        , {
            // you can also use name to get the target column
            "targets": 'testid', // name is the class you define in <th>
            "searchable": false
        }
        ]
    }
    );
}
);

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

$('.datatable').dataTable({
    "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
    "sPaginationType": "bootstrap",
    "aoColumnDefs": [
        { 'bSortable': false, 'aTargets': [ -1 ] }
    ]
});

Код будет выглядеть так:

$(".data-cash").each(function (index) {
  $(this).dataTable({
    "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
    "sPaginationType": "bootstrap",
    "oLanguage": {
      "sLengthMenu": "_MENU_ records per page",
      "oPaginate": {
        "sPrevious": "Prev",
        "sNext": "Next"
      }
    },
    "bSort": false,
    "aaSorting": []
  });
});

Вот ответ!

targets номер столбца, начинается с 0

$('#example').dataTable( {
  "columnDefs": [
    { "orderable": false, "targets": 0 }
  ]
} );

установите класс "no-sort" в таблице, затем добавьте css .no-sort {pointer-events: none! важный; курсор: по умолчанию! важный; фоновое изображение: нет! важный; } при этом он будет скрывать событие обновления и отключения стрелки в голове.