参考链接1:
    官网:IT虾米网
        开始使用:IT虾米网
        文档:IT虾米网
    参考链接2:IT虾米网

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)" οnclick="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 }

待续......


发布评论
IT序号网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

JAVA学习绘图颜色及其笔画属性设置字体显示文字知识解答
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。