jquery easy ui 分页
2015-01-15 08:46
260 查看
为了解决大数据量下显示数据的问题,我们需要这样的一个效果:用户每次操作分页工具栏的时候向数据库获取新的数据,服务器根据传递回的参数确定需要获取的数据段,然后查询数据库获取指定若干行的数据,再传递给前台由Datagrid显示出来。
首先,设置datagrid的初始化
[javascript] view plaincopyprint?
$(function() {
$('#tableTrainee').datagrid('getPager').pagination({
pageSize: 10, //每页显示的记录条数,默认为10
pageList: [10, 15, 20, 25], //可以设置每页记录条数的列表
onSelectPage: function(pageNumber, pageSize) {
SearchTrainee();//每次更换页面时触发更改
}
});
});
其中的SearchTrainee()方法在每次更新页面的时候都会被加载一次。
其次,获取数据并加载
[javascript] view plaincopyprint?
function SearchTrainee() {
functionSearchTrainee() {
var companyCode =$('#hiddenCompanyCode').val();
var name = $('#txtName').val();
if (companyCode== "") companyCode = "000";
var dg =$('#tableTrainee');
var opts =dg.datagrid('options');
var pager =dg.datagrid('getPager');
var _pageNumber =opts.pageNumber;
var _pageSize =opts.pageSize;
//异步获取数据到javascript对象,入参为查询条件和页码信息
$.post('Ajax/GetTraineeHandler.ashx', {
Name: name,
CompanyCode:companyCode,
pageNumber:_pageNumber,
pageSize:_pageSize
}, function(data) {
//注意此处从数据库传来的data数据有记录总行数的total列
var total = JSON.parse(data).rows[0].total;
$('#tableTrainee').datagrid('loadData', JSON.parse(data));
pager.pagination({
//更新pagination的导航列表各参数
total:total,//总数
pageSize: _pageSize,//行数
pageNumber: _pageNumber//页数
});
});
}
下面的工作就是使用服务器获取数据库的数据了。
按照以上要求的话,数据库的查询语句就不能使用 count(*),select * 类似需要全局搜索的语句了,因为其太耗时了。
网上牛人关于分页搜索语句的帖子非常的多,搜索方法多种多样,这里我采用了以下这个:
[sql] view plaincopyprint?
select top 页大小 * from id
where id not in
(
select top 页大小*(页数-1) id from table order by id asc
)
这个语句的优点是不用查询所有行,缺点是页码越大,查询的效率越低。例如,一次测试中获取一千万行后的10行数据,约需要1分钟。
现在的主要问题基本是解决了,但是还是存在不少问题:
1. 从服务器中获取数据总条数的时候是使用的select count(*)语句,这样的语句和select * 类似,都是需要搜索全部数据的,会导致大数据的情况下变得很慢。
2. 不止可以从查询语句方面提高查询效率,如果可以的话,应该给数据库表添加索引,如果可以添加存储过程的话就更好了。
2013.12.30补充
在查询数据库的时候,也可以采用下面这条语句
[sql] view plaincopyprint?
SELECT TOP 页大小 *
FROM table1
WHERE id >
(
SELECT ISNULL(MAX(id),0)
FROM
(
SELECT TOP 页大小*(页数-1) id FROM table1 ORDER BY id
) A
)
ORDER BY id
比较下来,这个语句比上面使用not in语句的查询效率更高,但仍无法避免页码增大会导致效率变差的情况,获取1千万行以后的10行数据仍然需要1分钟以上。
获取datagrid右下角那里的总页数,不可避免的需要使用count语句,这会出现查询语句的短板,无奈~~
如果不带条件的获取总行数的话,可以使用下面这条语句
SELECT ROWS FROM SYSINDEXES WHERE ID = OBJECT_ID('tableName') AND INDID = 1
注意其获取的并非精确值,而是服务器隔一段时间更新的数据库表总行数。
首先,设置datagrid的初始化
[javascript] view plaincopyprint?
$(function() {
$('#tableTrainee').datagrid('getPager').pagination({
pageSize: 10, //每页显示的记录条数,默认为10
pageList: [10, 15, 20, 25], //可以设置每页记录条数的列表
onSelectPage: function(pageNumber, pageSize) {
SearchTrainee();//每次更换页面时触发更改
}
});
});
其中的SearchTrainee()方法在每次更新页面的时候都会被加载一次。
其次,获取数据并加载
[javascript] view plaincopyprint?
function SearchTrainee() {
functionSearchTrainee() {
var companyCode =$('#hiddenCompanyCode').val();
var name = $('#txtName').val();
if (companyCode== "") companyCode = "000";
var dg =$('#tableTrainee');
var opts =dg.datagrid('options');
var pager =dg.datagrid('getPager');
var _pageNumber =opts.pageNumber;
var _pageSize =opts.pageSize;
//异步获取数据到javascript对象,入参为查询条件和页码信息
$.post('Ajax/GetTraineeHandler.ashx', {
Name: name,
CompanyCode:companyCode,
pageNumber:_pageNumber,
pageSize:_pageSize
}, function(data) {
//注意此处从数据库传来的data数据有记录总行数的total列
var total = JSON.parse(data).rows[0].total;
$('#tableTrainee').datagrid('loadData', JSON.parse(data));
pager.pagination({
//更新pagination的导航列表各参数
total:total,//总数
pageSize: _pageSize,//行数
pageNumber: _pageNumber//页数
});
});
}
下面的工作就是使用服务器获取数据库的数据了。
按照以上要求的话,数据库的查询语句就不能使用 count(*),select * 类似需要全局搜索的语句了,因为其太耗时了。
网上牛人关于分页搜索语句的帖子非常的多,搜索方法多种多样,这里我采用了以下这个:
[sql] view plaincopyprint?
select top 页大小 * from id
where id not in
(
select top 页大小*(页数-1) id from table order by id asc
)
这个语句的优点是不用查询所有行,缺点是页码越大,查询的效率越低。例如,一次测试中获取一千万行后的10行数据,约需要1分钟。
现在的主要问题基本是解决了,但是还是存在不少问题:
1. 从服务器中获取数据总条数的时候是使用的select count(*)语句,这样的语句和select * 类似,都是需要搜索全部数据的,会导致大数据的情况下变得很慢。
2. 不止可以从查询语句方面提高查询效率,如果可以的话,应该给数据库表添加索引,如果可以添加存储过程的话就更好了。
2013.12.30补充
在查询数据库的时候,也可以采用下面这条语句
[sql] view plaincopyprint?
SELECT TOP 页大小 *
FROM table1
WHERE id >
(
SELECT ISNULL(MAX(id),0)
FROM
(
SELECT TOP 页大小*(页数-1) id FROM table1 ORDER BY id
) A
)
ORDER BY id
比较下来,这个语句比上面使用not in语句的查询效率更高,但仍无法避免页码增大会导致效率变差的情况,获取1千万行以后的10行数据仍然需要1分钟以上。
获取datagrid右下角那里的总页数,不可避免的需要使用count语句,这会出现查询语句的短板,无奈~~
如果不带条件的获取总行数的话,可以使用下面这条语句
SELECT ROWS FROM SYSINDEXES WHERE ID = OBJECT_ID('tableName') AND INDID = 1
注意其获取的并非精确值,而是服务器隔一段时间更新的数据库表总行数。
相关文章推荐
- jquery easy ui表单和分页设计
- Jquery easy ui的分页,table,数据加载
- jquery easy ui datagrid 纯后台分页实现
- jquery - easy - ui 下的tree (动态加载数据)
- JQuery Easy Ui dataGrid 数据表格
- Jquery Easy UI Databox 用法
- jquery Easy UI的大部分功能属性
- jquery easy ui 选项卡
- Jqueryui+easyui+easywidgets做的后台界面
- jquery easy UI 自定义Editor日期控件(日期控件用的my97 date)
- Jquery Easy UI 中的datagrid通过url调用webservice返回json数据
- jquery Easy ui 设置下拉combobox 可用与不可用
- php + jquery ui插件 + jquery pager插件 实现新闻的 标签分类 + 无刷新分页
- JQuery easy UI updateRow
- JQuery easy UI 通过updateRow 排序
- JQuery Easy Ui 可装载组合框 - ComboBox
- jQuery liger ui ligerGrid 打造通用的分页排序查询表格(提供下载)
- jQuery.Easy-UI 中控制tabs 打开的数量
- jQuery Easy UI实例(二)
- Jquery easy UI combobox