jQuery DataTables 插件实现分页功能

jQuery DataTables 插件实现分页功能

jQuery.datatables是一款基于jQuery表格插件。
首先准备一个json数据文件 - list.json

{
  "total": 30,
  "page": 3,
  "limit": 10,
  "data": [{"Id": 1,"Name": "Name1","Sex": "女"}
  , {"Id": 2,"Name": "Name2","Sex": "女"}
  , {"Id": 3,"Name": "Name3","Sex": "女"}
  , {"Id": 4,"Name": "Name4","Sex": "女"}
  , {    "Id": 5,    "Name": "Name4",    "Sex": "女"  }
  , {    "Id": 6,    "Name": "Name4",    "Sex": "女"  }
  , {    "Id": 7,    "Name": "Name4",    "Sex": "女"  }
  , {    "Id": 8,    "Name": "Name4",    "Sex": "女"  }
  , {    "Id": 9,    "Name": "Name4",    "Sex": "女"  }
  , {    "Id": 10,    "Name": "Name4",    "Sex": "女"  }
  ]
}

测试页面

    
    
    
    
    



    
JQuery DataTables插件自定义分页Ajax实现
    

        

        

            
编号
            
姓名
            
性别
        
        
    

改造测试页面，增加单按钮

///改动处1:
            //渲染
            columnDefs: [             {
                "render": function ( data, type, row ) {
                    return "";
                },
                "targets": 0 //指定渲染列：第一列(渲染第一列为单选框，data自动匹配为  {"data":"id"}中数据）
            },{
                "targets": 'nosort',  //列的样式名
                "orderable": false    //包含上样式名‘nosort’的禁止排序
            }],
////改动处2:
            //列表表头字段
            columns: [
                { "data": "Id" },
                { "data": "Id" },
                { "data": "Name" },
                { "data": "Sex" }
            ]

点击标题实现后端排序

                param.page = (data.start / data.length)+1;//当前页码

                //增加分页实现
                if(data.order.length > 0){
                    param.order = data.order[0].column;   //按指定列排序
                    param.dir = data.order[0].dir;        //排序方式 asc、desc
                }