由于分页的功能均是与服务端进行交互，在静态页面中仅能展示具体代码进行讲解，因此本页面中无法进行实际功能的展示
页面跳转模式 每次分页操作都是加载新的页面
| 选择 | 登录名 | 姓名 | 性别 | 出生年月 | 电话 | 电子邮箱 | 状态 | 更新时间 |
|---|---|---|---|---|---|---|---|---|
| ${d.login_name} | ${d.name} | ${d.sexName} | ${d.birthday} | ${d.phone1} | ${d.email} | ${d.statusName} | ${d.update_time} |
由于是静态展示页，插件的实际分页功能没有服务端程序进行支撑，分页效果无法展现
HTML内容处理
页面的部分需要以传统的动态页面的方式进行渲染表格内部的数据，而数据则在加载页面前的服务端已提供，渲染表格数据的同时需要对分页数据也进行生成，以便插件在初始化时获取分页信息数据
<!-- HTML代码、服务端内容填充 --> <table class="table table-striped table-bordered table-hover table-condensed"> <thead> <tr> <th class="selectColumn" >选择</th> <th>登录名</th> <th>姓名</th> <th>性别</th> <th>出生年月</th> <th>电话</th> <th>电子邮箱</th> <th>状态</th> <th>更新时间</th> </tr> </thead> <tbody> <tr> <td class="selectColumn"><input type="radio" name="userSelect" value="$ {d.id}" /></td> <td>$ {d.login_name}</td> <td>$ {d.name}</td> <td>$ {d.sexName}</td> <td>$ {d.birthday}</td> <td>$ {d.phone1}</td> <td>$ {d.email}</td> <td>$ {d.statusName}</td> <td>$ {d.update_time}</td> </tr> </tbody> </table> <!-- 生成分页数据内容，必须设置 --> <c:if test="${userList != null}"> <input type="hidden" id="pageNumber" value="$ {userList.pageNumber}"> <input type="hidden" id="pageSize" value="$ {userList.pageSize}"> <input type="hidden" id="totalPage" value="$ {userList.totalPage}"> <input type="hidden" id="totalRow" value="$ {userList.totalRow}"> </c:if> <!-- 分页栏 --> <div id="page1"></div>
javascript处理
//javascript初始化 $('#page1').bPage({ //页面跳转的目标位置 url : $webroot + 'demo/manage/page', //分页数据设置 totalPage : $('#totalPage').val(), totalRow : $('#totalRow').val(), pageSize : $('#pageSize').val(), pageNumber : $('#pageNumber').val(), //页面跳转时需要同时传递给服务端的自定义参数设置 params : function(){ return { userName : 'zhangsan', age : 42 }; } });
异步加载模式（服务端返回页面模式） 必须在服务端已准备好对业务数据，分页数据进行渲染页面
由于是静态展示页，插件的实际分页功能没有服务端程序进行支撑，分页效果无法展现
HTML部分处理
这里不再贴出服务端渲染业务数据、分页数据的页面内容，内容与上文中提到的页面跳转模式的HTML处理部分类似，区别在于这部分内部被提取到单独的页面，根据业务的需要，也许业务数据渲染的页面会被多个场景所使用
注意 分页字段的存放，尽可能放在页面的根级，若放在较深的层级，程序或将读取不到分页数据内容
<!-- HTML代码、服务端内容填充 --> <div id="pageContent"></div> <div id="page2"></div>
javascript部分处理
//javascript初始化 $('#page2').bPage({ //链接指向服务端用于返回数据渲染页面的位置 url : $webroot + 'demo/manage/pageLoad', //开启异步处理模式 asyncLoad : true, //服务端页面处理模式 serverSidePage : true, //页面填充目标区域，支持jquery表达式 asyncTarget : '#pageContent', params : function(){ return { userName : 'zhangsan', age : 42 }; } });
异步加载模式（服务端返回JSON数据模式） 最灵活的分页方式，可使用数据根据业务场景进行定制处理
| 选择 | 登录名 | 姓名 | 性别 | 出生年月 | 电话 | 电子邮箱 | 状态 | 更新时间 |
|---|
由于是静态展示页，插件的实际分页功能没有服务端程序进行支撑，分页效果无法展现
HTML部分设置
在数据模式下，通常只需要设置表格的主体结构，数据填充的部分在tbody中进行处理即可，所以这里仅留一个空的tbody
<!-- HTML代码、服务端内容填充 --> <div> <!-- 定义表格框架 --> <table id="dataGridTableJson" class="table table-striped table-bordered table-hover table-condensed"> <thead> <tr> <th class="selectColumn" >选择</th> <th>登录名</th> <th>姓名</th> <th>性别</th> <th>出生年月</th> <th>电话</th> <th>电子邮箱</th> <th>状态</th> <th>更新时间</th> </tr> </thead> <tbody> </tbody> </table> </div> <div id="page3"></div>
服务端返回的json数据内容
{ "pageSize": 10, "pageNumber": 1, "totalRow": 11, "totalPage": 2 "list": [ { "expert": "计算机网络", "birthday": "2014-11-12", "sex": 1, "status": 1, "remark": "asdfasdfsdf", "sexName": "男", "statusName": "启用", "phone2": "13777777777", "password": "e10adc3949ba59abbe56e057f20f883e", "phone1": "13655555555", "id": 1, "update_time": "2014-11-24 15:50:22", "email": "aaa@aa.com", "login_name": "zhangsan", "name": "张三", "create_time": "2014-09-08 16:22:01", "qq": "44444444" }, { "expert": "计算机网络1", "birthday": "2014-11-03", "sex": 0, "status": 1, "remark": "124312431", "sexName": "女", "statusName": "启用", "phone2": "1234123421", "password": "", "phone1": "1241342341431", "id": 5620, "update_time": "2014-11-24 13:37:58", "email": "341431@aa.comn", "login_name": "lisi", "name": "李四", "create_time": "2014-09-08 22:24:05", "qq": "34124121" } ] }
javascript处理部分
对于数据的处理将在render回调函数中进行处理
//javascript初始化 $('#page3').bPage({ url : $webroot + 'demo/manage/pageLoadJson', //开启异步处理模式 asyncLoad : true, //关闭服务端页面模式 serverSidePage : false, //数据自定义填充 render : function(data){ var tb = $('#dataGridTableJson tbody'); $(tb).empty(); if(data && data.list && data.list.length > 0){ $.each(data.list,function(i,row){ var tr = $('<tr>'); $(tr).append('<td></td>'); $(tr).append('<td>'+row.login_name+'</td>'); $(tr).append('<td>'+row.name+'</td>'); $(tr).append('<td>'+row.sexName+'</td>'); $(tr).append('<td>'+row.birthday+'</td>'); $(tr).append('<td>'+row.phone1+'</td>'); $(tr).append('<td>'+row.email+'</td>'); $(tr).append('<td>'+row.statusName+'</td>'); $(tr).append('<td>'+row.update_time+'</td>'); $(tb).append(tr); }); } }, params : function(){ return { userName : 'zhangsan', age : 42 }; } });