拼接テーブル请将以下代码直接运行：换下
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-equiv = "x-ua互換" content = "ie = edge、chrome =" /> <meta name = "content" /> <link href = "../ bsframework./css/bootstrap.css" rel = "styleSheet" type = "text/css"/> <script src = "../ bsframework./js/jquery-...min.js" type = "text/javascript"> </script> <scrip> <fruct> <fruct> src = "../ bsframework./bootstrap-paginator.min.js"> </script> <script> $(function（）{var index =; $。ajax（{url：" xxxx/fun "、datatype： 'json'、type：" post "、データ： ''、 'currentPage'： '' '、' list '：[{' id ''： ''、 'name'： 'ddd'、 'message'： 'vvvvvv'}、{'id'： ''、 'name'： 'ddee'、 'message'： 'vvvvvvv'}]} {$（ "＃list"）。append（ '<table id = "data_table"> <thead> <th> <th </th> <th </th> <th> { $("#list tbody").append('<tr><td>' + item.Id + '</td><td>' + item.Name + '</td><td><button onclick="Edit(' + item.Id + ' );">修改</button><button onclick="delete(' + item.Id + '）; ">删除</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 "上一页"上一页 "next"：return "下一页"; case "; case"; {$ .ajax（{url： "ccccc？id =" + page、type： "post"、data： "page =" + page、error：function（data）{$（ "＃list"）。 '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> </tr> </thead> <tody> </tbody> </table> '）; {$("#list tbody").append('<tr><td>' + item.Id + '</td><td>' + item.Name + '</td><td><button onclick="Edit(' + item.Id + ' );">修改</button><button onclick="delete(' + item.Id + '）; ">删除</button> </td> <td>' + item.message + '</td> </tr>'）;};}}} id = "list"> </div> <ul id = "example"> </ul> </div> <table> <tr> <td> </td> <td> tb -monthle </td> <td> // </td> <td>毎月</td> <td> // </td> <td>承認</td> </tr> </table> <div> </div> </body> </html>结果
注意
1、bootstrap3分页器id
1、bootstrap2分页器id
分页源码中说明：
延伸说明
上面我是拼接的表格、你可以拼接成栅格布局、是不是更吊？
拼接栅格示范
$ .each（eval（ "（" + data + "）"）。リスト、function（index、item）{$（ "＃list"）。 + item.picurl + '"> </img> </a> <div> <h> <a href =" javascript：return（） "ターゲット=" _ blank ">' + item.title + '<br> <small> '</p> </div> </div> </div>'）}）;后台获取的数据格式
{"pagecount"：2、 "currentPage"：1、 "list"：[{"id"：23、 "title"： "印刷业治安管理信息系统"、 "detail"： "专利号："专利号： "专利号： '专利号：zl 222222高工作效率、提升工作品质。"}、{"id"：20、 "title"： "重点单位来访人员管理系统"、 "以上所述是小编给大家介绍的ブートストラップ表格和栅格分页实例详解、希望对大家有所帮助、如果大家有任何疑问请给我留言、小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持！