EasyUI数据分页实现(真假分页)

分页实现(真假分页)"/>

EasyUI数据分页实现(真假分页)

数据分页功能的实现是在任何一个项目中都非常实用的一个功能，在ASP.NET学习的时候，曾写过一篇关于分页功能的实现(点击查看)，上面已经介绍的真假分页的优缺点，在这里我们就不过多的赘述了。现在的分页实现依赖于EasyUI前台框架的强大功能，那么接下来就让我们看看数据分页在Easyui中的实现吧！

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

* 表格显示初始化*

<table id="dg"></table>  

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

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

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

原版显示效果如下：

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

假分页实现

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

<script>       $('#dg').datagrid({ loadFilter: pagerFilter }).datagrid({url: '/FreshStudentMaintain/test'     //加载数据});// 分页数据的操作function pagerFilter(data) {if (typeof data.length == 'number' && typeof data.splice == 'function') {   // is arraydata = {total: data.length,rows: data}}var dg = $(this);var opts = dg.datagrid('options');var pager = dg.datagrid('getPager');pager.pagination({onSelectPage: function (pageNum, pageSize) {opts.pageNumber = pageNum;opts.pageSize = pageSize;pager.pagination('refresh', {pageNumber: pageNum,pageSize: pageSize});dg.datagrid('loadData', data);}});if (!data.originalRows) {data.originalRows = (data.rows);}var start = (opts.pageNumber - 1) * parseInt(opts.pageSize);var end = start + parseInt(opts.pageSize);data.rows = (data.originalRows.slice(start, end));return data;}
</script>

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

public ActionResult test(){IBasicOrganizationBll CollegeBll = SpringHelper.GetObject<IBasicOrganizationBll>("BasicOrganizationBll");List<OrganizationViewModel> college = CollegeBll.QueryCollege();//查询后台数据方法return Json(college, JsonRequestBehavior.AllowGet);}

显示效果：

* 真分页*

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

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

当我点击下一页的时候，

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

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

后台代码接收：

        public ActionResult test(){int pageIndex, pageSize;pageIndex = int.Parse(Request["page"]);     //第几页的数据pageSize = int.Parse(Request["rows"]);  //每页多少条数据int total=0;         //返回数据条数总值IBasicOrganizationBll CollegeBll = SpringHelper.GetObject<IBasicOrganizationBll>("BasicOrganizationBll");List<OrganizationViewModel> major = CollegeBll.test(pageIndex,pageSize,out total);var data = new{total,      //将数据total加载到data中，返回到前台。rows = major};return Json(data, JsonRequestBehavior.AllowGet);}

接口代码：

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

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

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

至此真分页就已经实现了（其实也没什么东西，但是刚开始接触，不怎么会用而已）。

MySQL分页查询语句（转载自原文地址）

方法1：直接使用数据库提供的SQL语句
—语句样式: MySQL中,可用如下方法:SELECT * FROM 表名称 LIMIT M,N。

—适应场景:适用于数据量较少的情况(元组百/千级)。

—原因/缺点:全表扫描,速度会很慢且 有的数据库结果集返回不稳定(如某次返回1,2,3,另外的一次返回2,1,3)。Limit限制的是从结果集的M位置处取出N条输出,其余抛弃。

方法2:建立主键或唯一索引,利用索引(假设每页10条)

—语句样式: MySQL中,可用如下方法:

SELECT *FROM 表名称 WHERE id_pk > (pageNum*10)LIMIT M。

—适应场景: 适用于数据量多的情况(元组数上万)。

—原因:索引扫描,速度会很快。有朋友提出因为数据查询出来并不是按照pk_id排序的，所以会有漏掉数据的情况，只能方法3。

方法3:基于索引再排序

—语句样式: MySQL中,可用如下方法:SELECT * FROM 表名称 WHERE id_pk >(pageNum*10) ORDER BY id_pk ASC LIMIT M。

—适应场景: 适用于数据量多的情况(元组数上万).最好ORDER BY后的列对象是主键或唯一所以,使得ORDERBY操作能利用索引被消除但结果集是稳定的(稳定的含义,参见方法1)。

—原因:索引扫描,速度会很快. 但MySQL的排序操作,只有ASC没有DESC(DESC是假的,未来会做真正的DESC,期待)。

方法4: 基于索引使用prepare（第一个问号表示pageNum，第二个？表示每页元组数）

—语句样式: MySQL中,可用如下方法:

PREPAREstmt_name FROM SELECT * FROM 表名称 WHEREid_pk > (？*？) ORDER BY id_pk

ASC LIMIT M。

—适应场景:大数据量。

—原因:索引扫描,速度会很快. prepare语句又比一般的查询语句快一点。

方法5:利用MySQL支持ORDER操作可以利用索引快速定位部分元组,避免全表扫描

—比如:读第1000到1019行元组(pk是主键/唯一键)。

—SELECT *FROM your_table WHERE pk>=1000 ORDER BY pk ASC LIMIT 0,20。

方法6:利用”子查询/连接+索引”快速定位元组的位置,然后再读取元组.道理同方法5

—如(id是主键/唯一键,蓝色字体时变量):

利用子查询示例:

SELECT *FROM your_tableWHERE id <=
(SELECT idFROM your_tableORDER
BY iddesc LIMIT ( page−1)∗ $page-1)*$pagesizeORDER BY iddesc
LIMIT $pagesize
利用连接示例:

SELECT *FROM your_tableAS t1
JOIN (SELECT idFROM your_tableORDER BY
id desc LIMIT ( page−1)∗ $page-1)*$pagesize AS t2
WHERE
t1.id <= t2.id ORDER BY t1.iddesc LIMIT $pagesize;

总结：数据分页原理都是一样的，不论使用什么前台框架，都是这样使用，也就是属性和方法变一变而已，熟悉一下就会使用了，而对与十万、百万级别以上的数据的性能优化，就是能靠SQL查询语句的优化了，需要记住的是使用主键和索引是一条非常好的办法。