JQuery DataTables JS + Spring MVC 动态分页使用例子。
我在网上找到的关于 JQuery DataTables JS 插件动态分页的例子比较少，我正好也用到了这个功能，希望对大家有帮助。
写的不好，多指点。
上代码
<link href="<%=basePath%>common/plugins/datatables/dataTables.bootstrap.css" rel="stylesheet" type="text/css" />
<script src="<%=basePath%>common/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="<%=basePath%>common/plugins/datatables/jquery.dataTables.js" type="text/javascript"></script>
<script src="<%=basePath%>common/plugins/datatables/dataTables.bootstrap.js" type="text/javascript"></script>
$(function () {
$("#example2").dataTable({
"bLengthChange": false,
"bFilter": false,
"bSort": false,
"bInfo": true,
"bProcessing": true, // 加载条
"iDisplayLength": 10,
"bProcessing": false, // 是否显示取数据时的那个等待提示
"bServerSide": true,//这个用来指明是通过服务端来取数据
"sAjaxSource": <%=basePath%>admin/pushmessages/msglist",//这个是请求的地址
"fnServerData": retrieveData, // 获取数据的处理函数
"oLanguage": {
"sProcessing": "正在加载中......",
"sLengthMenu": "每页显示 _MENU_ 条记录",
"sZeroRecords": "对不起，查询不到相关数据！",
"sEmptyTable": "表中无数据存在！",
"sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",
"sInfoFiltered": "数据表中共为 _MAX_ 条记录",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "上一页",
"sNext": "下一页",
"sLast": "末页",
},
},
});
});
// 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) {
}
});
}
<div class="box-body">
<table id="msgtable" class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th>标题</th>
<th>内容</th>
<th>推送时间</th>
<th>推送方式</th>
<th>推送者</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
以上就是前台部分
Spring Action
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
@RequestMapping(value = "/msglist", method = RequestMethod.POST)
@ResponseBody
public String msgList(@RequestParam String aoData,HttpServletRequest request) {
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");
}
Integer conut = pushMessagesService.count(" 1=:id ", 1);
JSONObject getObj = new JSONObject();
getObj.put("sEcho", sEcho);// 不知道这个值有什么用,有知道的请告知一下
getObj.put("iTotalRecords", conut);//实际的行数
getObj.put("iTotalDisplayRecords", conut);//显示的行数,这个要和上面写的一样
getObj.put("aaData", pushMessagesService.getPMsgListTable(iDisplayStart, iDisplayLength));//要以JSON格式返回
return getObj.toString();
}
service
public List<String[]> getPMsgListTable(Integer pageIndex, Integer pageSize ){
List<PushMessages> list = pushMessagesDao.getUserListTable(pageIndex, pageSize);
ArrayList<String[]> lists = new ArrayList<String[]>();
for (int i = 0; i < list.size(); i++) {
lists.add(list.get(i).toStringArray());
}
return lists;
}
bean
@Entity
@Table
public class PushMessages implements Serializable{
private static final long serialVersionUID = -7569928120760123739L;
private Integer id;
private String title; // 标题
private String content; // 内容 72个字
private Integer type; // 0:所以平台 ,1:ios,2:android
private String sendtime;
private Integer user_id;
private String user_name;
getr setr ....
public String[] toStringArray() {
//<button class="btn btn-block btn-primary disabled btn-sm">支付宝</button>
StringBuffer button = new StringBuffer("<button class='btn disabled btn-sm ");
if (type == 0)
button.append("btn-primary'>全平台");
if (type == 1)
button.append("btn-warning'>IOS");
if (type == 2)
button.append("btn-success'>Android");
button.append("</button>");
String [] str ={title,content,sendtime,button.toString(),user_name};
return str;
}
}
返回到 jquery datatables 的数据格式 是一个 String [] 数组, 所以我在 这个 bean 里面写了一个 toStringArray() 方法 拼接成 String 数组 同时也把 html 代码拼接在 里面
可以用firedub 看下数据返回的格式。
还有一点，html 有多少列 返回的数据 也要有多少列。
希望各位大神指点。