dataTables分页展示数据注意事项(案例)（一）

dataTables可以高效的提供大量数据的表格展示：

代码如：

前台：

table = $('#example').DataTable(

            {

                "ajax" : "/c",

                "ordering" : false,

                "processing" : true,

                "serverSide" : true,

                "bDestroy" : true,//不加这个在第二次展示此表格时报错

                "bLengthChange": false, //改变每页显示数据数量

            

                "columns" : [ {

                    "data" : "id"

                }, {

                    "data" : "name"

                }, {

                    "data" : null

                } ],

                "columnDefs" : [

                {

                    "targets" : 2,

                    "data" : null,

                    "render" : function(data, type, row) {

                        var html = '<a onclick="use(' + row.id + ','

                                + orderId

                                + ')"  class="btn btn-primary">选用</a>';

                        return html;

                    }

                } ],

                "language" : {

                    "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" : ": 以降序排列此列"

                    }

                }
            });

后台control:

       int draw = Integer.valueOf(request.getParameter("draw
4000
"));

        int start = Integer.valueOf(request.getParameter("start"));

        int length = 5;固定前台展示的每页记录数，否则用length值

        PageHelper.startPage(start / length + 1, length);

        JsonObject jsonResponse = new JsonObject();

        List<Template> list=null;

        String searchValue = request.getParameter("search[value]");//实现搜索功能

        if("".equals(searchValue)){

            list = tem.findAllList();

        }else{

            list = tem.searchListByName("%" + searchValue + "%");

        }

        jsonResponse.addProperty("draw", draw);

        jsonResponse.addProperty("recordsTotal", ((Page<Tem>) list).getTotal());

        jsonResponse.addProperty("recordsFiltered",((Page<Tem>) list).getTotal());

        Gson gson = new GsonBuilder().setDateFormat("yyyy-MM-dd HH:mm")

                .create();

        jsonResponse.add("data", gson.toJsonTree(list));

        return jsonResponse.toString();

上述是的例子，需要注意事项：

重新加载：table.ajax.reload();

要想更新dataTables时，在新方法中添加：$('#demo').dataTable().fnDestroy();

数据排序：$('#example').dataTable( {"aaSorting": [[ 4, "desc" ]]} );