easyui 分頁實現

標籤：分頁   datagrid   控制項   

1、用datagrid 做分頁顯示， 根據API例子，終於解決，廢話不說，datagrid分頁 有一個附加的分頁控制項 通過在datagrid中設定pagination:true 就會顯示分頁 當請求是 後台會通過 擷取page 擷取當前頁 根據rows每頁顯示條數

返回格式 {"total":486,"rows":[{"age":10,"email":"[email protected]","id":1,"name":"張三","sex":"男"}]}

total 總條數不能改 rows 資料 查詢出來的list

2、資料庫資料

3、看效果

4、html代碼

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><link rel="stylesheet" type="text/css" href="css/themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="css/demo.css"><link rel="stylesheet" type="text/css" href="css/themes/icon.css"><script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript" src="js/jquery.easyui.min.js"></script><script type="text/javascript" src="js/easyui-lang-zh_CN.js"></script></head><body> <table id="dg" class="easyui-datagrid" style="width:100%;"></table> <script type="text/javascript">    $('#dg').datagrid({        url:'http://localhost:8080/easyui/TestData',//資料請求地址       toolbar:'#toolbar',// 資料格工具列 比如添加 修改       pagination:true,//分頁顯示       fitColumns:true,//自動適應寬度       autoRowHeight:true,//自動行高度       loadMsg:'正在載入資料請稍後...',       nowrap:true,//設定為true 有利於提高效能       idField:'id',//欄位標識       rownumbers:true,//顯示行號       singleSelect:true,//只允許選擇一行       //pageNumber:1,//初始化頁面數量       pageSize:20,//初始化顯示條數       pageList:[20,40,60],//分頁列表        columns:[[            {field:'id',title:'id',width:100},            {field:'name',title:'name',width:100},            {field:'email',title:'email',width:100,align:'center'}        ]]    });       /*   這裡多多兩句通過如下參數可擷取一些分頁資料   var opts=$('#dg').datagrid('options');   //擷取當前頁      var page_Number = opts.pageNumber;   //pageNumber為datagrid的當前頁碼          //擷取每頁顯示的條數      var page_Size = opts.pageSize;          */    </script>   </body></html>

5、servlet類 

import java.io.IOException;import java.io.Writer;import java.util.HashMap;import java.util.List;import java.util.Map;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import net.sf.json.JSONArray;import net.sf.json.JSONObject;/** * Servlet implementation class TestData */public class TestData extends HttpServlet {private static final long serialVersionUID = 1L;/** * @see HttpServlet#HttpServlet() */public TestData() {super();// TODO Auto-generated constructor stub}/** * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse *      response) */protected void doGet(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException {// TODO Auto-generated method stubdoPost(request, response);}/** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse *      response) */protected void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException {response.setContentType("application/json");response.setCharacterEncoding("UTF-8");response.setHeader("Cache-Control", "no-cache");// 擷取前台頁數int page = Integer.parseInt(request.getParameter("page"));// 擷取前台每頁顯示條數int row = Integer.parseInt(request.getParameter("rows"));List<Userinfo> list = JDBCUtil.query(page, row);Map<String, Object> jsonMap = new HashMap<String, Object>();// 定義mapjsonMap.put("total", JDBCUtil.queryCount());// total鍵 存放總記錄數，必須的jsonMap.put("rows", list);// rows鍵 存放每頁記錄 list// 格式化result 一定要是JSONObjectString result = JSONObject.fromObject(jsonMap).toString();System.out.println(result);Writer out = response.getWriter();out.write(result);}}

 源碼：http://download.csdn.net/download/itlqi/8868529

著作權聲明：本文為博主原創文章，未經博主允許不得轉載。

easyui 分頁實現