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

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

       表格显示初始化

[html]  view plain  copy
 print ?
  1. <table id="dg">table>  
[javascript]  view plain  copy
 print ?
  1.   

我们还可以手动设置分页控件的显示样式,例如:
[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前端分页与后台分页总结_第1张图片
如上图所示,数据表格和分页已经显示出来了。

       假分页实现

假分页就是将所有要显示的数据全部查询出来后,进行前台的分页,适合数据量较小的Web项目。
实现代码:
[javascript]  view plain  copy
 print ?
  1.   

后台代码仅仅是将从数据库里查询到的数据转化未Json字符串类型传到前台就可以了。例:
[csharp]  view plain  copy
 print ?
  1. public ActionResult test()  
  2.         {  
  3.             IBasicOrganizationBll CollegeBll = SpringHelper.GetObject("BasicOrganizationBll");  
  4.             List college = CollegeBll.QueryCollege();//查询后台数据方法  
  5.   
  6.             return Json(college, JsonRequestBehavior.AllowGet);  
  7.   
  8.         }  

显示效果:
easyUI前端分页与后台分页总结_第2张图片

       真分页

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

是不是非常清楚原理了,我们现在要做的就是在后台接收这些数据,当然需要注意的是:后台需要返回总数据条数(total)以便前台显示。
[javascript]  view plain  copy
 print ?
  1.   

后台代码接收:
[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("BasicOrganizationBll");  
  9.     List 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 test(int pageIndex, int pageSize, out int total);  

查数据代码(我这里使用的封装好的D层,仅供参考,具体查询方法,请自己书写SQL语句):
[csharp]  view plain  copy
 print ?
  1. public List test(int pageIndex, int pageSize,out int total)  
  2.          {  
  3.              List major = new List();  
  4.   
  5.              major = this.BasicOrganizationCurrentDal.LoadPageItems(pageSize, pageIndex, out total, u => u.OrganizationCode, true).ToList();  //分页数据查询  
  6.   
  7.              return ConvertListToList, List>.ListInputToOutput(major); //返回查询到的泛型集合。  
  8.          }  

你可能感兴趣的:(EasyUI)