拼接表：换下：换下
bootstrap.css jquery-1.12.3.min.js bootstrap-paginator.min.js”
<！doctype html> <html> <head lang =“ zh-cn”> <title> < /title> < /title> <meta charset =“ utf-” /> <meta http-equiv =“ x-ua compatible” x-ua-compatible“ content =” content =“ ie = edge，chrome =” /> <link href =“ ../ bsframework./css/bootstrap.css” rel =“ stylesheet” type =“ text/css”/> <srips src =“ ../ bsframework./js/jquery-js/jquery-...min..min..min.js.min.js src =“ ../ bsframework./bootstrap-paginator.min.js"> </script> <script> '', 'CurrentPage': '', 'list': [{ 'Id': '', 'Name': 'ddd', 'Message': 'vvvvvv' }, { 'Id': '', 'Name': 'ddee', 'Message': 'vvvvvv'}] }var data = JSON.stringify(data);if (data != null) {$（“＃list”）。附录（'<table ID =“ data_table”> <thead> <tr> <tr> <tr> </th> </th> <th> </th> </th> <th> <th> </th> </th> <th> item）{$（“＃list tbody”）。 '）;“>删除</butt> </td> <td>' + item.message +'</td> </tr>'）;}）; var pageCount = est = est = 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;}}, onPageClicked: function (event, originalEvent, type, page) {$ .ajax（{url：“ ccccc？id =” + page，type：“ post”，data，data：“ page =” + page，error：function（data）{$（“＃list”）。childris（）。 'vvvvvvv'}，{'id'：''，'name'：'ddee'，'sagess'：'vvvvvvv'}]} var data = json.stringify（data）; $（$ list）。append（'<table） id =“ data_table”> <thead> <tr> <tr> id </th> <th> </th> </th> <th> </th> </th> </th> </th> <th> {$（“＃list tbody”）。append（'<tr> <td>' + item.Id +'</td> <td> <td>' + item.name +'</td> <td> <td> <button onclick =“ edit（'edit（' + item.id.id +'） '）;“>删除</button> </td> <td>' + item.message +'</td> </tr>'）;}）;}}}}}}}}}}}}; $（'＃example'）。boottrappaginator（option） /> <div id =“ list”> </div> <ul id =“ example”> </ul> </div> <table> <trag> <tr> <td> <td> </td> <td> <td> tb-每月</td> <td> <td> // </td> <td> <td>每月</td> <td> // </td> <td>批准</td> </tr> </table> <div> </div> </div> </div> </body> </hod> </html>结果
注意
1，bootstrap3分页器iD＃示例的必须是ul标签，2，在js中选项中bootstrapmajorversion：3
1，bootstrap2分页器iD #xample的必须是div标签
分页源码中说明：
延伸说明
上面我是拼接的表格，你可以拼接成栅格布局，是不是更吊？
拼接栅格示范
$.。 src =“ ../ uploadfiles/' + item.picurl +'“> </img> </a> <div> <h> <h> <a href =“ javascript：return（return（return（）” target =“ _ black”>'_ + item.title + title +'<br> <br> <br> <br> <br> <small> <small> by @mdo </small> </small> </small> </small> </small> </ item.detail.substring（，）） +'</p> </div> </div> </div> </div>'）}）}）;
后台获取的数据格式
{“ pageCount”：2，“ CurrentPage”：1，“ list”：[{“ ID”：23，“标题”：“”：“印刷业治安管理信息系统”，“详细信息”：“ Zl 22222222，提升工作品质。，提升工作品质。”}，{“ ID”：“ ID”：20，“：20，”标题“以上所述是小编给大家介绍的bootstrap表格和栅格分页实例详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持！，小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持！