拼接テーブル请将以下代码直接运行:换下
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": "重点单位来访人员管理系统"、 "以上所述是小编给大家介绍的ブートストラップ表格和栅格分页实例详解、希望对大家有所帮助、如果大家有任何疑问请给我留言、小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持!