DataTable 服务器端动态分页

原始的dataTable显示表单：一次性查找所需的所有数据（但对于若查找的数据有上万条效率太低）

所以用服务器端动态分页：一次访问几条，多次访问后台数据

（1）在js中初始化表单

     oTable = initAsyncPagingDT(tableObj, url, cols, colDefs);

/**

 * 初始化普通表格

 * @param tableObj table对象

 * @param url 请求地址

 * @param cols 列

 * @param colDefs 列设置

 * @param fixedColumns 锁定列

 * @param sScrollX 横向滚动条

 * @param bServerSide 服务器模式

 */


   var initAsyncPagingDT =function(tableObj, url, cols, colDefs, fixedColumns, sScrollX, rows) {

    var oTable = tableObj.DataTable({

        "sDom": "Tflt<'row DTTTFooter'<'col-sm-6'i><'col-sm-6'p>>",

        "iDisplayLength": rows || 10,

        "oTableTools": {

            "aButtons": [ ]

        },

        "deferRender": true,

        "language": {

            "search": "",

            "sLengthMenu": "_MENU_",

            "info": "显示 _START_ 到 _END_ 条记录 ( 总共 _TOTAL_ 条 )",

            "oPaginate": {

                "sPrevious":
"上一页",

                "sNext":
"下一页"

            },

            "sInfoEmpty":
"没有数据",

            "sProcessing": "正在加载数据...",

            "sInfoFiltered": "(从 _MAX_ 条数据中检索)",

        },

        "sScrollX": sScrollX ||
"",

        "bDestroy": true,

        "bProcessing":
true,

        "bServerSide":
true, //[b]开启服务器分页模式

        "sAjaxSource": url,

        "autoWidth": false,

        "aoColumns": cols,

        "aoColumnDefs": colDefs,    //列的设置

        "aaSorting": [ ],

        "fixedColumns": fixedColumns ||
null,

        "fnServerData" : returnData

        

    });

    return oTable;

};

/**

 * 处理服务器端分页返回数据

 * @param sSource 查询地址

 * @param aDataSet    

 * @param fnCallback 回调函数

 */
function returnData(sSource, aDataSet, fnCallback) {

    $.ajax({  

        "dataType" : 'json',

        "contentType": "application/json; charset=utf-8",

        "type" : "get",  

        "url" : sSource,  

        "data" :{

            "pagingDa
4000
ta": JSON.stringify(aDataSet)//这个是把datatable的一些基本数据传给后台,比如起始位置,每页显示的行数

        },  

        "success" : function(resp){  

            fnCallback(resp);  

        }  

    });  

}  
[/b]

[b]（2）在后台获取参数 String  pagingData //它是以json字符串的形式[/b]

protected Map<String, Object> swapParam(String pagingData){
Map<String, Object> params = new HashMap<String, Object>();
if(!StringUtil.isEmpty(pagingData)){
JSONObject jsonObject = JSONObject.fromObject(pagingData);
int iDisplayStart = (Integer) jsonObject.get("iDisplayStart");
int iDisplayLength = (Integer) jsonObject.get("iDisplayLength");
int sEcho = (Integer) jsonObject.get("sEcho");

params.put("sEcho", sEcho);
params.put("start", iDisplayStart);
params.put("length", iDisplayLength);
}
return params;
}

//start 和length是SQL语句查找所需要的：从start条开始，查找length条





[b]在Mapper 中的sql查找语句：需要2个[/b]

[b]1.所需查找的总的个数  number接收
[/b]

<select id="queryContentCount" resultType="java.lang.Integer" >
select
count(*)
from t_bus_content
</select>

[b]2.所需查找列表信息（10条rows参数设置的）
list接收
[/b]

<select id="queryContentByParam" resultType="java.util.HashMap" parameterType="java.util.HashMap">
select
id, uuid, title
from t_bus_content
order by pubtime desc
<if test="start !=null and length != null ">
limit #{start} , #{length}
</if>
</select>

[b]（2）后台返回的参数信息[/b]

resultMap.put("sEcho", paramMap.get("sEcho"));

resultMap.put("iTotalRecords", number);

resultMap.put("iTotalDisplayRecords", number);

resultMap.put("aaData", list);

return return convertToJsonData(resultMap);

//将resultMap转为json字符串形式

/**
* list转为json字符串
* @param list
* @return
*/
protected String convertToJsonData(Object list) {
try {
ObjectMapper mapper = new ObjectMapper();
// mapper.setDateFormat(new
// SimpleDateFormat(DateTime.DATE_FORMAT_DATEONLY));
String liststr = mapper.writeValueAsString(list);
return liststr;
} catch (JsonProcessingException jsone) {
throw new RuntimeException(jsone);
}
}

[b]分页时外加参数的传递[/b]

[b][b]在 initAsyncPagingDT 中加 "fnServerParams": serOtherParams || null[/b][/b]

[b][b][b]   var
initAsyncPagingDT =function(tableObj, url, cols, colDefs, fixedColumns, sScrollX, rows，[b][b][b]serOtherParams
[/b][/b]) [/b]
[/b][/b][/b]

[b][/b]function serOtherParams(aoData) {
aoData.push(
{
"name": "cpyUUID",
"value": $('#ratio_cpyUUID').val()
},{
"name": "compUUID",
"value": $('#ratio_compUUID').val()
}
);
}
[b]在后台获取参数 String  pagingData 中有[b][b][/b][/b][/b]

"cpyUUID" 和 "compUUID"

[b]     
[/b]

[b] 
[/b]



[b]   
[/b]