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

来源：互联网发布：英雄联盟刷点卷软件编辑：程序博客网时间：2024/05/23 11:50

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"));
       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" ]]} );

0 0