使用jQuery数据表时禁用最后一列的sorting

我正在项目中使用jQuery DataTables，我想知道如何禁用最后一列的sorting。 我想实现这个网站。

现在我有以下代码：

<!-- jQuery DataTable --> <script src="../assets/js/plugins/dataTables/jquery.datatables.min.js"></script> <script> /* Default class modification */ $.extend( $.fn.dataTableExt.oStdClasses, { "sWrapper": "dataTables_wrapper form-inline" } ); /* API method to get paging information */ $.fn.dataTableExt.oApi.fnPagingInfo = function ( oSettings ) { return { "iStart": oSettings._iDisplayStart, "iEnd": oSettings.fnDisplayEnd(), "iLength": oSettings._iDisplayLength, "iTotal": oSettings.fnRecordsTotal(), "iFilteredTotal": oSettings.fnRecordsDisplay(), "iPage": Math.ceil( oSettings._iDisplayStart / oSettings._iDisplayLength ), "iTotalPages": Math.ceil( oSettings.fnRecordsDisplay() / oSettings._iDisplayLength ) }; } /* Bootstrap style pagination control */ $.extend( $.fn.dataTableExt.oPagination, { "bootstrap": { "fnInit": function( oSettings, nPaging, fnDraw ) { var oLang = oSettings.oLanguage.oPaginate; var fnClickHandler = function ( e ) { e.preventDefault(); if ( oSettings.oApi._fnPageChange(oSettings, e.data.action) ) { fnDraw( oSettings ); } }; $(nPaging).addClass('pagination').append( '<ul>'+ '<li class="prev disabled"><a href="#">&larr; '+oLang.sPrevious+'</a></li>'+ '<li class="next disabled"><a href="#">'+oLang.sNext+' &rarr; </a></li>'+ '</ul>' ); var els = $('a', nPaging); $(els[0]).bind( 'click.DT', { action: "previous" }, fnClickHandler ); $(els[1]).bind( 'click.DT', { action: "next" }, fnClickHandler ); }, "fnUpdate": function ( oSettings, fnDraw ) { var iListLength = 5; var oPaging = oSettings.oInstance.fnPagingInfo(); var an = oSettings.aanFeatures.p; var i, j, sClass, iStart, iEnd, iHalf=Math.floor(iListLength/2); if ( oPaging.iTotalPages < iListLength) { iStart = 1; iEnd = oPaging.iTotalPages; } else if ( oPaging.iPage <= iHalf ) { iStart = 1; iEnd = iListLength; } else if ( oPaging.iPage >= (oPaging.iTotalPages-iHalf) ) { iStart = oPaging.iTotalPages - iListLength + 1; iEnd = oPaging.iTotalPages; } else { iStart = oPaging.iPage - iHalf + 1; iEnd = iStart + iListLength - 1; } for ( i=0, iLen=an.length ; i<iLen ; i++ ) { // Remove the middle elements $('li:gt(0)', an[i]).filter(':not(:last)').remove(); // Add the new list items and their event handlers for ( j=iStart ; j<=iEnd ; j++ ) { sClass = (j==oPaging.iPage+1) ? 'class="active"' : ''; $('<li '+sClass+'><a href="#">'+j+'</a></li>') .insertBefore( $('li:last', an[i])[0] ) .bind('click', function (e) { e.preventDefault(); oSettings._iDisplayStart = (parseInt($('a', this).text(),10)-1) * oPaging.iLength; fnDraw( oSettings ); } ); } // Add / remove disabled classes from the static elements if ( oPaging.iPage === 0 ) { $('li:first', an[i]).addClass('disabled'); } else { $('li:first', an[i]).removeClass('disabled'); } if ( oPaging.iPage === oPaging.iTotalPages-1 || oPaging.iTotalPages === 0 ) { $('li:last', an[i]).addClass('disabled'); } else { $('li:last', an[i]).removeClass('disabled'); } } } } }); /* Show/hide table column */ function dtShowHideCol( iCol ) { var oTable = $('#example-2').dataTable(); var bVis = oTable.fnSettings().aoColumns[iCol].bVisible; oTable.fnSetColumnVis( iCol, bVis ? false : true ); }; /* Table #example */ $(document).ready(function() { $('.datatable').dataTable( { "sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>", "sPaginationType": "bootstrap", "oLanguage": { "sLengthMenu": "_MENU_ records per page" } }); $('.datatable-controls').on('click','li input',function(){ dtShowHideCol( $(this).val() ); }) }); </script> 

Answer 1

aoColumnDefs的aTargets参数可以让你从右侧给出索引偏移量（使用负数）。 所以你可以这样做：

 aoColumnDefs: [ { bSortable: false, aTargets: [ -1 ] } ] 

等效的新API（对于DataTable 1.10+）将是：

 columnDefs: [ { orderable: false, targets: -1 } ] 

Answer 2

我想开发当前的答案。

如上所述，最好的方法是使用aoColumnDefs 。
bSortable参数的默认值是true （对于每列）。

你有两个选项

按指标：

 var table = $('#example').DataTable({ 'aoColumnDefs': [{ 'bSortable': false, 'aTargets': [-1] /* 1st one, start by the right */ }] }); 

按class级：

 var table = $('#example').DataTable({ 'aoColumnDefs': [{ 'bSortable': false, 'aTargets': ['nosort'] }] }); 

在<th>上添加类：

 <table> <thead> <tr> <th>Foo</th> <th>Bar</th> <th class="nosort">Baz</th> </tr> </thead> <tbody>...</tbody> </table> 

有关列的文档

JSBin

Answer 3

在这里阅读

http://www.craiglotter.co.za/2010/04/19/how-to-disable-sorting-on-a-column-in-jquery-datatables-plugin/

 $('#example').dataTable({ "aoColumns": [ null, null, { "bSortable": false }, // <-- disable sorting for column 3 null ] }); 

http://datatables.net/usage/columns在bSortable下你可以使用;aoColumnDefs和aTargets指定要禁用的列

 $('#example').dataTable({ "aoColumnDefs": [ { "bSortable": false, "aTargets": [ -1 ] // <-- gets last column and turns off sorting } ] }); 

http://live.datatables.net/aqoxob/edit#source

Answer 4

在DataTable 1.9.x上：

 $('.dataTable').dataTable({ 'aoColumnDefs': [{ 'bSortable': false, 'aTargets': [-1], /* 1st colomn, starting from the right */ }] }); 

而在1.10.x

 $('.dataTable').dataTable({ columnDefs: [{ orderable: false, "targets": -1 }] /* -1 = 1st colomn, starting from the right */ }); 

Answer 5

它为我工作 – 你可以试试这个

 dataTable的（{
     “分页”：是的，
     “sorting”：错误，
     “info”：true，
 }）

Answer 6

使用这个链接http://datatables.net/ref#bSortable

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

Answer 7

用这个：

 $(document).ready(function () { $('#workPatternDataTable').dataTable({ //"aaSorting": [], ajax: null, columnDefs: [ { targets: 0, orsderable: false, autoWidth: false, } ] }); });