Jquery插件 dataTable设置点击表格指定的列实现升序降序排序功能
前端js:
$('#student_list').DataTable({
'lengthChange': false,
'searching' : false,
'ordering' : true, // 开启排序功能(后端要根据排序字段和排序类型进行接收处理)
'info' : true,
'paging' : true,
//'pageLength' : 20,
'bLengthChange': true, //开关,是否显示每页显示多少条数据的下拉框
'aLengthMenu': [[20, 50, 100], [20, 50, 100]],//设置每页显示数据条数的下拉选项
'iDisplayLength': 20, //每页初始显示5条记录
'autoWidth' : false,
'serverSide' : true,
'ajax' : {
"url" : 'list',
"type" : "POST",
"data" : {
"id" : $('#id').val(),
'age' : $("#age option:selected").val(),
'name' : $("#name").val(),
},
complete:function(){
//不管成功还是失败 都会进这个函数
}
},
'columns' : [
{'data': 'id', render: function(data, type, row, meta){
return '<input type="checkbox" class="ids" name="ids[]" value="'+data+'"/>';
}},
{'data': 'name', render: function(data, type, row, meta) {
return data;
}
}},
{'data': 'age', render: function(data, type, row, meta) {
return data;
}},
],
"columnDefs":[
{
'targets' : [0,1,2,5,6,7,8,9,10], // 设置指定的列-取消排序功能
'orderable' : false
},
],
"oLanguage": {
"sLengthMenu" : "每页_MENU_条",
"sZeroRecords" : "未找到符合条件的数据",
"sInfo" : "_START_ - _END_ 共_TOTAL_条",
"sInfoEmpty" : "无记录",
"sInfoFiltered" : "(自_MAX_条中过滤)",
"sSearch" : "标签",
"sProcessing" : "数据加载中...",
"oPaginate" : {
"sFirst":"首页",
"sPrevious" : "上一页",
"sNext" : "下一页",
"sLast" : "末页"
}
},
"fnRowCallback" : function(nRow, aData) {
$('td', nRow).css({ // 设置表格背景颜色
"background-color" : aData.css_color,
});
}
});
根据页面浏览器点击操作获取提交过来的参数

在后端用PHP进行接收判断,
然后传入SQL查询进行排序即可
浙公网安备 33010602011771号