jQuery表格插件DataTables 的服務(wù)器端參數(shù)解析工具
分頁，即時搜索和排序
幾乎支持任何數(shù)據(jù)源：DOM， javascript， Ajax 和 服務(wù)器處理
支持不同主題 DataTables, jQuery UI, Bootstrap, Foundation
各式各樣的擴(kuò)展: Editor, TableTools, FixedColumns ……
豐富多樣的option和強(qiáng)大的API
支持國際化
DataTables 插件的使用 點擊
需要開啟服務(wù)器模式
使用方式
可以使用spring mvc 注解方式 或者 使用DataTableUtils 工具解析參數(shù)
使用spring mvc 注解方式需要 配置 注解的解析類
<mvc:annotation-driven>
<mvc:argument-resolvers>
<bean class="cc.yihy.utils.DataTableResolver"/>
</mvc:argument-resolvers>
</mvc:annotation-driven>
簡單使用示例
頁面
$('#sample-table-2').dataTable( {
bAutoWidth : false, //自動調(diào)整列寬
serverSide : true, //開啟服務(wù)器模式
ordering : false, //排序
dom: 'lrtip', //搜索框、分頁條、每頁條數(shù)、總條數(shù)信息設(shè)置
language : {
processing : "正在加載數(shù)據(jù)！" //ajax加載數(shù)據(jù)時顯示中文
},
ajax : {
//服務(wù)器模式請求url，會帶上分頁、排序等信息
url : "${pageContext.request.contextPath}/user/list.html",
type : "POST",
//data : function(d) {
// //添加額外的參數(shù)傳給服務(wù)器
// d.extra_search = {
// begin_time : $("#starttime").val(),
// end_time : $("#endtime").val()
// }
//}
},
//每列值對應(yīng)Bean生成的Json的字段
columns : [
{data : "id"},
{data : "acctNo"},
{data : "name"},
{data : "contactMobile"},
{data : "roleType"},
{data : "creatDate"},
{data : "lastDate"},
{data : "status"},
{data : "id"},
],
//對指定列顯示內(nèi)容做優(yōu)化
columnDefs : [
{
targets : [ 0 ],
data : "id",
render : function(data, type, full) {
return "<label><input name='form-field-radio' type='radio' class='ace' value="+data+" /><span class='lbl'></span> </label>";
}
}
]
} );
后臺
/**
* 使用spring mvc 處理Datatable的參數(shù) 使用注解
* @param tableRequest DataTable 請求參數(shù)
* @return
* @throws Exception
*/
@RequestMapping("list")
@ResponseBody
public DataTableResponse<User> getData(@DataTableParam DataTableRequest tableRequest) throws Exception{
//對請求參數(shù)解析，生成 排序條件、列搜索對象、全局搜索對象
ResultObj<User> resultObj = tableRequest.getResultObj(User.class);
//dataTable 相應(yīng)參數(shù) 會被處理成json
DataTableResponse<User> user= new DataTableResponse<User>();
//查詢數(shù)據(jù) 略
return user;
}
@RequestMapping("list1")
@ResponseBody
public DataTableResponse<User> getList(HttpServletRequest request) throws Exception{
//不使用注解
DataTableRequest param = DataTableUtils.getParam(request);
//對請求參數(shù)解析，生成 排序條件、列搜索對象、全局搜索對象
ResultObj<User> resultObj = param.getResultObj(User.class);
//dataTable 相應(yīng)參數(shù) 會被處理成json
DataTableResponse<User> user= new DataTableResponse<User>();
//查詢數(shù)據(jù) 略
return user;
}
如果使用了 mybatis，搭配使用 PageHelper插件 配合我這個datatable插件是很方便的
代碼也比較簡單 實現(xiàn)請看里面代碼
DataTables 參數(shù)解析插件
