拼接 Tabelle 请将以下代码直接运行 ： 换下
Bootstrap.css JQuery-1.12.3.Min.js Bootstrap-Paginator.min.js "
<! DocType html> <html> <head Lang = "zh-cn"> <title> 产品列表 < /title> <meta charset = "utf-" /> <meta http-äquiv = "x-ua-compatible" content = "ie edge, chrome =" /> <meta-name = "viewPort". /><link href="../bsframework./css/bootstrap.css" rel="stylesheet" type="text/css" /><script src="../bsframework./js/jquery-...min.js" type="text/javascript"></script><script type="text/javascript" src = "../ bsframework./bootstrap-paginator.min.js"></Script><Script>$(function () {var index =; '', 'CurrentPage': '', 'list': [{'id': '', 'name': 'ddd', 'message': 'vvvvvv'}, {'id': '' {$ ("#list"). append ('<table id = "data_table"> <thead> <tr> <Th> id </th> <th> 部门名称 </th> <th> 备注 </th> <Th> neirong </th> </tr> </thead> <tbody> </tbody> </table>'); oder '); "> 删除 </button> </td> <td>' + item.message + '</td> </tr>');}); var pagecount = eval (" (" + data +"). 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;} {$ .ajax ({url: "ccccc? id =" + page, type: "post", data: "page =" + page, fehler: function (data) {$ ("#list"). childhes (). remove (); var data = {'pageCount': ' 'vvvvvv'}, {'id': '', 'name': 'ddee', 'meldung': 'vvvvvv'}]} var data = json.stringify (data); $ ("#list"). append ('< id = "data_table"> <thead> <tr> <th> id </th> <th> 部门名称 </th> <th> 备注 </th> <Th> neirong </th> </tr> </thead> <tbody> </tbody> </table>); if (Data! = Null) {$. oder '); "> 删除 </button> </td> <td>' + item.message + '</td> </tr>');});}}});}}; id="list"></div><ul id="example"></ul></div><table><tr><td></td><td>TB - Monthly</td><td>//</td><td>Approved</td></tr><tr><td></td><td>TB - Monatlich </td> <td> // </td> <td> zugelassen </td> </tr> </table> <div> </div> </body> </html>结果
注意
1 ， bootstrap3 分页器 id 为 #example 的必须是 ul 标签 ， 2 ， 在 JS 中 Option 中 Bootstrapmajorversion: 3
1 ， Bootstrap2 分页器 id 为 #example 的必须是 div 标签 ， 2 ， 在 js 中 Option 中 Bootstrapmajorversion: 2
分页源码中说明 ：
延伸说明
上面我是拼接的表格 ， 你可以拼接成栅格布局 ， 是不是更吊?
拼接栅格示范
$ .each (eval ("(" + data + ")"). List, Funktion (Index, Element) {$ ("#list"). append ('<div data-toggle = "modal" data-target = "#myModal" style = "text-Align: center;"> <div style = "height: px; src = "../ UploadFiles/' + item.picUrl +'"> </img> </a> <div> <h> <a href = "javaScript: return ()" target = "_ leer"> ' + item.title +' <br> <Br> <Br> <Br> <Br> <Br> <Br> <Br> <Br> <Br> <Be -Items. item.Detail.substring (,)) + '</p> </div> </div> </div>')});后台获取的数据格式
{"pageCount": 2,"CurrentPage": 1,"list": [{"id": 23,"title": "印刷业治安管理信息系统","detail": "专利号：ZL 222222高工作效率，提升工作品质。"},{"id": 20,"title": "重点单位来访人员管理系统","detail": "专利号：ZL 233形，提高工作效率，提升工作品质。"}]}以上所述是小编给大家介绍的 Bootstrap 表格和栅格分页实例详解 ， 希望对大家有所帮助 ， 如果大家有任何疑问请给我留言 ， 小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持！ 小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持！