当前位置: 首页 > news >正文

Jquery插件 dataTable设置点击表格指定的列实现升序降序排序功能

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

  

根据页面浏览器点击操作获取提交过来的参数

6

 

在后端用PHP进行接收判断,

然后传入SQL查询进行排序即可