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