EasyUI Datagrid 分頁顯示(客戶端)
By ZYZ
在使用JQuery EasyUI 的Datagrid 控件時,,其中的pagination(分頁控件)非常有用,該分頁控件允許用戶導(dǎo)航頁面的數(shù)據(jù),,它支持頁面導(dǎo)航和頁面長度選擇的選項設(shè)置,。
Pagination控件上的顯示文字默認是英文的,在引用了中文翻譯文件(easyui-lang-zh_CN.js)可以全部顯示為中文,。如下:
- <scripttype="text/javascript" src="../../js/easyui-lang-zh_CN.js"></script>
首先初始化datagrid
如果要達到正常的分頁效果,,需要在初始化函數(shù)內(nèi)對datagrid的分頁方法進行設(shè)置。
- $(function(){
-
- $('# table').datagrid({loadFilter:pagerFilter});
-
- });
設(shè)置datagrid獲取數(shù)據(jù)的來源:
在這里分別以get和post方法來獲取數(shù)據(jù),。
- 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
函數(shù)很重要,它將post得到的字符串轉(zhuǎn)換成了object類,,因為過濾函數(shù)中需要使用object類的參數(shù),。
設(shè)置頁面過濾函數(shù)
- 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數(shù)據(jù)時會采用一次獲取全部數(shù)據(jù),這種方法的確很方便省事,。一次獲取數(shù)據(jù)數(shù)據(jù)保存在瀏覽器中,,翻頁和改變行數(shù)的動作會非常的快速。
但是如果獲取的數(shù)據(jù)量非常龐大,,比如一百萬行數(shù)據(jù)時怎么辦呢,?一次全部獲取的話會嚴重影響Datagrid的加載速度,也加重了數(shù)據(jù)庫服務(wù)器的工作負擔,,如果遇到并發(fā)用戶非常多的情況,,那就更加慢了。
|