spring mvc + Jquery Data Table使用记录

</pre></p><p>前言：做项目时需要用到表格插件，主要需要功能-查询、排序、分页、自适应，最最最重要当时是要美观。</p><p></p><p>选择：之前用过Jqgrid感觉外观一般，后来用了一个买回来的bootstrap框架KingAdmin里面有集成Jquery datatable和jqgrid，由于美观原因，想去研究一下Jquery datatable。</p><p>使用：有官网，但感觉介绍得不是很充足，于是上网看别人的参考，总结如下：</p><p>1、引入css和js，由于框架有集成，我就不需要重新引用，但这里还是贴出来：</p><p>      参考官方地址：http://datatables.club/manual/install.html</p><p>2、由于本次需要从后查询，因此js和后台代码很重要，贴出来：</p><p>js如下：</p><pre name="code" class="javascript">$(document).ready(function() {
var fvTable;
fvTable = $("#featured-datatable").dataTable({
"bProcessing": true, // 是否显示取数据时的那个等待提示
"bServerSide": true,//这个用来指明是通过服务端来取数据
"sAjaxSource": "${pageContext.request.contextPath}/cus/contentListJson.do",//这个是请求的地址
"fnServerData": retrieveData, // 获取数据的处理函数
"sScrollY": "100%",
"fnInitComplete": function() {
this.fnAdjustColumnSizing(true);
},
"aoColumnDefs": [
{ "sWidth": "20px",
"aTargets": [0]},
{
"sWidth": "45%",
"aTargets": [1]},
{
"sWidth": "45%",
"aTargets": [2]}
],
"oLanguage": {
"sProcessing": "正在加载中......",
"sLengthMenu": "每页显示 _MENU_ 条记录",
"sZeroRecords": "对不起，查询不到相关数据！",
"sEmptyTable": "表中无数据存在！",
"sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",
"sInfoFiltered": "数据表中共为 _MAX_ 条记录",
"sSearch": "搜索",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "上一页",
"sNext": "下一页",
"sLast": "末页"
}
}
});
$(window).resize(function () {
fvTable.fnAdjustColumnSizing();
});
});
// 3个参数的名字可以随便命名,但必须是3个参数,少一个都不行
function retrieveData( sSource,aoData, fnCallback) {
$.ajax({
url : sSource,//这个就是请求地址对应sAjaxSource
data : {"aoData":JSON.stringify(aoData)},//这个是把datatable的一些基本数据传给后台,比如起始位置,每页显示的行数
type : 'post',
dataType : 'json',
async : false,
success : function(result) {
fnCallback(result);//把返回的数据传给这个方法就可以了,datatable会自动绑定数据的
},
error : function(msg) {
}
});
}

java如下：

@RequestMapping(value={"/cus/contentListJson.do"})
@ResponseBody
public String showContentListJson(@RequestParam String aoData){
JSONArray jsonarray = JSONArray.fromObject(aoData);

String sEcho = null;
int iDisplayStart = 0; // 起始索引
int iDisplayLength = 0; // 每页显示的行数

for (int i = 0; i < jsonarray.size(); i++) {
JSONObject obj = (JSONObject) jsonarray.get(i);
if (obj.get("name").equals("sEcho"))
sEcho = obj.get("value").toString();

if (obj.get("name").equals("iDisplayStart"))
iDisplayStart = obj.getInt("value");

if (obj.get("name").equals("iDisplayLength"))
iDisplayLength = obj.getInt("value");
}

// 生成20条测试数据
List<String[]> lst = new ArrayList<String[]>();
for (int i = 0; i < 20; i++) {
String[] d = {""+i, "co1_data" + i, "col2_data" + i };
lst.add(d);
}

JSONObject getObj = new JSONObject();
getObj.put("sEcho", sEcho);// 不知道这个值有什么用,有知道的请告知一下
getObj.put("iTotalRecords", lst.size());//实际的行数
getObj.put("iTotalDisplayRecords", lst.size());//显示的行数,这个要和上面写的一样
if(iDisplayLength>lst.size()){
iDisplayLength = lst.size();
}
getObj.put("aaData", lst.subList(iDisplayStart,iDisplayStart + iDisplayLength));//要以JSON格式返回
return getObj.toString();
}

3、可以正常显示数据，但有个key point，就是表格中插入checkbox，Jquery datatable竟然没有集成，需要重写js代码。

结论：感觉比较麻烦，最后还是使用jqgrid。

最后：可能我研究不够透彻，有大神用得好的，请赐教！

贴上截图：真心好看