BootStrap-Table基础使用记录

最近闲来无事就在和同事做一个公司内部自动化热饭小程序，搭建后台管理需要查看热饭用户列表，既然是列表也势必用到表格分页。按照很早之前的分页方法就会很繁琐，暂且不说服务端sql写一堆，就是连前端也需要根据服务端回传的pageData进行处理分页的页码按钮进行判断和输出。好在这种方法已经被淘汰，来到了新的时间点，这些分页时所需要的数据也都有了完美的分页工具、插件，它们能够帮助开发者提高开发效率，事半功倍，可以让开发者们把时间更多集中在业务层而不是再想以前那样为了一个分页投入过多精力！


笔者使用bootstratp-table进行分页，这是基于jQuery的一款分页表格框架，用法不是很难，官网有详细的API文档 bootstrap-table-API 。

首先在你需要表格的页面里输入一个表格标签，就像这样:

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

你没有看错就是这么简短的一行，除id是需要，其他的都可以不需要，标记id才可以标记它是唯一的，切记id一定取名是唯一的，不可以有其他的html标签id和此同名，否则就会找不到。

$(function () {
  // table列表初始化
  tableInit();
});

var $table;
var $heatTableForm;

//初始化bootstrap-table的内容
function tableInit() {
  $heatTableForm = $(".heat-table-form");
  var queryUrl = 'heatlist';
  $table = $('#heatTable').bootstrapTable({
    url: queryUrl,                     //请求后台的URL（*）
    method: 'GET',                     //请求方式（*）
    striped: false,                    //是否显示行间隔色
    pagination: true,                  //是否显示分页（*）
    paginationLoop: false,
    smartDisplay: false,		      //分页页码按钮一直展示，若设置为true：当数据达到规定数量才会展示按钮
    sortable: false,                  //是否启用排序
    sidePagination: "server",         //分页方式：client客户端分页，server服务端分页（*）
    pageNumber: 1,                    //初始化加载第一页，默认第一页,并记录
    pageSize: 10,                     //每页的记录行数（*）
    pageList: [10, 25],               //可供选择的每页的行数（*）
    minimumCountColumns: 2,           //最少允许的列数
    contentType: "application/x-www-form-urlencoded",
    clickToSelect: false,             //是否启用点击选中行
    uniqueId: "ID",                   //每一行的唯一标识，一般为主键列
    //得到查询的参数
    queryParams: function (params) {
      /*
      *这部分是表格查询的form表单，这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
      */
      var temp = {
        pageSize: params.limit,
        pageNum: params.offset / params.limit + 1,
        nickName: $heatTableForm.find("input[name='nickname']").val(),
        heatStatusValue: $heatTableForm.find("select[name='heat']").val(),
        zoneName: $heatTableForm.find("select[name='zone']").val()
      };
      return temp;
    },
    /*
    * 这部分看名字就可以知道了，这个部分就是你表格要展示的列名，切记field是必须要和你服务端回传的data的字段名一致。
    */
    columns: [
      {
        field: 'heatId',
        title: 'ID'
      }, {
        field: 'nickName',
        title: '昵称'
      }, {
        field: 'startTime',
        title: '热饭开始时间'
      }, {
        field: 'endTime',
        title: '热饭结束时间'
      }, {
        field: 'heatStatusName',
        title: '热饭状态'
      }, {
        field: 'zoneName',
        title: '所在区域'
      }],
    onLoadSuccess: function () {
    },
    onLoadError: function () {
      showTips("数据加载失败！");
    },
  });
};

/*
* 查询方法，当执行这个方法就会将表格查询的form传入queryParams中执行
*/
function search() {
  $("#heatTable").bootstrapTable('refresh');
}

/*
* 这里是笔者自己加入的一个重置查询方法，执行这个方法会将查询的form中的参数全部重置执行查询
*/
function reload() {
  $heatTableForm.find("input[name='nickname']").val('');
  $heatTableForm.find("select[name='heat']").val('');
  $heatTableForm.find("select[name='zone']").val('西区');
  $("#heatTable").bootstrapTable('refresh');
}