拼接 Tableau 请将以下代码直接运行 ： 换下
bootstrap.css jquery-1.12.3.min.js bootstrap-paginator.min.js "
<! Doctype html> <html> <head lang = "zh-cn"> <ititle> 产品列表 </ title> <meta charset = "utf-" /> <meta http-equiv = "x-ua-compatible" contenu = "ie = edge, chrome =" /> <meta name = "Viewport" contenu = "width = device-width, initial-Scale =." /> <link href = "../ bsframework./css/bootstrap.css" rel = "stylesheet" type = "text / css" /> <script src = "../ bsframework./js/jquery-...min.js" type = "Text / javascrip src = "../ bsframework./bootstrap-paginator.min.js"></script><script> '', 'Currentpage': '', 'list': [{'id': '', 'name': 'ddd', 'message': 'vvvvvv'}, {'id': '', 'name': 'ddee', 'message': 'vvvvv'}]} var data = json. {$ ("# list"). append ('<table id = "data_table"> <thead> <tr> <th> id </th> <th> 部门名称 </th> <th> 备注 </th> <th> neirong </th> </tr> </thead> <tody> </tbody> </pally>'); {$ ("# list tbody"). append ('<tr> <td>' + item.id + '</td> <td>' + item.name + '</td> <td> <bouton onclick = "edit (' + item.id + ');"> 修改 </ / bouton> <bouton OnClick = "Delete (' + item.id + '); "> 删除 </futton> </td> <td>' + item.message + '</td> </tr>');}); var pageCount = evale TotalPages: PageCount, itemTexts: fonction (type, page, actuel) {switch (type) {case "premier": return "首页"; case "prev": return "上一页"; case "next": return "下一页"; case "dernier": return "末页"; case "page": return page;}}, onpageclicked: function (event, originalevent, type, page, page) {$.ajax({url: "ccccc?id=" + page,type: "Post",data: "page=" + page,error: function (data) {$("#list").children().remove();var data = { 'pageCount': '', 'CurrentPage': '', 'list': [{ 'Id': '', 'Name': 'ddd', 'Message': 'vvvvvv'}, {'id': '', 'name': 'ddee', 'message': 'vvvvvv'}]} var data = json.stringify (data); $ ("# list"). id = "data_table"> <thead> <tr> <th> id </th> <th> 部门名称 </th> <th> 备注 </th> <th> neirong </th> </tr> </thead> <tbody> </tody> </s table> '); if (data! = null) {$ .each (eval ("+ data +").). {$ ("# list tbody"). append ('<tr> <td>' + item.id + '</td> <td>' + item.name + '</td> <td> <bouton onclick = "edit (' + item.id + ');"> 修改 </ / bouton> <bouton OnClick = "Delete (' + item.id + '); "> 删除 </futton> </td> <td>' + item.message + '</td> </tr>');});}}});}}; $ ('# Exemple'). Bootstrappaginator (Options);}}});}) </cript> </-head> id = "list"> </ div> <ul id = "example"> </ul> </ div> <s table> <tr> <td> </td> <td> TB - Monthly </td> <Td> // </td> <td> Approuvé </td> </ tr> <tr> <td> </td> <td> TB - Monthly </td> <td> // </td> <td> approuvé </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, function (index, item) {$ ("# list"). append ('<div data-toggle = "modal" data-target = "# mymodal" style = "text-align: Center;"> <div style = "height: px;"> <a href = "javascript: return ()"> <img src = "../ uploadFiles / '+ item.picurl +'"> </img> </a> <v> <h> <a href = "javascript: return ()" cible = "_ Blank"> '+ item.title +' <br> <ball> par @mdo </small> </a> </h> <p> '+ (item.Detail =. item.detail.substring (,)) + '</p> </div> </div> </div>')});后台获取的数据格式
{"PageCount": 2, "currentpage": 1, "list": [{"id": 23, "title": "印刷业治安管理信息系统", "détail": "专利号 ： Zl 222222 高工作效率 ， ， 提升工作品质。"}, {"id": 20, "titre": "重点单位来访人员管理系统", "Détail": "专利号 gnel 233 形 ， ， 提高工作效率 ， ， 提升工作品质。 提升工作品质。}以上所述是小编给大家介绍的 bootstrap 表格和栅格分页实例详解 ， 希望对大家有所帮助 ， 如果大家有任何疑问请给我留言 ， 小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持！