datatable配合PageHelper实现分页

随手记

datatable配合PageHelper实现分页，分页动作在后台实现，研究了一天，踩了好多坑，先来排坑，后附源码。

1、如果后台使用PageHelper来分页，那么其实一次请求会查询两次数据库，第一次是count统计总数，第二次是查询所需要的list。

坑1：

PageHelper.startPage(pageNum,pageSize);

使用这个分页时，pageNum不能为0。

以前一直以为，sql中的limit 0,pageSize，是从0开始的算偏移的，pageNum应该也是从0开始，如果把pageNum设为0，那就出大问题。

当pageNum为0时，pageHelper就只会帮你count统计数量，不会查询出具体的list数据！查看源码就知道原因了。

处理查询总数,返回 true 时，继续分页查询每一页的数据，false 时直接返回总数，点进去这个判断的函数，就会发现问题了！

这个pageNum就是一开始我们设置的pageNum，如果设置pageNum=0，那么这里的判断就是false，最后导致查询结果只有总数，没有每一页的数据！

坑2：

后台返回时，不用返回这个draw，之前查资料看到有人这么写：

还以为draw是页数，每次都给draw返回当前的页数，结果又出问题了。

draw是datatable的渲染绘制函数。

因为draw(参数)函数的参数是不可重复的，这么操作时就会有问题：选择第一页，点击下一页，再返回第一页时。因为参数的变化是1、2、1。1重复了，故第三次换页失败。

源码：

服务器端：

 @RequestMapping(value = "/xxx")
    public Map queryxxxx(HttpSession httpSession, HttpServletRequest request) {
        String stuid = (String) httpSession.getAttribute(xxxxx);
        Map map = new LinkedHashMap();
        try {
            int start = Integer.parseInt(request.getParameter("start"));
            int length = Integer.parseInt(request.getParameter("length"));
            start = start / length + 1;

            kuaiDi kuaiDi = new kuaiDi();
            kuaiDi.setStuid(stuid);
            kuaiDi.setValidind(true);
            kuaiDi.setPageNum(start);
            kuaiDi.setPageSize(length);
            kuaiDi.setPageFlag(true);
            List<kuaiDi> list = kuaiDiService.selectByStuid(kuaiDi);
            PageInfo pageInfo = new PageInfo(list);

            map.put("data", pageInfo.getList());
            map.put("recordsTotal", pageInfo.getTotal());
            map.put("recordsFiltered", pageInfo.getTotal());
        } catch (Exception e) {
            log.error(e.toString());
        }
        return map;
    }


//server层
    public List<kuaiDi> selectByStuid(kuaiDi record) {
        if (record.isPageFlag()){
            PageHelper.startPage(record.getPageNum(),record.getPageSize());
        }
        List<kuaiDi> list = kuaiDiDao.selectByStuid(record);
        return list;
    }

前端：

    $('#banner_table')
            .dataTable(
                {
                    "paging": true,
                    "lengthChange": true,
                    "searching": false,
                    "info": true,
                    "autoWidth": false,
                    "bAutoWidth": false,
                    "destroy":true,
                    "processing":true,
                    "serverSide":true,//开启服务器分页
                    'iDisplayLength': 8,
                    "lengthMenu": [8, 10,15],
                    "stripeClasses": ["odd", "even"],
                    "deferRender": true,
                    "pagingType":"full_numbers",
                    "ordering": true,
                    "order": [[ 1, "asc" ]],
                    "ajax": WebURL+"xxxx/xxxxx",
                    "columns": [{
                        data: "xxxx",
                    }],
                    "language": {
                        "lengthMenu": "每页 _MENU_ 条记录",
                        "zeroRecords": "没有找到记录",
                        "info": "页数：_PAGE_ / _PAGES_ ,共 _TOTAL_ 条记录",
                        "infoEmpty": "无记录",
                        "infoFiltered": "(从 _MAX_ 条记录过滤)",
                        "search": "搜索 : ",
                        processing: "载入中",//处理页面数据的时候的显示
                        paginate: {//分页的样式文本内容。
                            previous: "<",
                            next: ">",
                            first: "<<",
                            last: ">>"
                        }
                    },
                    "columnDefs": [
                        {
                            "render": function (data, type, row) {
                                var str = data;
                                if(data && data.length>13){
                                    str = data.substring(0,5)+"...";
                                    str += data.substring(data.length-5,data.length);
                                }
                                return str;
                            },
                            "targets": 0
                        }],
                }
            );

datatable官网: http://datatables.club/reference/option/

关于datatable删除数据后，动态刷新table的坑：

//在datatable 中定义了点击事件  
$('#banner_table tbody').on('click', '#delete', function () {
            var data = $(this).attr("data");
            $("#confirm_del").attr("data",data);
        });   

//当删除数据重绘表格时，使用以下函数确实能重绘，但是没有清理上一个table的点击事件，
//导致点击以下，触发两下事件
 function reloadTable() {
        $("#banner_table").dataTable().fnClearTable();
        // 销毁旧的DataTables对象，以便初始化新的DataTables
        $("#banner_table").dataTable().fnDestroy();
        load_banner_table();
    }

//应把定义的事件关掉，必须关掉！！！
    function reloadTable() {
        $("#banner_table").dataTable().fnClearTable();
        // 销毁旧的DataTables对象，以便初始化新的DataTables
        $("#banner_table").dataTable().fnDestroy();
        $('#banner_table tbody').off('click');
        load_banner_table();
    }