easyUI前端分页与后台分页总结

浅浅的花香味﹌ 2022-06-10 11:29 310阅读 0赞

分页往往是依附于数据表格的，所以我们就使用的是easyui的datagrid组件，来开启pagination分页组件，为了方便，我们使用[js][]实现。

#        表格显示初始化 #

**\[html\]**  [view plain][]   [copy][view plain]

[print][view plain] [?][view plain]

1.  **<****table** id="dg"**>****</****table****>**

**\[javascript\]**  [view plain][]   [copy][view plain]

[print][view plain] [?][view plain]

1.  <script>  
2.      $('\#dg').datagrid(\{  
3.          title: '学生信息查询结果',       //表格标题  
4.          width:500,            //表格宽度  
5.          pagination: **true**,     //开启分页  
6.          pageSize: 10,         //分页大小  
7.          pageNumber:1,         //第几页显示（默认第一页，可以省略）  
8.          pageList: \[10, 20, 30\], //设置每页记录条数的列表   
9.          //url: '/FreshStudentMaintain/test',  //获取数据地址  
10.         columns: \[\[                //添加列  
11.             \{  
12.                 field: 'OrganizationID',  //绑定数据源ID  
13.                 title: '专业代码',        //显示列名称  
14.             \},  
15.             \{  
16.                 field: 'OrganizationName',  
17.                 title: '专业名称',  
18.             \},  
19.         \]\],  
20.     \});  
21. </script>

我们还可以手动设置分页控件的显示样式，例如：

**\[javascript\]**  [view plain][]   [copy][view plain]

[print][view plain] [?][view plain]

1.  **var** p = $('\#dg').datagrid('getPager');  
2.  $(p).pagination(\{  
3.      beforePageText: '第',//页数文本框前显示的汉字   
4.      afterPageText: '页    共 \{pages\} 页',  
5.      displayMsg: '第\{from\}到\{to\}条，共\{total\}条',  
6.  \});

原版显示效果如下：

![20160814111950542][]  
如上图所示，数据表格和分页已经显示出来了。

#        假分页实现 #

假分页就是将所有要显示的数据全部查询出来后，进行前台的分页，适合数据量较小的Web项目。

实现代码：

**\[javascript\]**  [view plain][]   [copy][view plain]

[print][view plain] [?][view plain]

1.  <script>         
2.      $('\#dg').datagrid(\{ loadFilter: pagerFilter \}).datagrid(\{  
3.              url: '/FreshStudentMaintain/test'     //加载数据  
4.          \});  
5.    
6.  // 分页数据的操作  
7.      **function** pagerFilter(data) \{  
8.          **if** (**typeof** data.length == 'number' && **typeof** data.splice == 'function') \{   // is array  
9.              data = \{  
10.                 total: data.length,  
11.                 rows: data  
12.             \}  
13.         \}  
14.         **var** dg = $(**this**);  
15.         **var** opts = dg.datagrid('options');  
16.         **var** pager = dg.datagrid('getPager');  
17.         pager.pagination(\{  
18.             onSelectPage: **function** (pageNum, pageSize) \{  
19.                 opts.pageNumber = pageNum;  
20.                 opts.pageSize = pageSize;  
21.                 pager.pagination('refresh', \{  
22.                     pageNumber: pageNum,  
23.                     pageSize: pageSize  
24.                 \});  
25.                 dg.datagrid('loadData', data);  
26.             \}  
27.         \});  
28.         **if** (!data.originalRows) \{  
29.             data.originalRows = (data.rows);  
30.         \}  
31.         **var** start = (opts.pageNumber - 1) \* parseInt(opts.pageSize);  
32.         **var** end = start + parseInt(opts.pageSize);  
33.         data.rows = (data.originalRows.slice(start, end));  
34.         **return** data;  
35.     \}  
36. </script>

后台代码仅仅是将从数据库里查询到的数据转化未Json字符串类型传到前台就可以了。例：

**\[csharp\]**  [view plain][]   [copy][view plain]

[print][view plain] [?][view plain]

1.  **public** ActionResult test()  
2.          \{  
3.              IBasicOrganizationBll CollegeBll = SpringHelper.GetObject<IBasicOrganizationBll>("BasicOrganizationBll");  
4.              List<OrganizationViewModel> college = CollegeBll.QueryCollege();//查询后台数据方法  
5.    
6.              **return** Json(college, JsonRequestBehavior.AllowGet);  
7.    
8.          \}

显示效果：

![20160814112912452][]

#        真分页 #

真分页相对假分页来说麻烦了一些，但是对于数据量大的系统来说，可以很好的，快速的查询数据。要想实现分页，我们就得先知道分页的原理，首先我们需要将\[第几页\](pageIndex)和\[一页多少数据\](pageSize)传递给后台，以便查询，EasyUI非常方便的给我们提供了自动将这两个参数传到后台的事件，当我们刚开始加载数据的时候，我们可以看到如图，

![20160814113535747][]

当我选择每页显示10条数据的时候。

![20160814113540408][]

当我点击下一页的时候，

![20160814113544220][]

是不是非常清楚原理了，我们现在要做的就是在后台接收这些数据，当然需要注意的是：**后台需要返回总数据条数（total）以便前台显示。**

**\[javascript\]**  [view plain][]   [copy][view plain]

[print][view plain] [?][view plain]

1.  <script>  
2.      $('\#dg').datagrid(\{  
3.          title: '学生信息查询结果',       //表格标题  
4.          width:500,            //表格宽度  
5.          pagination: **true**,     //开启分页  
6.          pageSize: 10,         //分页大小  
7.          pageNumber:1,         //第几页显示（默认第一页，可以省略）  
8.          pageList: \[10, 20, 30\], //设置每页记录条数的列表   
9.          url: '/FreshStudentMaintain/test',  //获取数据地址  
10.         columns: \[\[                //添加列  
11.             \{  
12.                 field: 'OrganizationID',  //绑定数据源ID  
13.                 title: '专业代码',        //显示列名称  
14.             \},  
15.             \{  
16.                 field: 'OrganizationName',  
17.                 title: '专业名称',  
18.             \},  
19.         \]\],  
20.     \});  
21. </script>

后台代码接收：

**\[csharp\]**  [view plain][]   [copy][view plain]

[print][view plain] [?][view plain]

1.  **public** ActionResult test()  
2.  \{  
3.      **int** pageIndex, pageSize;  
4.      pageIndex = **int**.Parse(Request\["page"\]);     //第几页的数据  
5.      pageSize = **int**.Parse(Request\["rows"\]);  //每页多少条数据  
6.      **int** total=0;         //返回数据条数总值  
7.    
8.      IBasicOrganizationBll CollegeBll = SpringHelper.GetObject<IBasicOrganizationBll>("BasicOrganizationBll");  
9.      List<OrganizationViewModel> major = CollegeBll.test(pageIndex,pageSize,**out** total);  
10.   
11.     var data = **new**  
12.     \{  
13.         total,      //将数据total加载到data中，返回到前台。  
14.         rows = major  
15.     \};  
16.     **return** Json(data, JsonRequestBehavior.AllowGet);  
17.   
18. \}

接口代码：

**\[csharp\]**  [view plain][]   [copy][view plain]

[print][view plain] [?][view plain]

1.  List<OrganizationViewModel> test(**int** pageIndex, **int** pageSize, **out** **int** total);

查数据代码（我这里使用的封装好的D层，仅供参考，具体查询方法，请自己书写SQL语句）：

**\[csharp\]**  [view plain][]   [copy][view plain]

[print][view plain] [?][view plain]

1.  **public** List<OrganizationViewModel> test(**int** pageIndex, **int** pageSize,**out** **int** total)  
2.           \{  
3.               List<basicorganizationentities> major = **new** List<basicorganizationentities>();  
4.    
5.               major = **this**.BasicOrganizationCurrentDal.LoadPageItems(pageSize, pageIndex, **out** total, u => u.OrganizationCode, **true**).ToList();  //分页数据查询  
6.    
7.               **return** ConvertListToList<List<basicorganizationentities>, List<OrganizationViewModel>>.ListInputToOutput<basicorganizationentities, OrganizationViewModel>(major); //返回查询到的泛型集合。  
8.           \}  
9.

[js]: http://lib.csdn.net/base/javascript
[view plain]: http://blog.csdn.net/why15732625998/article/details/52203521#
[20160814111950542]: /images/20220610/ed4d448edb124f40addf7c2424b8071c.png
[20160814112912452]: /images/20220610/a8a2749fe5e34b2e9f08863123b39cf0.png
[20160814113535747]: /images/20220610/1c4a51ef5c6c4d3d9233ac1c569299e8.png
[20160814113540408]: /images/20220610/040fce8acbbc42ce98d6a71c029f9d46.png
[20160814113544220]: /images/20220610/1b75b2337d4f4a19894b01e0b54f9e4a.png