Javascript 使用jQuery DataTables时禁用最后一列的排序
我在一个项目中使用jQuery DataTables，我想知道如何禁用最后一列的排序。我想在整个网站上实现这个功能 现在我有以下代码：Javascript 使用jQuery DataTables时禁用最后一列的排序,javascript,jquery,datatables,Javascript,Jquery,Datatables,我在一个项目中使用jQuery DataTables，我想知道如何禁用最后一列的排序。我想在整个网站上实现这个功能 现在我有以下代码： <!-- jQuery DataTable --> <script src="../assets/js/plugins/dataTables/jquery.datatables.min.js"></script> <script> /* Default class modificat
<!-- 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="#">← '+oLang.sPrevious+'</a></li>'+
'<li class="next disabled"><a href="#">'+oLang.sNext+' → </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>
/*默认类修改*/
$.extend（$.fn.dataTableExt.ostdclass{
“sWrapper”：“dataTables\u包装表单内联”
} );
/*获取分页信息的API方法*/
$.fn.dataTableExt.oApi.fnPagingInfo=函数（oSettings）
{
返回{
“iStart”：oSettings._i显示开始，
“iEnd”：oSettings.fnDisplayEnd（），
“i长度”：o设置。i显示长度，
“iTotal”：oSettings.fnRecordsTotal（），
“iFilteredTotal”：oSettings.fnRecordsDisplay（），
“iPage”：Math.ceil（oSettings.\u iDisplayStart/oSettings.\u iDisplayLength），
“iTotalPages”：Math.ceil（oSettings.fnRecordsDisplay（）/oSettings._iDisplayLength）
};
}
/*引导式分页控件*/
$.extend（$.fn.dataTableExt.oPagination{
“引导”：{
“fnInit”：函数（oSettings、nPaging、fnDraw）{
var oLang=oSettings.olalanguage.oPaginate；
var fnClickHandler=函数（e）{
e、 预防默认值（）；
if（oSettings.oApi.\u fnPageChange（oSettings，e.data.action））{
fnDraw（oSettings）；
}
};
$（nPaging）.addClass（'pagination'）.append(
“”+
“”+
“”+
“
”
);
变量els=$（'a'，nPaging）；
$（els[0]）.bind（'click.DT'，{action:'previous}，fnClickHandler）；
$（els[1]）.bind（'click.DT'，{action:'next}，fnClickHandler）；
},
“FNDUpdate”：功能（oSettings，fnDraw）{
可变长度=5；
var oPaging=oSettings.oInstance.fnPagingInfo（）；
var an=oSettings.aanFeatures.p；
变量i、j、sClass、iStart、iEnd、iHalf=数学楼层（iListLength/2）；
if（oPaging.iTotalPages
aoColumnDefs的aTargets参数允许您提供从右侧偏移的索引（使用负数）以及从左侧偏移的索引。因此，您可以执行以下操作：
aoColumnDefs: [
{
bSortable: false,
aTargets: [ -1 ]
}
]
等效的新API（适用于DataTables 1.10+）为：
columnDefs: [
{ orderable: false, targets: -1 }
]
使用此链接
我想发展目前的答案
好方法是使用前面提到的aoColumnDefs
。
bSortable
参数的默认值为true
（对于每个列）
你有两个选择
按索引：
按类别划分：
在
上添加类：
<table>
<thead>
<tr>
<th>Foo</th>
<th>Bar</th>
<th class="nosort">Baz</th>
</tr>
</thead>
<tbody>...</tbody>
</table>
福
酒吧
巴兹
...
关于数据表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 */
});
这对我有用-你可以试试这个
dataTable({
"paging": true,
"ordering": false,
"info": true,
})
数据表({
“分页”：正确，
“命令”：错误，
“信息”：正确，
})
使用以下命令：
$(document).ready(function () {
$('#workPatternDataTable').dataTable({
//"aaSorting": [],
ajax: null,
columnDefs: [
{
targets: 0,
sortable: false,
autoWidth: false,
}
]
});
});
如果您不允许对第一列进行排序，那么使用
<script>
$(document).ready(function () {
$('#example2').DataTable({
'order':[],
'columnDefs': [{
"targets": 0,
"orderable": false
}]
});
});
</script>
$（文档）.ready（函数（）{
$（'#示例2'）。数据表（{
“订单”：[]，
“columnDefs”：[{
“目标”：0，
“可订购”：false
}]
});
});
这里索引行以0开头，所以将0放入目标中。
如果对一个或多个列禁用排序，则使用
<script>
$(document).ready(function () {
$('#example2').DataTable({
'order':[],
'columnDefs': [{
"targets": [0,3],
"orderable": false
}]
});
});
</script>
$（文档）.ready（函数（）{
$（'#示例2'）。数据表（{
“订单”：[]，
“columnDefs”：[{
“目标”：[0,3]，
“可订购”：false
}]
});
});
在这里你可以看到，
上面的复选框列位于0位置，操作列位于第3位置，因此在这两个表中都禁用排序。您可以使用数据属性data orderable=“false”
名称
位置
办公室
年龄
开始日期
薪水
老虎尼克松
系统架构师
爱丁堡
61
2011/04/25
$320,800
加勒特温特斯
会计
东京
63
2011/07/25
$170,750
阿什顿考克斯
初级技术作者
旧金山
66
2009/01/12
$86,000
塞德里克·凯利
高级Javascript开发人员
爱丁堡
22
2012/03/29
$433,060
佐藤航空
会计
托克
$('.dataTable').dataTable({
columnDefs: [{ orderable: false, "targets": -1 }] /* -1 = 1st colomn, starting from the right */
});
dataTable({
"paging": true,
"ordering": false,
"info": true,
})
$(document).ready(function () {
$('#workPatternDataTable').dataTable({
//"aaSorting": [],
ajax: null,
columnDefs: [
{
targets: 0,
sortable: false,
autoWidth: false,
}
]
});
});
<script>
$(document).ready(function () {
$('#example2').DataTable({
'order':[],
'columnDefs': [{
"targets": 0,
"orderable": false
}]
});
});
</script>
<script>
$(document).ready(function () {
$('#example2').DataTable({
'order':[],
'columnDefs': [{
"targets": [0,3],
"orderable": false
}]
});
});
</script>
<th data-orderable="false">Salary</th>
columnDefs: [
{ orderable: false, targets: 0 }
]
columnDefs: [
{ orderable: false, targets: [0,1,2] }
]
aoColumnDefs: [{ "aTargets": [ 0 ], "bSortable": false}],
$(".tableSort").dataTable({
aaSorting: [[0, 'asc']],
aoColumnDefs: [
{ "aTargets": [ -1 ], "bSortable": false},
]
});
<script>
$(document).ready(function () {
$('#example-2').DataTable({
'order':[],
'columnDefs': [{
"targets": [-1],
"orderable": false
}]
});
});
</script>
var table = $('#tbl').DataTable({
"columnDefs": [{ targets: 'no-sort', orderable: false }]});
<th class="no-sort">Header n</th>