拼接表：換下：換下
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表格和柵格分頁實例詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！ ，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！