DataTable 后端分页（新）

最近需要做Datatable的后端分页，网上有很多前辈总结的，林林总总，有些照着配了但是点击分页数据不刷新，

现在给大家总结出样例，分享给大家。注意得写上

jsp页面注意我的红色标注的地方，serverSide和dataFilter注意得写上,必须有的。

jsp：

peoplelist = $('#people').DataTable({
 
            "serverSide": true, //此处是控制客户端分页
 
            "bLengthChange": false,
 
            "ordering": false,
 
            "deferRender": true,
 
            "info": false,
 
            "bAutoWidth": true,
 
            "searching": false,
 
            "paging": true, //打开分页设置
 
            "iDisplayLength": 15 //配置每页显示数据的个数
 
            "pagingType": "full_numbers",
 
            "scrollCollapse": true,
 
            oLanguage: {
 
                sProcessing: "处理中...",
 
                sLengthMenu: "显示 _MENU_ 项结果",
 
                sZeroRecords: "没有匹配结果",
 
                sInfo: "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
 
                sInfoEmpty: "显示第 0 至 0 项结果，共 0 项",
 
                sInfoFiltered: "(由 _MAX_ 项结果过滤)",
 
                sInfoPostFix: "",
 
                sSearch: "搜索:   ",
 
                sUrl: "",
 
                sEmptyTable: "表中数据为空",
 
                sLoadingRecords: "载入中...",
 
                sInfoThousands: ",",
 
                oPaginate: {
 
                    sFirst: "首页",
 
                    sPrevious: "上页",
 
                    sNext: "下页",
 
                    sLast: "末页"
 
                },
 
                oAria: {
 
                    sSortAscending: "以升序排列此列",
 
                    sSortDescending: "以降序排列此列"
 
                }
 
            },
 
            columns: [
 
                      {data: "z_perno"},
 
                      {data: "z_perna"},
 
                      {data: "z_mobph",
 
                          createdCell: function (td, cellData, rowData, row, col) {
 
                              var  objString;  
 
                              var objLength = cellData.length;   
 
                             if(objLength >20){  
 
                                  objString = cellData.substring(0,13) + "...";  
 
                             } 
 
                              $(td).html(objString);
 
                              $(td).css('title','cellData')
 
                          }     
 
                      }
 
            ] ,
 
            ajax:{  
 
                url: "${ctx}/getPeoList",
 
                type: "GET",
 
                async : false,
 
                dataType : 'json',
 
                data:function(d){
 
                     d= getSelectInfo(d);
 
                },
 
               dataFilter: function (json) {//json是服务器端返回的数据
 
                    return json;
 
                },
 
                error: function (XMLHttpRequest, textStatus, errorThrown) {
 
                    console.log(XMLHttpRequest);
 
                    console.log(textStatus);
 
                    console.log(errorThrown);
 
                } 
 
            } 
 
        });
 
 
 
 
 
function getSelectInfo(data){
 
                 data.calendar1 = $('#calendar1').val().substring(0, 4)+"-"+$('#calendar1').val().substring(5, 7)+"-"+$('#calendar1').val().substring(8, 10);
 
                 data.calendar2 = $('#calendar2').val().substring(0, 4)+"-"+$('#calendar2').val().substring(5, 7)+"-"+$('#calendar2').val().substring(8, 10);
 
        }

controller

在controller层传入下方的三个参数，这个三个参数名是固定写法，前端datatable封装好他帮你传的，自己不用在页面传这三个参数，start是起始页，length是每页显示个数，这个是分页需要的传到sql里面进行查询就好了。

我这个是框架带的需要穿页码和 每页显示个数，我就自己加工了一下，注意返回的结果一定得照我的这个写，类似于map里面存的得这么写，得传回去draw、recordsTotal、recordsFiltered、data这四个参数,datatable会自己对应显示的。

@RequestMapping(value="/getPeoList",method=RequestMethod.GET)

    public HashMap getPeoList( @RequestParam(required=false,name= "calendar1") String calendar1,

                              @RequestParam(required=false,name= "calendar2") String calendar2, //前两个是自己查找传的参数

                              @RequestParam(required=false,name="length" ) int length, //下面三个是必须的写的参数

                              @RequestParam(required=false,name="start" ) int start,

                              @RequestParam(required=false,name="draw" ) int draw) {

        Page<TPerson> page = getPage((start+length)/length, length); //此行和下一行就是框架带的分页，其实只要sql里面拼个起始页和

                                                                         每页显示个数就可以了

        HashMap<String, String> para = new HashMap<>();

        HashMap mp = new HashMap();

        mp.put("draw",draw);//传入再传回就行

        mp.put("recordsTotal",peoservice.getPeoCount(calendar1,calendar2));//显示的行数,这个要和上面写的一样   

        mp.put("recordsFiltered",peoservice.getPeoCount(calendar1,calendar2));//显示的行数,这个要和上面写的一样                

        mp.put("data",peoservice.getPeoList(calendar1,calendar2,page,para).get("result") );//把查到数据装入aaData,要以JSON格式返回

        return mp;

               }

今天的文章DataTable 后端分页（新）分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。