首先得先引入对应的js
1、jquery.min.js 首先导入
2、 File: jquery.dataTables.min.js
Version: 1.9.4 这是我使用的版本
这是 jsp 页面
关键的table 代码
<table id="fuck" class="table table-bordered data-table">
<thead>
<tr>
<span style="white-space:pre"> </span> <th>姓名</th>
<span style="white-space:pre"> </span> <th>账号</th>
<span style="white-space:pre"> </span> <th>登录时间</th>
<span style="white-space:pre"> </span></tr>
</thead>
<tbody>
</tbody>
</table>
必须保证 thead tbody 存在
接着是 对 这个table 自己写的 js 文件
这里我贴出关键代码
$("#fuck").dataTable({
"oLanguage" : { // 汉化
"sProcessing" : "正在加载数据...",
"sLengthMenu" : "显示_MENU_条 ",
"sZeroRecords" : "没有您要搜索的内容",
"sInfo" : "从_START_ 到 _END_ 条记录——总记录数为 _TOTAL_ 条",
"sInfoEmpty" : "记录数为0",
"sInfoFiltered" : "(全部记录数 _MAX_ 条)",
"sInfoPostFix" : "",
"sSearch" : "搜索",
"sUrl" : "",
"oPaginate" : {
"sFirst" : "第一页",
"sPrevious" : " 上一页 ",
"sNext" : " 下一页 ",
"sLast" : " 最后一页 "
}
},
"bJQueryUI": true,
"bPaginate" : true,// 分页按钮
"bFilter" : true,// 搜索栏
"bLengthChange" : true,// 每行显示记录数
"iDisplayLength" : 10,// 每页显示行数
"bSort" : false,// 排序
//"aLengthMenu": [[50,100,500,1000,10000], [50,100,500,1000,10000]],//定义每页显示数据数量
//"iScrollLoadGap":400,//用于指定当DataTable设置为滚动时，最多可以一屏显示多少条数据
//"aaSorting": [[4, "desc"]],
"bInfo" : true,// Showing 1 to 10 of 23 entries 总记录数没也显示多少等信息
"bWidth":true,
//"sScrollY": "62%",
//"sScrollX": "210%",
"bScrollCollapse": true,
"sPaginationType" : "full_numbers", // 分页，一共两种样式 另一种为two_button // 是datatables默认
"bProcessing" : true,
"bServerSide" : true,
"bDestroy": true,
"bSortCellsTop": true,
"sAjaxSource": '/getInfo.action',
"aoColumns":
[
{ "mData": "id", 'sClass':'left'},
{ "mData": "name", 'sClass':'center'},
{ "mData": "account",'sClass':'left'},
{ "mData": "logintime", 'sClass':'left'}
/*
{ "mData": "password",'sClass':'left',"mRender":function(data,type,full){
return "<button type='button' onclick=fuck11("+data+")>"+data+"</button>"
}
}
*/
],
"fnServerData" : function(sSource, aoData, fnCallback) {
$.ajax({
"type" : 'post',
"url" : sSource,
"dataType" : "json",
"data" : {
aoData : JSON.stringify(aoData)
},
"success" : function(resp) {
fnCallback(resp);
}
});
}
});
经过以上配置以后 服务器端接收的到的字符串可以转换成JSONArray 然后在服务器端获取关键的参数来分页
这是struts2的关键代码
public String list() {
String sEcho = "";// 记录操作的次数 每次加1
String iDisplayStart = "";// 起始
String iDisplayLength = "";// size
String sSearch = "";// 搜索的关键字
int count = 0 ; //查询出来的数量
JSONArray ja = (JSONArray) JSONArray.parse(aoData);
//分别为关键的参数赋值
for (int i = 0; i < ja.size(); i++) {
JSONObject obj = (JSONObject) ja.get(i);
if (obj.get("name").equals("sEcho"))
sEcho = obj.get("value").toString();
if (obj.get("name").equals("iDisplayStart"))
iDisplayStart = obj.get("value").toString();
if (obj.get("name").equals("iDisplayLength"))
iDisplayLength = obj.get("value").toString();
if (obj.get("name").equals("sSearch"))
sSearch = obj.get("value").toString();
}
//为操作次数加1
int initEcho = Integer.parseInt(sEcho)+1;
count = managerService.findManagerToPageCount(Integer
.parseInt(iDisplayStart), Integer.parseInt(iDisplayLength),sSearch);
List<Manager> managers = managerService.findManagerToPage(Integer
.parseInt(iDisplayStart), Integer.parseInt(iDisplayLength),sSearch);
dataMap.put("iTotalRecords", count);
dataMap.put("sEcho",initEcho);
dataMap.put("iTotalDisplayRecords", count);
dataMap.put("aaData", managers);
return SUCCESS;
}
然后记得 返回的 json船一定要符合格式 不然table是无法显示的
Jquery的DataTable插件 AJAX 服务器分页的的学习心得（java版）
时间： 2024-08-04 10:10:55