原文： 

Jquery Datatables 异步分页加载数据

 

正在做的一个Web项目，其中用到了jQuery datatables这个表格控件，说实话挺好用的，顺便自己记录一下

首先，定义一个<table>表格

 

        <table id="datatable">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>巡查单ID</th>
                    <th>站点ID</th>
                    <th>站点名称</th>
                    <th>问题描述</th>
<span style="white-space:pre">                    </span><th>状态</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>

 

 

var dtable;//定义datatable的全局变量

//其中 fnInitComplete和sSrollY属性控制datatable刷新时不整个页面刷的效果；

function doSearch() {
    if(dtable!=null){
        dtable.fnClearTable(0);
        dtable.fnDraw(); //重新加载数据
    }else{
    dtable = $("#datatable").dataTable({
        "oLanguage" : { // 汉化
            "sUrl" : "<%=path%>/DataTables/js/dataTables.language.txt"
            },
            "bStateSave" : true,
            "bJQueryUI" : true,
            "bPaginate" : true,// 分页按钮
            "bFilter" : false,// 搜索栏
            "bLengthChange" : true,// 每行显示记录数
            "iDisplayLength" : 10,// 每页显示行数
            "bSort" : false,// 排序
            "bInfo" : true,// Showing 1 to 10 of 23 entries 总记录数没也显示多少等信息
            "bWidth" : true,
            "bScrollCollapse" : true,
            "sPaginationType" : "full_numbers", // 分页，一共两种样式 另一种为two_button // 是datatables默认
            "bProcessing" : true,
            "bServerSide" : true,
            "bDestroy" : true,
            "bSortCellsTop" : true,
            "sAjaxSource" : "<%=path%>/jsp/stat.do?action=statRevampList",
            "sScrollY": "100%",
            "fnInitComplete": function() {
                this.fnAdjustColumnSizing(true);
             },
            "fnServerParams" : function(aoData) {
                aoData.push({
                    "name" : "statId",
                    "value" : encodeURI($("#s_statId").val())
                });
            },
            "aoColumns" : [
                            {"mData" : "statCleanRevampId"},
                            {"mData" : "statCleanId"},
                            {"mData" : "statId"},
                            {"mData" : "statName"},
                            {"mData" : "problemDes"},
                            {"mData" : "revampStatus"} ],
            "aoColumnDefs":[
                            {
                                "sClass":"center",
                                "aTargets":[6],
                                "mData":"statCleanRevampId",
                                "mRender":function(a,b,c,d){//a表示statCleanRevampId对应的值，c表示当前记录行对象
                                    return '<a href=\"javascript:void(0);\" onclick=\"del('+a+')\">删除</a>'
                                + '<a href=\"javascript:void(0);\" onclick=\"editForm('+c.statCleanRevampId+','+c.statCleanId+','
                                +c.revampOrgan+',\''+c.statName+'\',\''+c.problemDes+'\')\">编辑</a>'
                                    + ' <a href=\"javascript:void(0);\" onclick=\"check('+a+',1)\">审核通过</a>'
                                    + ' <a href=\"javascript:void(0);\" onclick=\"check('+a+',2)\">审核不通过</a>';
                                }
                            },//隐藏列Index=0，1，2的三列
                            {
                                "aTargets":[0],
                                "visible":false
                            },
                            {
                                "aTargets":[1],
                                "visible":false
                            },
                            {
                                "aTargets":[2],
                                "visible":false
                            }
                            ],
            "fnRowCallback" : function(nRow, aData, iDisplayIndex) {//相当于对字段格式化
                if (aData["revampStatus"] == 0) {
                    $('td:eq(5)', nRow).html("结束");
                } else if (aData["revampStatus"] == 1) {
                    $('td:eq(5)', nRow).html("进行中");
                } else if (aData["revampStatus"] == 2) {
                    $('td:eq(5)', nRow).html("完成");
                } else if (aData["revampStatus"] == 3) {
                    $('td:eq(5)', nRow).html("驳回");
                }
            },
            "fnServerData" : function(sSource, aoData, fnCallback) {
                $.ajax({
                    "type" : 'get',
                    "url" : sSource,
                    "dataType" : "json",
                    "data" : {
                        aoData : JSON.stringify(aoData)
                    },
                    "success" : function(resp) {
                        fnCallback(resp);
                    }
                });
            }
        });
    }}

 

后台action返回json格式数据，action方法对应如下内容

 

response.setCharacterEncoding("UTF-8");
PrintWriter out = null;
String json = null; // 返回的json数据
try
{
    out = response.getWriter();
}
catch (IOException e)
{
    e.printStackTrace();
}
String statName = null;
String sEcho = "0";// 记录操作的次数  每次加1
String iDisplayStart = "0";// 起始
String iDisplayLength = "10";// size
int count = 0; //查询出来的数量
String aoData = request.getParameter("aoData");
//获取jquery datatable当前配置参数
JSONArray jsonArray = JSONArray.fromObject(aoData);
for (int i = 0; i < jsonArray.size(); i++)
{
    try
    {
        JSONObject jsonObject = (JSONObject)jsonArray.get(i);
        if (jsonObject.get("name").equals("sEcho"))
            sEcho = jsonObject.get("value").toString();
        else if (jsonObject.get("name").equals("iDisplayStart"))
            iDisplayStart = jsonObject.get("value").toString();
        else if (jsonObject.get("name").equals("iDisplayLength"))
            iDisplayLength = jsonObject.get("value").toString();
        else if (jsonObject.get("name").equals("statId"))
            statName = jsonObject.get("value").toString();
    }
    catch (Exception e)
    {
        break;
    }
}

JSONArray jsonArray2 = new JSONArray();
JSONObject jsonObject2 = new JSONObject();

StatCleanService service = new StatCleanService();
//为操作次数加1
int initEcho = Integer.parseInt(sEcho) + 1;
count = service.getStatCleanRevampCount(statName);//总记录数
List statFailList = service.getStatCleanRevampList(Integer.parseInt(iDisplayStart), Integer.parseInt(iDisplayLength), statName);
for (Object object : statFailList)
{
    StatCleanRevampNoticeTable table = (StatCleanRevampNoticeTable)object;
    jsonObject2.put("statCleanRevampId", table.getStatCleanRevampId());
    jsonObject2.put("statCleanId", table.getStatCleanId());
    jsonObject2.put("statId", table.getStatId());
    jsonObject2.put("statName", table.getStatName());
    jsonObject2.put("revampStatus", table.getRevampStatus());
    jsonObject2.put("problemDes", table.getProblemDes());
    jsonArray2.add(jsonObject2);
}

json = "{\"sEcho\":" + initEcho + ",\"iTotalRecords\":" + count + ",\"iTotalDisplayRecords\":" + count + ",\"aaData\":" + jsonArray2.toString() + "}";
//传到页面
out.println(json);
out.close();

其中参数

sEcho,iTotalRecords,iTotalDisplayRecords,aaData名称是固定的，不能修改；

iDisplayStart,iDisplayLength为每次查询的起始记录和长度；

加载页面url链接-->load form-->指向分页的action-->json数据返回给页面
效果图如下：