Вимкнути сортування для певного стовпця в jQuery DataTables


156

Я використовую плагін jQuery DataTables для сортування полів таблиці. Моє запитання: як відключити сортування за певним стовпцем? Я спробував із наступним кодом, але не вийшло:

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

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

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

але це все одно не дало бажаних результатів.


1
Я відредагував свою відповідь з опцією, де ви можете встановити стовпці вимкнення у своєму TH-визначенні.
Пауло Фідальго

Відключити кнопку за допомогою css. перевірити цю сторінку. datatables.net/forums/discussion/21164/…
Йосиф

ви також можете подивитися cbabhusal.wordpress.com/2015/05/20/…
ілюзіоніст

Відповіді:


176

Це те, що ви шукаєте:

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

3
це працювало для мене. Якщо ви хочете сортувати перший стовпець, 'aTargets': [-1], для другого 'aTargets': [1], для третього 'aTargets': [2] тощо.
Ласанг

5
ви можете просто зробити «aTargets»: [1, 2]
Adrien Be

2
@Lasang - Ви дійсно мали на увазі [-1]тоді [1], [2]і т. Д. ? Що -1означає? Чи не починається індексація стовпців 1для таблиць даних?
Дан Ніссенбаум

1
-1- це підрахунок індексу з кінця таблиці. ( -1є останньою колонкою таблиці)
Рамі Наср

1
Станом на DataTables 1.10.5 тепер можна визначити параметри ініціалізації за допомогою атрибутів HTML5 data- *. Див stackoverflow.com/a/32281113/1430996
Jeromy французького

87

Станом на DataTables 1.10.5 тепер можна визначити параметри ініціалізації за допомогою атрибутів HTML5 data- *.

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/ .


9
ІМО, це найкраща відповідь тут, найпростіший і найелегантніший підхід
Хамман Самуель

2
Це вимикає функціональність сортування, але я виявив (в 1.10.12), що стовпець все ще сортується за замовчуванням, коли ініціалізується DataTable, який стилює стовпчик із висхідним гліфом сортування. Якщо цього не потрібно, ви можете ініціалізувати таблицю даних, не сортуючи так: $ ('# example'). DataTable ({'order': []});
Брайан Меррелл

@BrianMerrell Wellllllll ... подивіться на це! jsfiddle.net/ja0ty8xr Ви повинні відкрити проблему GitHub для такої поведінки. :)
Jeromy French

64

Щоб відключити сортування першого стовпця, спробуйте скористатись наведеним нижче кодом у jquery даних. Нуль представляє тут можливість впорядкування.

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

Вимкнути сортування за стовпцем у jQuery Datatables


@Paulraj Посилання розірвано, ви не хочете змінити його?
taufique

1
Станом на DataTables 1.10.5 тепер можна визначити параметри ініціалізації за допомогою атрибутів HTML5 data- *. Див stackoverflow.com/a/32281113/1430996
Jeromy французького

60

Використовуючи 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" ]
} ]

EDIT 2

У цьому прикладі я використовую таблицю з Bootstrap, дотримуючись старого повідомлення в блозі. Зараз є одне посилання з оновленим матеріалом про стилізацію Datatables з завантажувальним інструментом .


@larrylampco Я оновив публікацію оновленими посиланнями.
Пауло Фідальго

Дякую .. що з втратою css, коли ми застосовуємо сортування
Шенкер Паудель

1
Станом на DataTables 1.10.5 тепер можна визначити параметри ініціалізації за допомогою атрибутів HTML5 data- *. Дивіться
stackoverflow.com/a/32281113/1430996

27

Я використовую лише додавання спеціального атрибута в tad 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
    });
});

3
Ви повинні використовувати data-bSortableзамість bSortable. bSortableне є дійсним атрибутом HTML.
Джеймс Доннеллі

Станом на DataTables 1.10.5 тепер можна визначити параметри ініціалізації за допомогою атрибутів HTML5 data- *. Дивіться
stackoverflow.com/a/32281113/1430996

15

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

10

Ось що ви можете використовувати для відключення певного стовпця, щоб вимкнути його:

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

Отже, все, що вам потрібно зробити, - це додати "упорядкований": false у стовпець, який ви не хочете сортувати.


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

Відповідь Бхавеша розумна, але надмірна. Для відключення сортування просто скористайтеся відповіддю абхінава. Вимкнення сортування в першому стовпці додайте ціль стовпця в опції aoColumnDefs:"bSortable": false, "aTargets": [0]
Матвій

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працює


5

Станом на 1.10.5 , просто включіть

'замовляти: помилково'

у columnDefs та націлюйте свій стовпець на

'цілі: [0,1]'

Таблиця повинна виглядати так:

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

5

Якщо ви встановите orderableвластивість ПЕРШИЙ стовпець значення false, ви також повинні встановити orderстовпець за замовчуванням, інакше він не працюватиме, оскільки перший стовпець є стовпцем замовлення за замовчуванням. Приклад нижче відключає сортування за першим стовпцем, але встановлює другий стовпець як стовпець порядку за замовчуванням (пам’ятайте, що індекси данихTables не базуються на нулі).

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

Це відповідь, яка працювала для мене станом на 17 липня 2020 року
Брайан

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

Ось 0індекс стовпця, якщо ви хочете, щоб кілька стовпців не було відсортовано, згадайте значення індексу стовпців, відокремлені наcomma(,)


чи можна відключити сортування для всіх стовпців?
fidel castro

Так, можливо, ви можете відвідати це посилання, щоб знати cbabhusal.wordpress.com/2015/08/18/…
ілюзіоніст

3

Щоб оновити відповідь 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>

Це здається приємним підходом ... якщо він працював, але це не для мене. Це документально підтверджено?
AllInOne

1
@AllInOne: так, для data-orderable... см stackoverflow.com/a/32281113/1430996 . data-sortableтакож працює, але я не можу знайти, де це зафіксовано.
Jeromy French

набагато краще рішення
Вашингтон Морайс

2

Використання класу:

<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>



1

Якщо ви вже повинні приховати деякі стовпці, як-от я приховую стовпчик прізвища. Мені просто довелося об'єднати ім'я, ім'я, тому я зробив запит, але приховав цю колонку від переднього кінця. Модифікаціями відключення сортування в такій ситуації є:

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

Зауважте, що у мене тут функціонал приховування

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

Тоді я об'єднав його "aoColumnDefs"


1
  1. Використовуйте наступний код, щоб відключити замовлення в першому стовпці:

    $('#example').dataTable( {
      "columnDefs": [
        { "orderable": false, "targets": 0 }
      ]
    } );
  2. Щоб вимкнути замовлення за замовчуванням, ви також можете скористатися:

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

1

Ви можете направити використання .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()
        ];

1

Є два способи, один визначається в 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
        }
        ]
    }
    );
}
);

0

ви також можете використати такий негативний індекс:

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

0

Код буде виглядати приблизно так:

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

0

Ось відповідь!

targets номер стовпця, він починається з 0

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

-2

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

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.