设为首页 加入收藏

TOP

jquery.dataTables的探索之路-服务端分页配置(三)
2019-09-17 19:00:08 】 浏览:80
Tags:jquery.dataTables 探索 服务 配置
录数) * *
@return 当前记录数 */ public int countOffSet() { return getPageSize() * (getCurrentPage() - 1); } /** * MYSQL * 取几条 * * @return 取几条 */ public int countMySQLLength() { return getPageSize(); } /** * ORACLE * 取几条 * * @return 取几条 */ public int countOracleLength() { return getPageSize() * getCurrentPage(); } @Override public String toString() { return "[ " + "count:" + count + " totalPage:" + totalPage + " pageSize:" + pageSize + " currentPage:" + currentPage + " sort:" + sort + " order:" + order + " ]"; } }

由于SpringMVC封装参数时出现了问题,于是我想能不能在dataTables初始化时自定义后台传递的参数呢?

继续改造‘ajax’属性:

$('#table').DataTable({
           ...
            'ajax': {
                url: '/admin/file/list', // url请求
                data: function (data) { // 定义初始化参数 :data为向后台发送的参数obj
                    return $.extend( {},{}, { //自定义参数
                        "currentPage": data.start/data.length+1, //当前页"pageSize": data.length, // 每页显示条数,data.length='pageLength'属性的值 我设置的是5
                    } )
                },
                dataSrc: function (json) {
                    return json.data.list;
                }
            },
            ...
 )}    

再次刷新页面,数据又回来了

等等,分页是怎么回事??不打紧,加上这两句:

 $('#table').DataTable({
            ...
            'ajax': {
                ...
                dataSrc: function (json) {
                    json.recordsFiltered = json.data.count;  // 指定记录数
                    json.recordsTotal = json.data.totalPage; // 指定页数
                    return json.data.list;
                }
            },
            ...
 })

再次刷新页面出现了预期的结果:

调试完毕,发现部分列不应该排序,查看‘columnDefs’属性,发现ID列排序被禁用,但排序图标初始化时依然存在。

添加如下属性:

$('#table').DataTable({
            ...
            'order': [1,'asc'], //修改默认的排序列为第2列、升序
            ...
 })

再次刷新页面后正常显示,能不能实现指定列排序呢?

修改代码如下(为了使代码更简洁我将‘columnDefs’属性中的代码转移到‘columns’属性中):

$('#table').DataTable({
            ...
            columns:[{  // 合并后的columns
                data: "id", // 绑定后台数据列的属性
                sortable: false, // 禁止排序
                render : function(id, type, row, meta) { // 将数据进行DOM转换
                    return '<input type="checkbox" name="ids" value=' + id + '><label for="input-' + id + '"></label>';
                }
            },{
                data: "filename",
                render : function(id) {
                    return '<a href="java script:;">'+id+'<a/>';
                }
            },{
                data: 'filetype',
                defaultContent : "",
                sortable: false,
            },{
                data: 'logicadress',
                defaultContent : "",
                sortable: false,
            },{
                data: 'physicsadress',
                defaultContent : "",
                sortable: false,
            },{
                data: 'modifyUser',
                defaultContent : "-",
                sortable: false,
            },{
                data: 'modifyTime',
                defaultContent : ""
            }],
       ... })

刷新页面后效果如下:

点击排序发现没有反应。后台的排序已经实现了,前台只要发送相应的参数即可。

继续修改代码如下:

$('#table').DataTable({
            ...
            'ajax': {
                ...
                data: function (data) {
                    console.log(data);
                    return $.extend( {},{}, {
                        "currentPage": data.start/data.length+1,
                        "pageSize": data.length,
                        "order": data.order[0].dir, //升序或降序:随鼠标点击发生变化
                        "sort": data.order[0].column==1?"fileName":"modifyTime" //获取排序列:下标从0开始,1代表第二列(因为只有两列参与排序,所以简单写了)
                    } )
                },
                ...
            },
            ...
 })

刷新页面,打开控制台,我们看下‘data’的结构:

{
  "draw": 1,
  "columns": [
    {
      "data": "id","name": "","searchable": true,"orderable": false,
      "search": {"value": "", "regex": false}
首页 上一页 1 2 3 4 下一页 尾页 3/4/4
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇vue快速复习手册 下一篇ES6入门系列 ----- 对象的遍历

最新文章

热门文章

Hot 文章

Python

C 语言

C++基础

大数据基础

linux编程基础

C/C++面试题目