用bootstrap_table实现html 表格翻页
发布时间:2020-12-17 20:47:03 所属栏目:安全 来源:网络整理
导读:资料网址 百度经验:HTML表格分页,table分页怎么做? 官网(下载链接和官方教程) (右上角可选语言) 以下内容基本摘自官网 用法 1.下载资料 官网下载: 下下来长这样: 其中src里面是源码,主要用到bootstrap-table.css bootstrap-table.js 和local文件夹
资料网址百度经验:HTML表格分页,table分页怎么做? 用法1.下载资料官网下载: 下下来长这样: 其中src里面是源码,主要用到bootstrap-table.css & bootstrap-table.js 和local文件夹中对应当地语言的文件,比如中文: bootstrap-table-zh-CN.js 2. 引用js和css引入 Bootstrap 库(假如你的项目还没有使用)和 <link rel="stylesheet" href="bootstrap.min.css"> <link rel="stylesheet" href="bootstrap-table.css"> 引入 jQuery 库,bootstrap 库(假如你的项目还没有使用)和 <script src="jquery.min.js"></script> <script src="bootstrap.min.js"></script> <script src="bootstrap-table.js"></script> <-- put your locale files after bootstrap-table.js --> <script src="bootstrap-table-zh-CN.js"></script> 3. 加入代码通过 data 属性的方式无需编写 JavaScript 启用 bootstrap table,我们对普通的 table 设置 <table data-toggle="table"> <thead> <tr> <th>Item ID</th> <th>Item Name</th> <th>Item Price</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Item 1</td> <td>$1</td> </tr> <tr> <td>2</td> <td>Item 2</td> <td>$2</td> </tr> </tbody> </table> 我们也可以通过设置远程的 url 如 <table data-toggle="table" data-url="data1.json"> <thead> <tr> <th data-field="id">Item ID</th> <th data-field="name">Item Name</th> <th data-field="price">Item Price</th> </tr> </thead> </table> 通过 JavaScript 的方式通过表格 id 来启用 bootstrap table。 <table id="table"></table> $(‘#table‘).bootstrapTable({ columns: [{ field: ‘id‘,title: ‘Item ID‘ },{ field: ‘name‘,title: ‘Item Name‘ },{ field: ‘price‘,title: ‘Item Price‘ }],data: [{ id: 1,name: ‘Item 1‘,price: ‘$1‘ },{ id: 2,name: ‘Item 2‘,price: ‘$2‘ }] }); 我们也可以通过设置远程的 url 如 $(‘#table‘).bootstrapTable({ url: ‘data1.json‘,columns: [{ field: ‘id‘,title: ‘Item Price‘ },] }); (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |