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

2024-03-17 18:05:10

EasyUI数据分页实现(真假分页)
原创王洪玉最后发布于2016-08-14 11:56:40 阅读数 17816 收藏
展开
数据分页功能的实现是在任何一个项目中都非常实用的一个功能，在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', //绑定数据源ID
title: '专业代码', //显示列名称
},
{
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 array
data = {
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);

}

显示效果：

真分页
真分页相对假分页来说麻烦了一些，但是对于数据量大的系统来说，可以很好的，快速的查询数据。要想实现分页，我们就得先知道分页的原理，首先我们需要将[第几页](pageIndex)和[一页多少数据](pageSize)传递给后台，以便查询，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', //绑定数据源ID
title: '专业代码', //显示列名称
},
{
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)*$pagesizeORDER BY iddesc

LIMIT $pagesize

利用连接示例:

SELECT *FROM your_tableAS t1

JOIN (SELECT idFROM your_tableORDER BY

id desc LIMIT ($page-1)*$pagesize AS t2

WHERE

t1.id <= t2.id ORDER BY t1.iddesc LIMIT $pagesize;

总结：数据分页原理都是一样的，不论使用什么前台框架，都是这样使用，也就是属性和方法变一变而已，熟悉一下就会使用了，而对与十万、百万级别以上的数据的性能优化，就是能靠SQL查询语句的优化了，需要记住的是使用主键和索引是一条非常好的办法。
————————————————
版权声明：本文为CSDN博主「王洪玉」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/why15732625998/article/details/52203521

码农公寓

相关文章