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

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

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

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

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

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

Ответ 1

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

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

Ответ 2

В DataTables 1.10.5 теперь можно определить инициализацию опции, использующие атрибуты HTML5 data- *.

-from Пример 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/.

Ответ 3

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

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

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

Ответ 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 с загрузкой.

Ответ 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 будет (он будет динамически получать информацию сортировки из самой таблицы;)

$('.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
    });
});

Ответ 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
    }]
});

Ответ 7

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

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

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

Ответ 8

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

Ответ 9

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

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

Ответ 10

По состоянию 1.10.5 просто включите

'orderable: false'

в столбцеDefs и настройте столбец с помощью

': [0,1]'

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

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

Ответ 11

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

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

Ответ 12

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

Здесь 0 - это индекс столбца, если вы хотите, чтобы несколько столбцов не были отсортированы, укажите значения индекса столбца, разделенные символом comma(,)

Ответ 13

Чтобы обновить 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>

Ответ 14

Использование класса:

<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>[email protected]</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>

Ответ 15

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

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

Ответ 16

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

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

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

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

Затем я объединил его в "aoColumnDefs"

Ответ 17

Используйте следующий код, чтобы отключить упорядочение в первом столбце:
```
$('#example').dataTable( {
  "columnDefs": [
    { "orderable": false, "targets": 0 }
  ]
} );
```
Чтобы отключить настройку по умолчанию, вы также можете использовать:
```
$('#example').dataTable( {
     "ordering": false, 
} );
```

Ответ 18

Вы можете использовать метод .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()
        ];

Ответ 19

Есть два способа, один из которых определяется в 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
        }
        ]
    }
    );
}
);

Ответ 20

вы также можете использовать отрицательный индекс следующим образом:

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

Ответ 21

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

$(".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": []
  });
});

Ответ 22

Вот ответ!

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

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

Ответ 23

установить класс "no-sort" в таблице затем добавьте css .no-sort {pointer-events: none! important; cursor: default! important; background-image: none! important; } этим он скроет стрелку updown и нечеткое событие в голове.