EasyUI Datagrid 分页显示(客户端)
来源:互联网 发布:江苏软件考试网 编辑:程序博客网 时间:2024/04/26 17:04
EasyUI Datagrid 分页显示(客户端)
By ZYZ
在使用JQuery EasyUI 的Datagrid 控件时,其中的pagination(分页控件)非常有用,该分页控件允许用户导航页面的数据,它支持页面导航和页面长度选择的选项设置。
Pagination控件上的显示文字默认是英文的,在引用了中文翻译文件(easyui-lang-zh_CN.js)可以全部显示为中文。如下:
<scripttype="text/javascript" src="../../js/easyui-lang-zh_CN.js"></script>首先初始化datagrid
如果要达到正常的分页效果,需要在初始化函数内对datagrid的分页方法进行设置。
$(function(){$('# table').datagrid({loadFilter:pagerFilter});});设置datagrid获取数据的来源:
在这里分别以get和post方法来获取数据。
functionSearchTrainee() {//获取搜索条件 var companyCode =$('#hiddenCompanyCode').val(); var name = $('#txtName').val(); var planName =$('#textSearchPlan').val(); if (companyCode == "")companyCode = "000"; var rowsData = "[]";//get方法:varhandler = "Ajax/GetTraineeHandler.ashx?Name=" + name +"&PlanName=" + planName + "&CompanyCode=" +companyCode; $('#tableTrainee').datagrid('options').url = encodeURI(handler); $('#tableTrainee').datagrid('reload'); //post方法: $.post('Ajax/GetTraineeHandler.ashx', { Name: name, PlanName: planName, CompanyCode: companyCode }, function (data) { $('#tableTrainee').datagrid('loadData', JSON.parse(data)); }); }Post方法中的JSON.parse函数很重要,它将post得到的字符串转换成了object类,因为过滤函数中需要使用object类的参数。
设置页面过滤函数
function pagerFilter(data) { var dg = ('#table').datagrid();; 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; }
一般获取Data数据时会采用一次获取全部数据,这种方法的确很方便省事。一次获取数据数据保存在浏览器中,翻页和改变行数的动作会非常的快速。
但是如果获取的数据量非常庞大,比如一百万行数据时怎么办呢?一次全部获取的话会严重影响Datagrid的加载速度,也加重了数据库服务器的工作负担,如果遇到并发用户非常多的情况,那就更加慢了。
2 0
- EasyUI Datagrid 分页显示(客户端)
- EasyUI Datagrid 分页显示(服务端)
- easyui datagrid客户端分页(7)
- EasyUI Datagrid 客户端分页详解
- easyui datagrid 客户端搜索、分页、排序
- easyui datagrid 客户端搜索、分页、排序
- jquery easyui datagrid分页显示数据
- jquery easyui datagrid分页显示数据
- jquery easyui datagrid分页显示数据
- easyUI使用datagrid分页栏不显示
- easyui datagrid分页代码
- Jquery easyui DataGrid分页
- EasyUI datagrid分页,编辑
- EasyUI datagrid分页查询
- jquery easyui datagrid 分页
- easyui datagrid 查询 分页
- easyui datagrid 分页详解
- easyui datagrid分页
- 关于图像特征提取
- 组合数学小结
- 单例模式(Singleton Pattern)案例解析
- struts2校验器概述3
- Linux Shell 编程实战技巧
- EasyUI Datagrid 分页显示(客户端)
- java applet 一个简单的例子(applet+html)
- 掉电数据块损坏引起数据库不能正常打开
- java学习笔记07-2
- Python 运算符与表达式
- JSON数据解析
- PL/SQL 异常处理
- Rotate Image
- magento 图片分离 cdn