禁用使用jQuery数据表的列sorting

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

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

我也尝试了下面的代码:

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

但是这仍然没有产生预期的结果。

这是你要找的东西:

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

从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/上的示例; 。

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

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

禁用jQuery数据表中的列sorting

使用数据表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引导 。

我使用的只是添加一个自定义属性,并控制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 }); }); 

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

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

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

截至1.10.5 ,只需包括

'可订购:假'

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

'目标:[0,1]'

表格应该像:

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

对于单列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工作

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

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

这里0是该列的索引,如果你想要多列不被sorting,请提及用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,所以我做了查询,但从前端隐藏该列。 在这种情况下禁用sorting的修改是:

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

注意我在这里有隐藏function

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

然后我把它合并到"aoColumnDefs"

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

     $('#example').dataTable( { "columnDefs": [ { "orderable": false, "targets": 0 } ] } ); 
  2. 要禁用默认sorting,您还可以使用:

     $('#example').dataTable( { "ordering": 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 } ] } ); 

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

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