1、使用 easyUI datagrid 完成前臺分頁展示

  <table   id="dg" title="產品管理" style="width:700px;height:550px">
        <thead>
            <tr>
               <th data-options="field:'id',hidden:true">id</th>  
	                <th data-options="field:'chanPinBianMa'">編碼</th>  
	                <th data-options="field:'chanPinMingCheng'">名稱</th>  
	                <th data-options="field:'danWeiMingChen',align:'center'">單位</th> 
	                <th data-options="field:'chanPinYouXiao',align:'center',formatter:rovformater">狀態</th>  
	             
	                <th data-options="field:'shangYi',align:'center',formatter:syformater">上移</th>
	                <th data-options="field:'xiaYi',align:'center',formatter:xyformater">下移</th>
	                <th data-options="field:'chanPinPaiXu',align:'center'">序號</th>
            </tr>
        </thead>
    </table>
 
 

使用 js將 table 轉換為datagrid ,並增加分頁功能

$(function(){
            var dg = $('#dg').datagrid({
                url: '../hou_tai/getAllChanPin.do',//後臺返回資料的請求url
                pagination: true,//是否使用分頁功能
                singleSelect:true//每次只能選中1行
               
            });
            
            
            var p = $('#dg').datagrid('getPager'); //獲取page物件
    $(p).pagination({ 
          pageSize: 10,//每頁顯示的記錄條數，預設為10 
          pageList: [10,20,30],//可以設定每頁記錄條數的列表 
          beforePageText: '第',//頁數文字框前顯示的文字 
          afterPageText: '頁    共 {pages} 頁',  //pages為預設的引數嗎，代表總頁數
          displayMsg: '當前顯示 {from} - {to} 條記錄   共 {total} 條記錄'// from，to , total均為預設引數名，from, to 代表現在是總記錄中的第幾條到第幾條，tatal代表總記錄數
             }); 
            
          
        });
 

2、後臺返回資料，資料格式必須為json格式，

controller中的程式碼

@RequestMapping(value = "hou_tai/getAllChanPin.do", produces = "application/json;charset=utf-8")
@ResponseBody
public String getAllChanPin(HttpServletRequest request) {
logger.info("進入獲取所有產品操作");

Map<String, String> map = new HashMap<String, String>();


String dang_qian_ye_ma = request.getParameter("page");//page 為easyui分頁外掛預設傳到後臺的引數，代表當前的頁碼，起始頁為1
String mei_ye_ji_lu_shu = request.getParameter("rows");//rows為為easyui分頁外掛預設傳到後臺的引數，代表當前設定的每頁顯示的記錄條數


map.put("dang_qian_ye_ma", dang_qian_ye_ma);
map.put("mei_ye_ji_lu_shu", mei_ye_ji_lu_shu);


List<ChanPin> list = chanpinService.getAllChanPin(map);//呼叫service方法，獲取產品記錄
         PageInfo pageInfo = new PageInfo(list);
        long total = pageInfo.getTotal(); //獲取總記錄數
   

Map<String, Object> jsonMap = new HashMap<String, Object>();//定義map  
    
                  jsonMap.put("total", total);//total 存放總記錄數
                 jsonMap.put("rows", list);//rows存放每頁記錄 ，這裡的兩個引數名是固定的，必須為 total和 rows
  
Gson gson = new Gson();
String json = gson.toJson(jsonMap);


logger.info("獲取所有產品操作結束");
return json;
}
 

/** 獲取產品操作 */
public List<ChanPin> getAllChanPin(Map<String,String> map) {
try{


PageHelper.startPage(Integer.parseInt(map.get("dang_qian_ye_ma")),Integer.parseInt( map.get("mei_ye_ji_lu_shu")));//這裡加上這樣一句，則下面的資料庫查詢自動將查詢的結果限制在 頁碼和記錄條數的範圍內，是自動和下面的查詢匹配的。雖然返回的list具體資料限制了，但是PageHelper還是可以通過這個list物件獲取記錄的總條數，在controller的方法裡就是通過 list物件獲取到總的資料長度
List<ChanPin> test=chanpinMapper.getAllChanPin(map);

return test;
}catch(DataAccessException e){
e.printStackTrace();
logger.error( "獲取所有產品失敗:" + e.getMessage());
return null;
}
}