强大的基于Bootstrap jQuery表格插件bootstrap-table

简单教程

1、在网页的head标签里插入下面的代码，这里使用CDN方式

<!-- 引入bootstrap和bootstrap-table样式 -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/bootstrap-table/1.12.1/bootstrap-table.min.css" rel="stylesheet">

<!-- jquery插件和Bootstrap,Bootstrap-table插件 -->
<script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-table/1.12.1/bootstrap-table.min.js"></script>
<!-- 如果要使用中文需要引入中文语言包，如下 -->
<script src="https://cdn.bootcss.com/bootstrap-table/1.12.1/locale/bootstrap-table-zh-CN.min.js"></script>

2、添加table标签

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

3、给表格加载数据，本示例提供两种方法
方法一、下面的示例是通过在table标签加入data-url属性，自动加载数据

<table data-toggle="table" data-url="data.json">
    <thead>
        <tr>
            <th data-field="id">序号</th>
            <th data-field="name">名称</th>
            <th data-field="price">价格</th>
        </tr>
    </thead>
</table>

方法二：使用Javascript脚本方式（推荐使用这种方式，这种方式使得代码阅读和扩展更为方便）示例如下：

$("#table").bootstrapTable({ // 对应table标签的id
      url: "/getData", // 获取表格数据的url
      cache: false, // 这里设置成false是为了禁用 AJAX 数据缓存， 如果不设置，服务端的数据如果发生变化，页面可能还是显示的老数据。默认为true
      striped: true,  //表格显示条纹，默认为false
      pagination: true, // 在表格底部显示分页组件，默认false
      pageList: [10, 20], // 设置页面可以显示的数据条数
      pageSize: 10, // 页面数据条数
      pageNumber: 1, //默认显示首页数据
      sidePagination: 'server', // 设置分页方式为服务器端分页
      queryParams: function (params) { // 请求服务器数据时发送的参数，可以在这里添加额外的查询参数，返回false则终止请求
          return {
              pageSize: params.limit, // 每页要显示的数据条数
              offset: params.offset, // 每页显示数据的开始行号
              sort: params.sort, // 要排序的字段
              sortOrder: params.order, // 排序规则
              dataId: $("#dataId").val() // 额外添加的参数
          }
      },
      sortName: 'id', // 要排序的字段
      sortOrder: 'desc', // 排序规则
      columns: [
          {
              checkbox: true, // 显示一个勾选框
              align: 'center' // 居中显示
          }, {
              field: 'code', // 返回json数据中的name
              title: '编号', // 表格表头显示文字
              align: 'center', // 左右居中
              valign: 'middle' // 上下居中
          }, {
              field: 'name',
              title: '名称',
              align: 'center',
              valign: 'middle'
          }, {
              field: 'calcMode',
              title: '计算方式',
              align: 'center',
              valign: 'middle',
              formatter: function (value, row, index){ // 单元格格式化函数
                  var text = '-';
                  if (value == 1) {
                      text = "方式一";
                  } else if (value == 2) {
                      text = "方式二";
                  } else if (value == 3) {
                      text = "方式三";
                  } else if (value == 4) {
                      text = "方式四";
                  }
                  return text;
              }
          }, {
              title: "操作",
              align: 'center',
              valign: 'middle',
              width: 160, // 定义列的宽度，单位为像素px
              formatter: function (value, row, index) {
                  return '<button class="btn btn-primary btn-sm" onclick="del(\'' + row.stdId + '\')">删除</button>';
              }
          }
      ],
      onLoadSuccess: function(){  //加载成功回调方法
            console.info("数据加载成功");
      },
      onLoadError: function(){  //加载失败回调方法
            console.info("数据加载失败");
      }
})

更多Bootstrap-table使用方法请参考官方文档：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/