您的位置: 首页  >  文章  >  easyUI前端分页与后台分页总结

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

分类: 文章 • 2023-03-25 21:25:38

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

       表格显示初始化

[html] view plain copy
 print?
  1. <table id="dg"></table>  
[javascript] view plain copy
 print?
  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
 print?
  1. var p = $('#dg').datagrid('getPager');  
  2. $(p).pagination({  
  3.     beforePageText: '第',//页数文本框前显示的汉字   
  4.     afterPageText: '页    共 {pages} 页',  
  5.     displayMsg: '第{from}到{to}条，共{total}条',  
  6. });  

原版显示效果如下：
     easyUI前端分页与后台分页总结
如上图所示，数据表格和分页已经显示出来了。

       假分页实现

假分页就是将所有要显示的数据全部查询出来后，进行前台的分页，适合数据量较小的Web项目。
实现代码：
[javascript] view plain copy
 print?
  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
 print?
  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.         }  

显示效果：
easyUI前端分页与后台分页总结

       真分页

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

是不是非常清楚原理了，我们现在要做的就是在后台接收这些数据，当然需要注意的是：后台需要返回总数据条数（total）以便前台显示。
[javascript] view plain copy
 print?
  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
 print?
  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
 print?
  1. List<OrganizationViewModel> test(int pageIndex, int pageSize, out int total);  

查数据代码（我这里使用的封装好的D层，仅供参考，具体查询方法，请自己书写SQL语句）：
[csharp] view plain copy
 print?
  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.          }  

相关推荐