TWaver HTML5發(fā)布已有一段時(shí)間，使用的客戶也是逐漸增加，于是我也迫不及待地申請(qǐng)了一個(gè)試用版來寫一個(gè)小網(wǎng)頁，最近正在寫到數(shù)據(jù)查詢，表格顯示的功能。表格組件在HTML5中是提供的，查看TWaver提供的Demo,表格的使用還是比較多的，于是參考了其中的一個(gè)Demo，新建一個(gè)表格，并給表格賦值。很快一張表格就生成了。
但是想想，如果數(shù)據(jù)庫中有幾千甚至幾萬條數(shù)據(jù)，一下子顯示出來也是不現(xiàn)實(shí)的，立馬就想要了分頁。查看TWaver的API，并沒有發(fā)現(xiàn)表格中提供了分頁的功能。算了，還是自己來擴(kuò)展，想想TWaver Java中分頁的功能，HTML5實(shí)現(xiàn)起來應(yīng)該也不算太難，我們需要定義一個(gè)PagedTablePane，panel中包含表格和分頁欄，分頁欄參考了TWaver Java的那種：
仔細(xì)看看上面的分頁條，其實(shí)也不是那么復(fù)雜，幾個(gè)分頁按鈕加上分頁的信息，于是很快就模仿了一個(gè)類似的分頁欄，先上圖：
界面實(shí)現(xiàn)起來還是比較容易的，主要的是按鈕的操作和分頁信息的顯示，我們需要定義幾個(gè)變量：currentPage（當(dāng)前頁）、countPerPage（每頁的條數(shù)）、pageCount（頁數(shù)）、count（總數(shù)），定義了這幾個(gè)變量就可以將上圖中分頁的信息表示出來了。
另外需要注意，分頁按鈕上也需要做一些判斷，比如當(dāng)前已經(jīng)是第一頁了，那么“首頁”和“上一頁”的按鈕就應(yīng)該顯示灰色，不可操作的狀態(tài)；同理如果當(dāng)前是最后一頁，那么后面兩個(gè)按鈕也需要呈不可操作狀態(tài)，我們來看下相關(guān)代碼：
1 if(this.pageCount < 2) {
2 this.btnFirstPage.disabled = true;
3 this.btnPreviousPage.disabled = true;
4 this.btnNextPage.disabled = true;
5 this.btnLastPage.disabled = true;
6 } else {
7 this.btnFirstPage.disabled = false;
8 this.btnPreviousPage.disabled = false;
9 this.btnNextPage.disabled = false;
10 this.btnLastPage.disabled = false;
11 if(this.currentPage == 0) {
12 this.btnFirstPage.disabled = true;
13 this.btnPreviousPage.disabled = true;
14 }
15 if(this.currentPage == this.pageCount - 1) {
16 this.btnNextPage.disabled = true;
17 this.btnLastPage.disabled = true;
18 }
19 }
按鈕除了需要判斷顯示狀態(tài)之外，還需要加鼠標(biāo)點(diǎn)擊的監(jiān)聽，這里我們需要后臺(tái)分頁，因此，每次點(diǎn)擊按鈕時(shí)，都需要調(diào)用后臺(tái)的方法查詢出相應(yīng)的數(shù)據(jù)，這樣也可以減少前臺(tái)一次加載大量數(shù)據(jù)的壓力。
1 this.btnFirstPage = util.addButton(toolbar, '<<', function () {
2 self.currentPage = 0;
3 self.search();
4 });
5 this.btnPreviousPage = util.addButton(toolbar, '<', function () {
6 self.currentPage --;
7 self.search();
8 });
9 this.btnNextPage = util.addButton(toolbar, '>', function () {
10 self.currentPage ++;
11 self.search();
12 });
13 this.btnLastPage = util.addButton(toolbar, '>>', function () {
14 self.currentPage = self.pageCount -1;
15 self.search();
16 });
另外下拉條也需要加交互事件：
1 cmbCountPerPage.onchange = function () {
2 var value = parseFloat(cmbCountPerPage.value);
3 self.countPerPage = value;
4 self.search();
5 };
上面代碼中的search都是調(diào)用后臺(tái)的方法，這里就不再給出了。至此，分頁的功能就差不多了，加上分頁后的效果：
細(xì)心的朋友還會(huì)看到上面的表頭上有些列是可點(diǎn)的，有些是不可點(diǎn)擊的。我在這里加上了后臺(tái)排序的功能，如果這一列可以排序就為可點(diǎn)擊狀態(tài)，反之則為不可點(diǎn)擊狀態(tài)。
HTML5中的表格默認(rèn)是可以進(jìn)行排序的，不過這種排序也是在當(dāng)前頁進(jìn)行排序，還不是真正意義上的后臺(tái)排序，其實(shí)分頁后也只有當(dāng)前頁的數(shù)據(jù)在databox中，后面頁的數(shù)據(jù)都需要通過實(shí)時(shí)查找才能獲取放置到databox中。因此點(diǎn)擊排序按鈕時(shí)我們需要將TWaver默認(rèn)的處理方式給屏蔽掉，加上自己的處理就可以了，具體實(shí)現(xiàn)如下：
先重寫table上的getCurrentSortFunction：
1 getCurrentSortFunction: function () {
2 return this.getSortFunction();
3 }
然后在onColumnSorted方法中進(jìn)行自己的業(yè)務(wù)處理：
1 this.table.onColumnSorted = function (column) {
2 self.currentPage = 0;
3 if (column) {
4 self.dataPane._sortBy = column.getClient('sortProperty');
5 self.dataPane._orderAsc = column.getSortDirection() === 'asc';
6 } else {
7 self.dataPane._sortBy = null;
8 }
9 self.search();
10 };
這里的sortBy和orderAsc是自己定義的兩個(gè)變量，在search方法中會(huì)調(diào)用此變量，將其傳入后臺(tái)進(jìn)行排序。最后，給出完整的PagedTablePane供大家參考：
1 var PagedTablePane = function (dataPane) {
2 PagedTablePane.superClass.constructor.call(this);
3 this.dataPane = dataPane;
4 var toolbar = document.createElement('div');
5 this.setCenter(new twaver.controls.TablePane(dataPane.table));
6 this.setTop(toolbar);
7 this.setTopHeight(25);
8 this.countPerPage = 20;
9 var self = this;
10 var isStorageSupport = typeof(Storage) !== "undefined";
11 if(isStorageSupport) {
12 var storageName = dataPane.getPageNumberStorageName();
13 if(localStorage.getItem(storageName)){
14 self.countPerPage = parseFloat(localStorage.getItem(storageName));
15 }
16 }
17 var cmbCountPerPage = document.createElement('select');
18 var items = ['20', '50', '100', '500', '1000'];
19 for(var i=0,item; i<items.length; i++) {
20 item = items[i];
21 var option = document.createElement('option');
22 option.appendChild(document.createTextNode(item));
23 option.setAttribute('value', item);
24 cmbCountPerPage.appendChild(option);
25 }
26 cmbCountPerPage.onchange = function () {
27 var value = parseFloat(cmbCountPerPage.value);
28 self.countPerPage = value;
29 if(isStorageSupport) {
30 var storageName = dataPane.getPageNumberStorageName();
31 localStorage.setItem(storageName,value);
32 }
33 self.search();
34 };
35 cmbCountPerPage.value = this.countPerPage;
36 toolbar.appendChild(cmbCountPerPage);
37
38 this.btnFirstPage = util.addButton(toolbar, '<<', function () {
39 self.currentPage = 0;
40 self.search();
41 });
42 this.btnPreviousPage = util.addButton(toolbar, '<', function () {
43 self.currentPage --;
44 self.search();
45 });
46 this.btnNextPage = util.addButton(toolbar, '>', function () {
47 self.currentPage ++;
48 self.search();
49 });
50 this.btnLastPage = util.addButton(toolbar, '>>', function () {
51 self.currentPage = self.pageCount -1;
52 self.search();
53 });
54 this.label = document.createElement('label');
55 toolbar.appendChild(this.label);
56
57 this.table = dataPane.table;
58 this.currentPage = 0;
59
60 this.table.onColumnSorted = function (column) {
61 self.currentPage = 0;
62 if (column) {
63 self.dataPane._sortBy = column.getClient('sortProperty');
64 self.dataPane._orderAsc = column.getSortDirection() === 'asc';
65 } else {
66 self.dataPane._sortBy = null;
67 }
68 self.search();
69 };
70 };
71
72 twaver.Util.ext('PagedTablePane', twaver.controls.BorderPane, {
73 search: function () {
74 util.invoke(this, this.handleSearch, {
75 moduleName:this.dataPane._moduleName,
76 method: util.getCountMethod(this.dataPane._method),
77 params: this.dataPane.getParams(),
78 paramTypes:this.dataPane._paramType
79 });
80 },
81 handleSearch: function (count) {
82 this.jsonObject = JSON.parse(count);
83 this.count = this.jsonObject[0];
84 this.pageCount = Math.floor(this.count/this.countPerPage);
85 if(this.count % this.countPerPage) {
86 this.pageCount ++;
87 }
88 if(this.currentPage >= this.pageCount) {
89 this.currentPage = this.pageCount -1;
90 }
91 this.label.innerHTML = jQuery.i18n.prop('paged.page',this.count,this.currentPage + 1,this.pageCount);
92 if(this.pageCount < 2) {
93 this.btnFirstPage.disabled = true;
94 this.btnPreviousPage.disabled = true;
95 this.btnNextPage.disabled = true;
96 this.btnLastPage.disabled = true;
97 } else {
98 this.btnFirstPage.disabled = false;
99 this.btnPreviousPage.disabled = false;
100 this.btnNextPage.disabled = false;
101 this.btnLastPage.disabled = false;
102 if(this.currentPage == 0) {
103 this.btnFirstPage.disabled = true;
104 this.btnPreviousPage.disabled = true;
105 }
106 if(this.currentPage == this.pageCount - 1) {
107 this.btnNextPage.disabled = true;
108 this.btnLastPage.disabled = true;
109 }
110 }
111 this.dataPane.initData();
112 }
113 });