Extjs實現分頁效果

extjs實現分頁還是比較簡單的，主要是這套流程弄明白就可以了。（extjs4.0以後版本適用）

首先js檔案需要引入pagingmemoryproxy.js

ext.loader.setconfig();
ext.loader.setpath('ext.ux', '../../../scripts/extjs/ux');
ext.require([
'ext.ux.pagingmemoryproxy.pagingmemoryproxy',
]);

extjs中引入，當然在html頁面引入也可以，注意順序放對就可以了。

定義單頁顯示記錄條數：var itemsperpage = 20;//單頁顯示記錄條數

在store中新增pagesize和root以及totalproperty

//**資料來源
var gridstore1 = ext.create('ext.data.store', ,
url: "communicationstatuscffind.aspx?method=getcommunicationstatuscfdata",
reader: 
}});

這種方式是通過和c#後台互動返回totalproperty的屬性值得。

var grid1 = ext.create('ext.grid.panel', 
},},,,
,,
],dockeditems: [,,
,'->',
;gridstore1.load();}},
' ']
},],
renderto: ext.getbody()
});

在**grid中的dockeditems中新增分頁以及跳轉的工具欄

c#後台獲取資料：只需要返回單頁的記錄條數，不要返回所有的，否則分頁效果顯示不出來，仍然顯示所有的

public void getcommunicationstatuscfdata()
datatable tbl = new datatable();
tbl.columns.add("id", typeof(string));//id
tbl.columns.add("statename", typeof(string));//狀態名稱
tbl.columns.add("arinumber", typeof(string));//裝置編碼
tbl.columns.add("tagid", typeof(string));
tbl.columns.add("factoryid", typeof(string));
tbl.columns.add("workshopid", typeof(string));
tbl.columns.add("operator", typeof(string)); //操作人
tbl.columns.add("operatetime", typeof(string)); //操作時間
for (int i = convert.toint32(start); i < end; i++)
string json = json.encode(tbl);
json = "";
response.write(json);
response.end();
}

其中start和limit引數不需要在前端定義，這應該是pagingmemoryproxy中有的引數，在後台直接request獲取即可。

Extjs中實現分頁

目前接觸到的有兩種方法，主要區別在後台程式，介面上都是一樣的寫法，首先建立資料集datastore 首先在建立gridpanel ext.create data.grid.panel 分頁欄 dockeditems 條，共計條 emptymsg 沒有資料 me.callparent argumen...

AJAX實現分頁效果

本markdown編輯器使用stackedit修改而來，用它寫部落格，將會帶來全新的體驗哦 markdown 是一種輕量級標記語言，它允許人們使用易讀易寫的純文字格式編寫文件，然後轉換成格式豐富的html頁面。維基百科使用簡單的符號標識不同的標題，將某些文字標記為粗體或者斜體，建立乙個鏈結等，詳細...

vue element ui 實現分頁效果

我使用得是el table el pagination來實現的，話不多說，直接上編輯刪除 export default inject reload 注入reload方法 data created mounted methods handlecurrentchange function curren...

Extjs實現分頁效果

Extjs中實現分頁

AJAX實現分頁效果

vue element ui 實現分頁效果

相關推薦