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查询进行排序即可

 

posted on 2026-01-21 18:30  四季皆春  阅读(0)  评论(0)    收藏  举报

导航