禁用使用jQuery数据表的列sorting

我正在使用jQuery数据表插件来sorting表字段。 我的问题是如何禁用sorting的特定列？ 我已经尝试了下面的代码，但它没有工作：

"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- * attributes – 表选项

因此，您可以在不希望sorting的列的第一列使用data-orderable="false" 。 例如，下表中的第二列“头像”将不可sorting：

 <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

要使第一列sorting禁用，请尝试在数据表jquery下面的代码。 null表示这里的sorting启用。

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

禁用jQuery数据表中的列sorting

Answer 4

使用数据表1.9.4我已经用这个代码禁用了第一列的sorting：

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

编辑：

你甚至可以禁用你的<th>上的no-sort类，

并使用这个初始化代码：

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

编辑2

在这个例子中，我使用了带有Bootstrap的Datables，在一篇老博客文章之后。 现在有一个链接更新材料关于样式Datatables引导 。

Answer 5

我使用的只是添加一个自定义属性，并控制sorting通过自动检查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将会（它将dynamic地从表中获取sorting信息;）

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

因此，您只需将“可订购”：false添加到您不想sorting的列。

Answer 8

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

Answer 9

截至1.10.5 ，只需包括

'可订购：假'

在columnDefs中，并用你的列来定位

'目标：[0,1]'

表格应该像：

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

Answer 10

对于单列sorting禁用尝试此示例：

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

Answer 11

如果将FIRST列orderable属性设置为false，则还必须设置默认order列，否则它将不起作用，因为第一列是默认订购列。 下面的例子禁用第一列的sorting，但将第二列设置为默认顺序列（记住dataTables的索引是从零开始的）。

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

Answer 12

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

这里0是该列的索引，如果你想要多列不被sorting，请提及用comma(,)分隔的列索引值

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

Answer 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>[e-mail]</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>

Answer 15

这适用于单列的我

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

Answer 16

如果你已经不得不隐藏一些列，像我隐藏姓氏列。 我只需要连接fname，lname，所以我做了查询，但从前端隐藏该列。 在这种情况下禁用sorting的修改是：

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

注意我在这里有隐藏function

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

然后我把它合并到"aoColumnDefs"

Answer 17

1. 使用以下代码禁用第一列的sorting：

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

2. 要禁用默认sorting，您还可以使用：

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

Answer 18

你也可以使用这样的负指数：

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

Answer 19

代码将如下所示：

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

Answer 20

这是答案！

targets是列号，它从0开始

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

Answer 21

您可以直接在列上使用.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() ]; 

Answer 22

在表中设置类“no-sort”然后添加css .no-sort {pointer-events：none！important; cursor：default！important; background-image：none！important; }由此它将隐藏箭头上下颠倒事件的头部。