How to enable HTML 5 tables to support Background sorting and paging

TWaver HTML5 has been released for some time, and the number of users has gradually increased. So I can't wait to apply for a trial version to write a small webpage. Recently, I am writing data query and table display functions. The table component is provided in HTML5. view the Demo provided by TWaver, and there are still many tables used. Therefore, refer to a Demo to create a new table and assign values to the table. Soon a table is generated.

 

But think about it. If the database contains thousands or even tens of thousands of pieces of data, it would be unrealistic to display them all at once, and I would like to paging them immediately. View TWaver's API. No paging function is provided in the table. Forget it. Let's expand it by yourself. Think about the paging function in TWaver Java. HTML5 implementation should not be too difficult. We need to define a PagedTablePane, which contains tables and paging columns, the pagination bar refers to the TWaver Java class:

 

Taking a closer look at the paging bar above, it is actually not that complicated. When several paging buttons are added with paging information, it quickly imitates a similar paging column. First:

 

Interface implementation is relatively easy. The main thing is button operations and display of page information. We need to define several variables: currentPage (current page) and countPerPage (number of items per page), pageCount (page number), count (total number), defines these variables, you can represent the information in the paging.

In addition, you also need to make some judgments on the paging button. For example, if the current page is already the first page, the buttons on the "home page" and "Previous Page" should be dimmed and unavailable; similarly, if the current page is the last page, the next two buttons also need to be inoperable. Let's look at the relevant code:

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}

In addition to the display status, the button also needs to be monitored with mouse clicks. here we need to paging the background. Therefore, each time you click the button, you need to call the background method to query the corresponding data, which can also reduce the pressure on the front-end to load a large amount of data at a time.

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 });

In addition, interactive events must be added to the drop-down list:

1 cmbCountPerPage. onchange = function (){
2 var value = parseFloat (cmbCountPerPage. value );
3 self. countPerPage = value;
4 self. search ();
5 };

The search method in the above Code calls the background method, which is not provided here. At this point, the paging function is almost the same, with the effect of pagination:

 

Careful friends will also see that some columns on the header above are clickable and some cannot be clicked. I have added the background sorting function here. If this column can be sorted, It is clickable, and vice versa.

By default, tables in HTML5 can be sorted. However, such sorting is also performed on the current page, not in the background, in fact, only the data on the current page is stored in databox after pagination, and the data on the subsequent pages must be searched in real time before they can be obtained and placed in databox. Therefore, when you click the sort button, we need to remove TWaver's default processing method and add our own processing method. The specific implementation is as follows:

First, override getCurrentSortFunction on the table:

1 getCurrentSortFunction: function (){
2 return this. getSortFunction ();
3} www.2cto.com

Then, perform your own business processing in the onColumnSorted method:

1 this. table. onColumnSorted = function (column ){
2 self. currentPage = 0;
3 if (column ){
4 self. dataPane. _ sortBy = column. getClient ('sortproperties ');
5 self. dataPane. _ orderAsc = column. getSortDirection () = 'asc ';
6} else {
7 self. dataPane. _ sortBy = null;
8}
9 self. search ();
10 };

Here, sortBy and orderAsc are two Defined variables. This variable is called in the search method and imported into the background for sorting. Finally, the complete PagedTablePane is provided for your reference:

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', '123', '123', '123'];
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 ('sortproperties ');
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 });