datatables后台分页处理

最新推荐文章于 2021-07-20 10:56:02 发布

夜闻枫林语

最新推荐文章于 2021-07-20 10:56:02 发布

阅读量488

点赞数

分类专栏：前端框架文章标签： datatable

本文链接：https://blog.csdn.net/qq_38742043/article/details/80086920

版权

前端框架专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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没有原样返回一直无法分页，就这个就搞了两个小时，一定记住；接下来做查询