bootstrap-table使用

bootstrap-table

开始

介绍：http://bootstrap-table.wenzhixin.net.cn/zh-cn/
项目地址：https://github.com/wenzhixin/bootstrap-table/
文档：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/

使用

引用库

<link rel="stylesheet" href="bootstrap.min.css"><link rel="stylesheet" href="bootstrap-table.css">

<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>

通过JavaScript方式

<table id="table"></table>

  <script>      $(function () {          IntiTable();      });      function IntiTable() {          $('#table').bootstrapTable({              url: 'data/response.json',              sortName: 'id',              sortOrder: 'asc',              pagination: true,   //设置为 true 会在表格底部显示分页条              sidePagination:'client',    //设置在哪里进行分页，可选值为 'client' 或者 'server'。              pageList:[10,20,50,100,500],    //如果设置了分页，设置可供选择的页面数据条数。设置为All 则显示所有记录。              pageSize:20,    //如果设置了分页，页面数据条数              pageNumber:1,   //如果设置了分页，首页页码              columns: [{                  field: '',                  checkbox: true              }, {                  field: 'id',                  title: 'Item ID'              }, {                  field: 'name',                  title: 'Item Name'              }, {                  field: 'price',                  title: 'Item Price'              }, ]          });      }  </script>

以上代码效果如下：

通过 data 属性的方式

无需编写 JavaScript 启用 bootstrap table，我们对普通的 table 设置 data-toggle="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 如 data-url="data1.json" 来加载数据

<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>