html5教程-如何让HTML5的表格支持后台排序与分页
脚本宝典收集整理的这篇文章主要介绍了html5教程-如何让HTML5的表格支持后台排序与分页，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。
TWaver HTML5发布已有一段时间，使用的客户也是逐渐增加，于是我也迫不及待地申请了一个试用版来写一个小网页，最近正在写到数据查询，表格显示的功能。表格组件在HTML5中是提供的，查看TWaver提供的Demo,表格的使用还是比较多的，于是参考了其中的一个Demo，新建一个表格，并给表格赋值。很快一张表格就生成了。
但是想想，如果数据库中有几千甚至几万条数据，一下子显示出来也是不现实的，立马就想要了分页。查看TWaver的API，并没有发现表格中提供了分页的功能。算了，还是自己来扩展，想想TWaver Java中分页的功能，HTML5实现起来应该也不算太难，我们需要定义一个PagedTablePane，panel中包含表格和分页栏，分页栏参考了TWaver Java的那种：
仔细看看上面的分页条，其实也不是那么复杂，几个分页按钮加上分页的信息，于是很快就模仿了一个类似的分页栏，先上图：
界面实现起来还是比较容易的，主要的是按钮的操作和分页信息的显示，我们需要定义几个变量：currentPage（当前页）、countPErPage（每页的条数）、pageCount（页数）、count（总数），定义了这几个变量就可以将上图中分页的信息表示出来了。
另外需要注意，分页按钮上也需要做一些判断，比如当前已经是第一页了，那么“首页”和“上一页”的按钮就应该显示灰色，不可操作的状态；同理如果当前是最后一页，那么后面两个按钮也需要呈不可操作状态，我们来看下相关代码：
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 }
按钮除了需要判断显示状态之外，还需要加鼠标点击的监听，这里我们需要后台分页，因此，每次点击按钮时，都需要调用后台的方法查询出相应的数据，这样也可以减少前台一次加载大量数据的压力。
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都是调用后台的方法，这里就不再给出了。至此，分页的功能就差不多了，加上分页后的效果：
细心的朋友还会看到上面的表头上有些列是可点的，有些是不可点击的。我在这里加上了后台排序的功能，如果这一列可以排序就为可点击状态，反之则为不可点击状态。
HTML5中的表格默认是可以进行排序的，不过这种排序也是在当前页进行排序，还不是真正意义上的后台排序，其实分页后也只有当前页的数据在databox中，后面页的数据都需要通过实时查找才能获取放置到databox中。因此点击排序按钮时我们需要将TWaver默认的处理方式给屏蔽掉，加上自己的处理就可以了，具体实现如下：
先重写table上的getCurrentSortFunction：
1 getCurrentSortFunction: function () {
2 return this.getSortFunction();
3 }www.2cto.COM
然后在onColumnSorted方法中进行自己的业务处理：
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是自己定义的两个变量，在search方法中会调用此变量，将其传入后台进行排序。最后，给出完整的PagedTablePane供大家参考：
1 var PagedTablePane = function (dataPane) {
2 PagedTablePane.superClass.constructor.call(this);
3 this.dataPane = dataPane;
4 var toolbar = document.createElement('p');
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 });
TWaver HTML5发布已有一段时间，使用的客户也是逐渐增加，于是我也迫不及待地申请了一个试用版来写一个小网页，最近正在写到数据查询，表格显示的功能。表格组件在HTML5中是提供的，查看TWaver提供的Demo,表格的使用还是比较多的，于是参考了其中的一个Demo，新建一个表格，并给表格赋值。很快一张表格就生成了。
但是想想，如果数据库中有几千甚至几万条数据，一下子显示出来也是不现实的，立马就想要了分页。查看TWaver的API，并没有发现表格中提供了分页的功能。算了，还是自己来扩展，想想TWaver Java中分页的功能，HTML5实现起来应该也不算太难，我们需要定义一个PagedTablePane，panel中包含表格和分页栏，分页栏参考了TWaver Java的那种：
仔细看看上面的分页条，其实也不是那么复杂，几个分页按钮加上分页的信息，于是很快就模仿了一个类似的分页栏，先上图：
界面实现起来还是比较容易的，主要的是按钮的操作和分页信息的显示，我们需要定义几个变量：currentPage（当前页）、countPerPage（每页的条数）、pageCount（页数）、count（总数），定义了这几个变量就可以将上图中分页的信息表示出来了。
另外需要注意，分页按钮上也需要做一些判断，比如当前已经是第一页了，那么“首页”和“上一页”的按钮就应该显示灰色，不可操作的状态；同理如果当前是最后一页，那么后面两个按钮也需要呈不可操作状态，我们来看下相关代码：
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 }
按钮除了需要判断显示状态之外，还需要加鼠标点击的监听，这里我们需要后台分页，因此，每次点击按钮时，都需要调用后台的方法查询出相应的数据，这样也可以减少前台一次加载大量数据的压力。
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都是调用后台的方法，这里就不再给出了。至此，分页的功能就差不多了，加上分页后的效果：
细心的朋友还会看到上面的表头上有些列是可点的，有些是不可点击的。我在这里加上了后台排序的功能，如果这一列可以排序就为可点击状态，反之则为不可点击状态。
HTML5中的表格默认是可以进行排序的，不过这种排序也是在当前页进行排序，还不是真正意义上的后台排序，其实分页后也只有当前页的数据在databox中，后面页的数据都需要通过实时查找才能获取放置到databox中。因此点击排序按钮时我们需要将TWaver默认的处理方式给屏蔽掉，加上自己的处理就可以了，具体实现如下：
先重写table上的getCurrentSortFunction：
1 getCurrentSortFunction: function () {
2 return this.getSortFunction();
3 }www.2cto.com
然后在onColumnSorted方法中进行自己的业务处理：
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是自己定义的两个变量，在search方法中会调用此变量，将其传入后台进行排序。最后，给出完整的PagedTablePane供大家参考：
1 var PagedTablePane = function (dataPane) {
2 PagedTablePane.superClass.constructor.call(this);
3 this.dataPane = dataPane;
4 var toolbar = document.createElement('p');
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 });
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！
脚本宝典总结
以上是脚本宝典为你收集整理的html5教程-如何让HTML5的表格支持后台排序与分页全部内容，希望文章能够帮你解决html5教程-如何让HTML5的表格支持后台排序与分页所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
- 关于移动端h5开发相关内容总结 2022-05-17
- html5教程-学表单的第二天 2018-12-10
- html5教程-HTML5浏览器支持 2018-12-10
- html5教程-HTML5智能表单 2018-12-10
- html5教程-微信H5使用resLoader实现加载页效果 2018-12-10
- html5教程-day01-初级-JS0-热身运动、JS入门教程 2018-12-10
- html5教程-html5shiv.js和respond.min.js 2018-12-10
- html5教程-不同浏览器对于html5 audio标签和音频格式的兼容性 2018-12-10
- html5教程-使用Html5实现手风琴案例 2018-12-10
- html5教程-html5笔记 2018-12-10