Bootstrap Paginator 分页 demo.

效果如下:

需要的引用以下内容

bootstrap2 http://cnbootstrap.com/

bootstrap-paginator v0.5 主页 http://bootstrappaginator.org/

jquery1.8

----------------------------------------------------------------------------------------------------

目前bootstrap对grid的处理还不是很好所有自己主要写了些方法处理.主要处理方法

playingui.js

   //demo做的一个大对象而已.主要是buildgrid方法
 1 var playingui = {
 2     //动态变量方法,为了可以方便统一以$+id的方式去取的dom的对象
 3     autovariable: function (options) {
 4         if (options != undefined) {
 5             if (typeof options == "string") {
 6                 options=options.split(',');
 7                 for (var i = 0; i < options.length; i++) {
 8                     eval("$" + options[i] + "=$('#" + options[i] + "');");
 9                 }
10             }
11         }
12     },
13     //建立grid
14     buildgrid:function(grid)
15     {
16          var html = '';
17          //grid的json数据
18          var json = grid.json;
19          //grid的json字段
20          var fields=grid.data;
21             for (var i = 0; i < json.length; i++) {
22                     html += "<tr>";
23                     for (var j = 0; j < fields.length; j++){
24                         var name = json[i][fields[j].name];
25                         //当前json的字段
26                         var field = fields[j];
27                         //currentfield:当前json
28                         //那么如果json[i][fields[j]]  就等于json.xxx的对象
29                         var currentfield = json[i];
30
31                         //如果该列是操作列,那么只做这件事
32                         if(field.type=='opfield')
33                         {
34                             html += getTbodyTd(field.value(currentfield));
35                         }
36                         else{
37                             if (field.value!=undefined && typeof field.value=="function")
38                             {
39                                 html += getTbodyTd(field.value(currentfield));
40                             }
41                             else
42                             {
43                                 if (field.type == 'date') {
44                                     //这里注释了，因为这里使用到baidu的tangram插件,主要用来格式化格式,当然也可以用别的方式.
45                                     //html += getTbodyTd(baidu.date.format(new Date(name),'yyyy-MM-dd'));
46                                     html += getTbodyTd(name);
47                                 }
48                                 else{
49                                     html += getTbodyTd(name);
50                                 }
51                             }
52                         }
53                         //grid的onloading方法
54                         grid.onloading(currentfield);
55                     }
56                     html += "</tr>";
57             }
58             $tbody.show();
59          $tbodyPage.show();
60          $tbodyList.html(html);
61          //成功获取数据绑定page
62          bindPage();
63     }
64
65 };
66  

demo.html 的script部分的主要方法

   //绑定grid
 1 function bindGrid(newPag) {
 2     showNoRecord(false);
 3     $.ajax({
 4         type: "get",
 5         //这里用的是*.js文件方便demo
 6         url: 'datajson.js',
 7         dataType: "json",
 8         beforeSend: function () { showLoadingImg(true); },
 9         complete: function () { showLoadingImg(false); },
10         success: function (data) {
11             if (data.dataMap == null) {
12                 showNoRecord(true);
13             }
14             else {
15                 var json = data.dataMap.msg;
16                 jsonpagesize = data.dataMap.totalpage;
17                 //定义grid对象
18                 var grid = {};
19                 //赋值到grid
20                 grid.json = json;
21                 //定义data的数组,将会根据此定义来生成建立grid
22                 grid.data = [
23                     { name: 'deviceid', type: 'string' },
24                     { name: 'devicename', type: 'string' },
25                     { name: 'deviceip', type: 'string' },
26                     { name: 'deviceversion', type: 'string' },
27                     { name: 'serverversion', type: 'string' },
28                     { name: 'logindate', type: 'date' },
29                     {
30                         name: 'isonline', type: 'string', value:
31                            //value自定义函数,方便返回数据。
32                            function (currentfield) {
33                                return currentfield.isonline == true ? "在线" : "离线";
34                            }
35                     },
36                         //操作列定义type为opfield即可
37                     {
38                         name: 'opfield', type: 'opfield', value:
39                            function (currentfield) {
40                                return getTbodyOpButton((currentfield.isonline == true ? '关机' : '开机'), currentfield.deviceid);
41                            }
42                     }
43                 ];
44                 //定义onloading事件
45                 grid.onloading = function (currentfield) {
46                     //用变量来保存特殊数值,方便以后传输数据.
47                     device[currentfield.deviceid] = {
48                         port: currentfield.deviceport
49                     };
50                 };
51                 playingui.buildgrid(grid);
52             }
53         }
54     });
55 }

   //绑定分页
 1 function bindPage() {
 2     var options = {
 3         currentPage: 1,
 4         totalPages: jsonpagesize,
 5         onPageChanged: function(e, oldPage, newPage) {
 6             //调用绑定grid .这儿传入newpage方便在绑定grid的时候做分页的查询.
 7             bindGrid(newPage);
 8         }
 9     };
10     $tbodyPage.bootstrapPaginator(options);
11 }

这是一个非常轻量级的组建的(列表+分页),也没有一个一些大框架的笨重.兼容性还不错,推荐.

demo下载