参考链接1: 官网:http://bootstrap-table.wenzhixin.net.cn/zh-cn/home/ 开始使用:http://bootstrap-table.wenzhixin.net.cn/zh-cn/getting-started/ 文档:http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/ 参考链接2:https://www.cnblogs.com/wlandwl/p/bootstrap_table.html
1、第一步、首先,先将基本数据信息以table分页展示的出来。(即非弹出框分页的数据,以table分页的方式展示出来)。
1 <div style="width:100%; padding: 10px;">
2 <table id="tablewrap1"
3 data-toggle="table"
4 data-locale="zh-CN"
5 data-ajax="ajaxRequest"
6 data-single-select="true"
7 data-side-pagination="server" //服务端分页设置:在配置文件中设置分页方式为服务器分页。 分页方式:client客户端分页,server服务端分页(*)
8 data-striped="true" //设置为 true 会有隔行变色效果。
9 data-pagination="true" //是否支持分页
10 data-pagination-first-text="首页"
11 data-pagination-pre-text="上一页"
12 data-pagination-next-text="下一页"
13 data-pagination-last-text="末页" class="fline-show-when-ready"
14 data-show-jumpto="true">
15 <thead>
16 <tr>
17 <th data-field="id" data-formatter="idFormatter" data-width="40">xx编号</th>
18 <th data-field="name">xx名称</th>
19 <th data-field="code">xx性别</th>
20 <th data-field="accessType" data-formatter="formatAccessType">xx年龄</th>
21 <th data-field="versionTag">xx生日</th>
22 <th data-field="updateDate" data-formatter="formatDate">xx时间</th>
23 <th data-field="status" data-formatter="formatStatus">xx地址</th>
24 <th data-field="operate" data-formatter="opFormatter">xx操作</th>
25 </tr>
26 </thead>
27 </table>
28 </div>
2、第二步、先将基本数据信息以table分页展示的出来,使用的ajax将数据查询出来,在上面所示的table展示出来。
1 function ajaxRequest(params) {
2 var pageSize = params.data.limit;
3 var pageNum = params.data.offset/pageSize + 1;
4 index = params.data.offset + 1;
5 var sort = params.data.sort? params.data.sort : "id";
6 var order = params.data.order? params.data.order : "desc";
7 var datas;
8 var items;
9 $.ajax({
10 type:'POST',
11 url:'xxxAction!selectStudent.action?pageNum=' + pageNum + '&pageSize=' + pageSize,
12 dataType:'json',
13 async:true,
14 data:$('#searchForm').serialize(),
15 error: function(request, textStatus, errorThrown) {
16 fxShowAjaxError(request, textStatus, errorThrown);
17 },
18 success:function(data){
19 datas = data.result;
20 if(datas != null) {
21 count = datas.count;
22 }
23 items = datas.items?datas.items:[];
24 params.success({
25 total: count,
26 rows: items
27 });
28 params.complete();
29 }
30 });
31 }
3、第三步、第一步<th data-field="operate" data-formatter="opFormatter">xx操作</th> 可以使用如下的方法,点击xx操作的,然后可以弹出弹出框分页信息。
1 function opFormatter(value,row) {
2 var tmp="'"+row.code+"'";
3 var name="'"+row.name+"'";
4 return '<a href="javascript:void(0)" onclick="getxxxDetails('+tmp+","+name+')">点击弹出框分页</a>';
5 }
6
7 如下是弹出框的确定和关闭。
8 function getxxxDetails(code,name){
9 $("#tablewrap2").bootstrapTable("selectPage",1);
10 initCatalogTable(code);
11 $("#tenantCatalogTablediv").dialog({
12 title : name+"xxx",
13 width : "900",
14 'class' : "mydialog",
15 onClose : function() {
16 $(this).dialog("close");
17 }
18 ,buttons : {
19 "关闭" : function() {
20 $(this).dialog("close");
21 }
22 }
23 });
24 }
4、第四步、弹出框分页的table如下所示。
1 <div style="display: none;">
2 <div style="width: 850; padding-top: 8px;" align="left" id="tenantCatalogTablediv" >
3 <table id="tablewrap2"
4 data-toggle="table"
5 data-locale="zh-CN"
6 data-single-select="true"
7 data-click-to-select="false"
8 data-side-pagination="client" //服务端分页设置:在配置文件中设置分页方式为服务器分页。 分页方式:client客户端分页,server服务端分页(*)
9 data-striped="true"
10 data-pagination="true"
11 data-pagination-first-text="首页"
12 data-pagination-pre-text="上一页"
13 data-pagination-next-text="下一页"
14 data-pagination-last-text="末页"
15 >
16 <thead>
17 <tr>
18 <th data-field="url" data-formatter="paramsMatter">xx地址</th>
19 <th data-field="resultCode" >xx姓名</th>
20 <th data-field="resultMsg" data-formatter="paramsResultMsgr">xx性别</th>
21 <th data-field="createTime" data-formatter="formatDate">xx年龄</th>
22 </tr>
23 </thead>
24 </table>
25 </div>
26 </div>
5、第五步、第四步弹出框分页的table使用如下ajax加载出数据。进行Bootstrap Table 数据绑定。
1 function initCatalogTable(code){
2 $.ajax({
3 type : "POST",
4 url : 'xxxAction!selectTeacher.action',
5 data : {'code' : code},
6 async : false,
7 error : function(request, textStatus,errorThrown) {
8 fxShowAjaxError(request, textStatus,errorThrown);
9 },
10 success : function(data) {
11 data=data.result;
12 if(data==null){
13 $("#tablewrap2").bootstrapTable('load', []);
14 return;
15 }
16 $('#tablewrap2').bootstrapTable('load', data);
17 }
18 });
19 }
待续......