Bootstrap:表格和栅格分页
2016-05-18 19:30
429 查看
拼接table请将以下代码直接运行:换下
bootstrap.css
jquery-1.12.3.min.js
bootstrap-paginator.min.js"
<!DOCTYPE html> <html> <head lang="zh-cn"> <title>产品列表</title> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link href="../bsframework3.0/css/bootstrap.css" rel="stylesheet" type="text/css" /> <script src="../bsframework3.0/js/jquery-1.12.3.min.js" type="text/javascript"></script> <script type="text/javascript" src="../bsframework3.0/bootstrap-paginator.min.js"></script> <script> $(function () { var index = 1; $.ajax({ url: "xxxx/fun", datatype: 'json', type: "Post", data: "id=" + index, error: function (data) { var data = { 'pageCount': '11', 'CurrentPage': '3', 'list': [{ 'Id': '1', 'Name': 'ddd', 'Message': 'vvvvvv' }, { 'Id': '3', 'Name': 'ddee', 'Message': 'vvv222vvv'}] } var data = JSON.stringify(data); if (data != null) { $("#list").append('<table id="data_table" class="table table-bordered"><thead><tr class="success"><th>Id</th><th>部门名称</th><th>备注</th><th>neirong</th></tr></thead><tbody></tbody></table>'); $.each(eval("(" + data + ")").list, function (index, item) { $("#list tbody").append('<tr class="success"><td>' + item.Id + '</td><td>' + item.Name + '</td><td><button class="btn btn-small btn-primary" onclick="Edit(' + item.Id + ' );">修改</button><button class="btn" onclick="delete(' + item.Id + ');">删除</button></td><td>' + item.Message + '</td></tr>'); }); var pageCount = eval("(" + data + ")").pageCount; var currentPage = eval("(" + data + ")").CurrentPage; var options = { bootstrapMajorVersion: 3, currentPage: currentPage, totalPages: pageCount, itemTexts: function (type, page, current) { switch (type) { case "first": return "首页"; case "prev": return "上一页"; case "next": return "下一页"; case "last": return "末页"; case "page": return page; } }, onPageClicked: function (event, originalEvent, type, page) { $.ajax({ url: "ccccc?id=" + page, type: "Post", data: "page=" + page, error: function (data1) { $("#list").children().remove(); var data1 = { 'pageCount': '11', 'CurrentPage': '3', 'list': [{ 'Id': '1', 'Name': 'ddd', 'Message': 'vvvvvv' }, { 'Id': '3', 'Name': 'ddee', 'Message': 'vvv222vvv'}] } var data1 = JSON.stringify(data1); $("#list").append('<table id="data_table" class="table table-bordered"><thead><tr class="success"><th>Id</th><th>部门名称</th><th>备注</th><th>neirong</th></tr></thead><tbody></tbody></table>'); if (data1 != null) { $.each(eval("(" + data + ")").list, function (index, item) { $("#list tbody").append('<tr class="success"><td>' + item.Id + '</td><td>' + item.Name + '</td><td><button class="btn" onclick="Edit(' + item.Id + ' );">修改</button><button class="btn" onclick="delete(' + item.Id + ');">删除</button></td><td>' + item.Message + '</td></tr>'); }); } } }); } }; $('#example').bootstrapPaginator(options); } } }); }) </script> </head> <body> <div> <label>数据列表</label> <hr /> <div id="list"></div> <ul id="example"></ul> </div> <table class="table table-condensed"> <tr class="success"> <td>1</td> <td>TB - Monthly</td> <td>01/04/2012</td> <td>Approved</td> </tr> <tr class="success"> <td>1</td> <td>TB - Monthly</td> <td>01/04/2012</td> <td>Approved</td> </tr> </table> <div></div> </body> </html>
结果
![](https://images2015.cnblogs.com/blog/607624/201605/607624-20160518191341935-1764714766.png)
注意
1,bootstrap3 分页器id为#example的必须是 ul标签,2,在js中option中bootstrapMajorVersion :31,bootstrap2 分页器id为#example的必须是 div标签,2,在js中option中bootstrapMajorVersion :2
分页源码中说明:
![](https://images2015.cnblogs.com/blog/607624/201605/607624-20160518191757888-1654028869.png)
延伸说明
上面我是拼接的表格,你可以拼接成栅格布局,是不是更吊?拼接栅格示范
$.each(eval("(" + data + ")").list, function (index, item) { $("#list").append('<div class="col-sm-6 col-md-4" data-toggle="modal" data-target="#myModal" style="text-align:center;"><div class="thumbnail" style="height: 358px;"><a href="javascript:return(0)"><img src="../UploadFiles/' + item.picurl + '" width="300" height="150" ></img></a><div class="caption"><h3><a href="javascript:return(0)" target="_blank">' + item.title + '<br><small>by @mdo</small> </a></h3><p>' + (item.detail == null ? "没有对应描述" : item.detail.substring(0, 30)) + '</p></div></div></div>') });
后台获取的数据格式
{ "pageCount": 2, "CurrentPage": 1, "list": [ { "id": 23, "title": "印刷业治安管理信息系统", "detail": "专利号:ZL 222222高工作效率,提升工作品质。" }, { "id": 20, "title": "重点单位来访人员管理系统", "detail": "专利号:ZL 233形,提高工作效率,提升工作品质。" } ] }
相关文章推荐
- BootStrap的使用文档
- Bootstrap教程JS插件滚动监听学习笔记分享
- Bootstrap的Carousel不能正常播放的几个原因
- PHP + bootstrap modal + jQuery实现页面刷新
- bootstrap框架
- 学习小记 bootstrap datetimepicker
- Java NIO框架Netty教程(四) – ServerBootStrap启动流程源码分析
- Bootstrap教程JS插件滚动监听学习笔记分享
- 零基础学习前端-从bootstrap开始(一)
- JS组件系列——表格组件神器:bootstrap table
- Bootstrap教程JS插件弹出框学习笔记分享
- Bootstrap组件学习之导航、标签、面包屑导航(精品)
- BootStrap的alert提示框的关闭后再显示怎么解决
- Bootstrap静态cdn
- 基于Bootstrap3表格插件和分页插件实例详解
- Bootstrap table 服务器端分页示例
- 基于bootstrap3的 表格和分页的插件
- Bootstrap carousel轮转图的使用实例详解
- bootstrap--栅格系统
- Bootstrap打造一个左侧折叠菜单的系统模板(一)