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>