本次分頁涉及技術點 SSM+PageHelper+DatagrId

先來看下效果：

這是無條件分頁，下一篇部落格我們將講有條件分頁。

無論你是使用js載入table 還是直接使用標籤。

使用datagrid分頁都離不開一個屬性：pagination

1、若使用js載入資料，pagination 屬性設定為'true' 即可在DataGrid控制元件底部顯示分頁工具欄。

1  $(function(){
2         $('#tt').datagrid( {
3             rownumbers : true,//顯示行號
4             checkOnSelect:true,//使行只有在複選框選中時，才是真正的選中
 
5             fitColumns:true,//讓表格列寬，強行自適應到整合頁面寬度
6             pageList: [1,2,3],//選擇一頁顯示多少資料
7             pagination : true,//在DataGrid控制元件底部顯示分頁工具欄。
8         });
9     });

2、 若使用標籤載入，同樣pagination 屬性設定為'true' 即可。

3、使用DataGrid控制元件 分頁之前 ，我們先了解下它的分頁原理。如圖，可以看到它實際上是根據page（當前在第幾頁）,rows（一頁顯示多少條資料） 進行分頁。

瞭解了他的原理，分頁也就很簡單了。

4、service 實現類，這個很簡單，只是做了一個查詢全部的操作

5、controller層，我們利用PageHelper 來幫助我們實現分頁。

controller層程式碼：

 1 /**
 2      * 查詢全部取派標準表
 3      * @return
 4      */
 5     @RequestMapping("StandardAll")
 6     @ResponseBody
 7     public Object StandardAll(Integer page,Integer rows)
 8     {
 
 9 
10 
11         Page<Standard> pageInfo = PageHelper.startPage(page, rows);
12         /*獲得所有取派資訊*/
13         List<Standard> list = standardService.SelAll();
14         /*獲取總記錄條數，將結果響應給瀏覽器 json格式*/
15         long total = pageInfo.getTotal();
16         /*封裝在map中*/
17         Map<String,Object> map=new HashMap<String,Object>();
18         /*前面我們知道，pagination 分頁是根據rows,pages,所以只需根據map 鍵值對的特點來找到rows*/
19         map.put("rows",list);
20         map.put("total",total);
21         return JSON.toJSON(map);
22     }

6、考慮到有些小夥伴可能需要，頁面程式碼也一併發出來吧。

 1 <table id="tt" class="easyui-datagrid" id="tt" class="easyui-datagrid"
 2            striped="true"
 3            url="/jsp/Standard/StandardAll"
 4            toolbar="#tb"
 5            pagination="true"
 6            pageList="[1,2,3]">
 7         <thead>
 8         <tr>
 9             <th field="id" width="120" align="center" checkbox="true">編號</th>
10             <th field="name" width="120" align="center">收派名稱</th>
11             <th field="minweight" width="120" align="center">最小重量</th>
12             <th field="maxweight" width="120" align="center">最大重量</th>
13             <th field="user_id" width="120" align="center">操作人</th>
14             <th field="updatetime" width="150" align="center">操作時間</th>
15         </tr>
16         </thead>
17     </table>

至此，分頁就結束了，需要有條件分頁請看下一篇部落格吧。喜歡博主的就推薦，關注，收藏 三連吧。