jquery easy ui 分页

为了解决大数据量下显示数据的问题,我们需要这样的一个效果:用户每次操作分页工具栏的时候向数据库获取新的数据,服务器根据传递回的参数确定需要获取的数据段,然后查询数据库获取指定若干行的数据,再传递给前台由Datagrid显示出来。

首先,设置datagrid的初始化

[javascript] view plaincopyprint?

  1. $(function() {
  2. $(‘#tableTrainee‘).datagrid(‘getPager‘).pagination({
  3. pageSize: 10, //每页显示的记录条数,默认为10
  4. pageList: [10, 15, 20, 25], //可以设置每页记录条数的列表
  5. onSelectPage: function(pageNumber, pageSize) {
  6. SearchTrainee();//每次更换页面时触发更改
  7. }
  8. });
  9. });

其中的SearchTrainee()方法在每次更新页面的时候都会被加载一次。

其次,获取数据并加载

[javascript] view plaincopyprint?

  1. function SearchTrainee() {
  2. functionSearchTrainee() {
  3. var companyCode =$(‘#hiddenCompanyCode‘).val();
  4. var name = $(‘#txtName‘).val();
  5. if (companyCode== "") companyCode = "000";
  6. var dg =$(‘#tableTrainee‘);
  7. var opts =dg.datagrid(‘options‘);
  8. var pager =dg.datagrid(‘getPager‘);
  9. var _pageNumber =opts.pageNumber;
  10. var _pageSize =opts.pageSize;
  11. //异步获取数据到javascript对象,入参为查询条件和页码信息
  12. $.post(‘Ajax/GetTraineeHandler.ashx‘, {
  13. Name: name,
  14. CompanyCode:companyCode,
  15. pageNumber:_pageNumber,
  16. pageSize:_pageSize
  17. }, function(data) {
  18. //注意此处从数据库传来的data数据有记录总行数的total列
  19. var total = JSON.parse(data).rows[0].total;
  20. $(‘#tableTrainee‘).datagrid(‘loadData‘, JSON.parse(data));
  21. pager.pagination({
  22. //更新pagination的导航列表各参数
  23. total:total,//总数
  24. pageSize: _pageSize,//行数
  25. pageNumber: _pageNumber//页数
  26. });
  27. });
  28. }

下面的工作就是使用服务器获取数据库的数据了。

按照以上要求的话,数据库的查询语句就不能使用 count(*),select * 类似需要全局搜索的语句了,因为其太耗时了。

网上牛人关于分页搜索语句的帖子非常的多,搜索方法多种多样,这里我采用了以下这个:

[sql] view plaincopyprint?

  1. select top 页大小 * from id
  2. where id  not in
  3. (
  4. select top 页大小*(页数-1) id  from table  order by id  asc
  5. )

这个语句的优点是不用查询所有行,缺点是页码越大,查询的效率越低。例如,一次测试中获取一千万行后的10行数据,约需要1分钟。

现在的主要问题基本是解决了,但是还是存在不少问题:

1. 从服务器中获取数据总条数的时候是使用的select count(*)语句,这样的语句和select * 类似,都是需要搜索全部数据的,会导致大数据的情况下变得很慢。

2. 不止可以从查询语句方面提高查询效率,如果可以的话,应该给数据库表添加索引,如果可以添加存储过程的话就更好了。

2013.12.30补充

在查询数据库的时候,也可以采用下面这条语句

[sql] view plaincopyprint?

  1. SELECT TOP 页大小 *
  2. FROM table1
  3. WHERE id >
  4. (
  5. SELECT ISNULL(MAX(id),0)
  6. FROM
  7. (
  8. SELECT TOP 页大小*(页数-1) id FROM table1 ORDER BY id
  9. ) A
  10. )
  11. ORDER BY id

比较下来,这个语句比上面使用not in语句的查询效率更高,但仍无法避免页码增大会导致效率变差的情况,获取1千万行以后的10行数据仍然需要1分钟以上。

获取datagrid右下角那里的总页数,不可避免的需要使用count语句,这会出现查询语句的短板,无奈~~

如果不带条件的获取总行数的话,可以使用下面这条语句

SELECT ROWS FROM SYSINDEXES WHERE ID = OBJECT_ID(‘tableName‘) AND INDID = 1

注意其获取的并非精确值,而是服务器隔一段时间更新的数据库表总行数。

时间: 2024-10-03 14:56:44

jquery easy ui 分页的相关文章

Jquery Easy UI初步学习(二)datagrid的使用

第一篇学的是做一个管理的外框,接着就是数据datagrid绑定了,这里我用asp.net mvc3来做的,主要就是熟悉属性.方法. 打开easyui的demo 就可以看到如下一段代码: 和上篇一样class="easyui-datagrid", data-options="...",这是一样的,其他我在网上查了查,并做了整理 DataGrid 属性 参数名 类型 描述 默认值 title string Datagrid面板的标题 null iconCls strin

JQuery Easy Ui (Tree树)详解

在这里沉重悼念我辛辛苦苦写了4个小时的文章,因为我的失误,没保存,而夭折啦..... 我的痛苦谁能懂? 哎~~~~  吃一见长一智吧! 么的办法啊! 但是,但是!我狠了狠心,咬了咬牙!我决定,再写一遍!!! 谁知道哭的表情怎么写! 我已经无法用言语表达我此时此刻的沉重心情了! (以下内容,身为菜鸟的我是用颤抖的双手敲出来的,忘同志们珍惜!!!!) 记得4个小时之前,我写过一个随笔,它的内容是这样的: 每次写博客,都喜欢在前面和大家分享一些东西,今天要分享的是一个小故事: 一个世界著名的大酒店正在

JQuery Easy Ui (Tree树)详解(转)

JQuery Easy Ui (Tree树)详解(转) 第一讲:JQuery Easy Ui到底是什么呢? 首先咱们知道JQuery是对Java Script的封装,是一个js库,主要提供的功能是选择器,属性修改和事件绑定等等.. JQuery ui是在jQuery的基础上,利用jQuery的扩展性,设计的插件. 那么JQuery Easy Ui到底是什么呢? 我的理解就是比JQuery ui更强大,同样都是实现绚丽的多功能效果! jQuery Easy UI的目的就是帮助Web开发者更轻松的打

jquery easy ui 1.5最新版本 简单的权限分配

jquery easy 1.5 Maven+servlet+jsp+jdbc实现权限管理分配 首先,我先说明下,我只是一个菜鸟,我只是在编程道路上摸索的一个的小码农.做开发三年了,这好像是我第一次写博客.以前接触过类似于jquery easy  ui 的DWZ,是我第一家公司用的UI框架.所以用easy ui感觉很快能上手.都是基于jquery 的ui框架.好,废话少说.此次项目我是用最基础的jsp+servlet+jdbc写的,同时加入了maven管理jar包以及发布.应该很好理解的. 1.准

JQUERY EASY UI +TREE +SERVLET 显示菜单的例子

1.准备工作 (1)jquery easy ui (2)mysql数据 (3)eclipse开发环境等等 2.开发前端 <body class="easyui-layout"> <div data-options="region:'north',title:'header',split:true,noheader:true" style="height:60px;background:#666;"><div clas

jQuery Easy UI Droppable(放置)组件

Droppable(放置)组件也是一个基本组件,用法较简单,语法都在例子里面注释了: 示例: <!DOCTYPE html> <html> <head> <title>jQuery Easy UI</title> <meta charset="UTF-8" /> <script type="text/javascript" src="easyui/jquery.min.js&qu

jQuery Easy UI Resizable(调整大小)组件

Resizable(调整大小)组件,easyui基础组件之一,调整大小就是可以对元素可以拖着调整大小,这个组件不依赖于其他组件,使用比较简单,相关的属性.事件都 在例子中介绍了. 示例: <!DOCTYPE html> <html> <head> <title>jQuery Easy UI</title> <meta charset="UTF-8" /> <script type="text/jav

jQuery Easy UI Tooptip(提示框)组件

我们都知道DOM节点的title属性,Tooptip组件就是比较强大的title,它可以自由的设置自己的样式.位置以及有自己相关的触发事件. 示例: <!DOCTYPE html> <html> <head> <title>jQuery Easy UI</title> <meta charset="UTF-8" /> <script type="text/javascript" src=&

jQuery Easy UI LinkButton(按钮)组件

LinkButton(按钮)组件,easyui基础组件之一 示例: <!DOCTYPE html> <html> <head> <title>jQuery Easy UI</title> <meta charset="UTF-8" /> <script type="text/javascript" src="easyui/jquery.min.js"></s