如何让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 });