1、引入datatables.css,datatables.min.js
2、按照官网(http://datatables.club/manual/#orthogonal-data)demo直接copy一个HTML表格
<table id="table_id_example" class="display">
<thead>
<tr>
<th>新闻标题</th>
<th>创建人</th>
<th>创建时间</th>
<th>是否重要</th>
</tr>
</thead>
</table>
$('#table_id_example').DataTable({
serverSide : true,//开启服务端
paging : true,//是否分页
language : lang, //提示信息
processing: true,//是否分页
renderer : "bootstrap",//渲染样式,可以按照需求天就爱
pagingType : "full_numbers", //分页样式:simple,simple_numbers,full,full_numbers
ajax : {
url : '${pageContext.request.contextPath}/test',//请求地址
type : 'POST',
},
/* 绑定 在服务端返回的时候也要使用对应的json数组对应编号 */
columns : [ {
data : 'name'
}, {
data : 'position'
}, {
data : 'salary'
}, {
data : 'office'
} ]
});
3、后台:
@WebServlet("/test")
public class TestAction extends HttpServlet {
NewsBaseServiceImpl newsBaseServiceImpl;
JSONArray jsonArr;
//先准备了100条数据做测试
@Override
public void init() throws ServletException {
jsonArr = new JSONArray();
for (int i = 0; i < 100; i++) {
Map<String, String> map = new HashMap<String, String>();
map.put("name", "这是名字" + i);
map.put("position", "这是position" + i);
map.put("salary", "这是工资" + i);
map.put("office", "这是office" + i);
jsonArr.put(map);
}
}
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
resp.setCharacterEncoding("UTF-8");
resp.setContentType("application/json; charset=utf-8");
// 获取参数
String draw = req.getParameter("draw");
String start = req.getParameter("start");// 开始页
String length = req.getParameter("length");// 每一页的记录条数
// String extra_search = req.getParameter("search");// 查询条件
System.out.println("起始记录:"+start + "数据长度:" + length );
JSONObject json = new JSONObject();
json.put("draw", draw);//这个参数是用来标识当前请求的顺序的,获取就原样返回就好;
json.put("recordsTotal", length);
json.put("recordsFiltered", jsonArr.length());
JSONArray data = new JSONArray();
for (int i = 0; i < Integer.parseInt(length); i++) {
int index = Integer.parseInt(start) + i;//当前页记录索引i
if (index < jsonArr.length()) {
data.put(jsonArr.get(index));
}
}
json.put("data", data);
System.out.println("此次放回数据为:"+data.toString()+"数据库中数据:"+jsonArr.length());
resp.getWriter().write(json.toString());
}
就这么个东西搞了四五个小时,因为以前没接触过datatable,
因为做测试的时候draw没有原样返回一直无法分页,就这个就搞了两个小时,一定记住;接下来做查询