SpringMVC+bootstrap table实例详解

bootstrap-table下载地址：

先来看一张效果图：

下载下来后，需要导入的css：由于需要bootstrap的支持，所以需要导入bootstrap的css

<!-- bootstrap --> 
<link href="${contextpath }/static/bootstrap/css/bootstrap.min.css" rel="external nofollow"  
  rel="stylesheet"> 
<link href="${contextpath }/static/bootstrap/table/bootstrap-table.css" rel="external nofollow"  
  rel="stylesheet"> 

需要导入的js：除了bootstrap的js跟table的js外第一个要导入的就是jquery的js，他们都是基于jquery开发的

<!-- jquery (necessary for bootstrap's javascript plugins) --> 
  <script src="${contextpath }/static/jquery/jquery.min.js"></script> 
  <!-- include all compiled plugins (below), or include individual files as needed --> 
  <script src="${contextpath }/static/bootstrap/js/bootstrap.min.js"></script> 
  <script src="${contextpath }/static/bootstrap/table/bootstrap-table.js"></script> 
  <script src="${contextpath }/static/bootstrap/table/locale/bootstrap-table-zh-cn.js"></script> 

bootstrap-table-zh-cn.js这个js是用来汉化table的提示文字的，在下载下来的bootstrap-table文件夹下的locale文件夹中有很多的语言包支持

完啦，我们只需要在html页面中声明一个table跟菜单div(如果不需要，可以不声明)就好：

<div class="container-fluid"> 
    <div id="toolbar" class="btn-group"> 
      <button id="btn_add" type="button" class="btn btn-default"> 
        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增 
      </button> 
      <button id="btn_edit" type="button" class="btn btn-default"> 
        <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改 
      </button> 
      <button id="btn_delete" type="button" class="btn btn-default"> 
        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除 
      </button> 
      <button id="btn_info" type="button" class="btn btn-default"> 
        <span class="fa fa-info" aria-hidden="true"></span>详情 
      </button> 
    </div> 
    <table id="table_sysuser"></table> 
  </div> 

table_sysuser就是我们要显示的table列表啦。

我们来看看js怎么来请求后台的数据，并进行分页跟查询：

//项目根目录 
var path = $("#contextpath").val(); 
$(document).ready(function() { 
  //初始化table 
  var otable = new tableinit(); 
  otable.init(); 
  //初始化页面上面的按钮事件 
  $("#btn_add").click(function(){ 
    //新增 
  }); 
  $("#btn_edit").click(function(){ 
    //编辑 
  }); 
  $("#btn_info").click(function(){ 
    //详情 
  }); 
  $("#btn_delete").click(function(){ 
    //删除 
  }); 
}); 
var tableinit = function () { 
  var otableinit = new object(); 
  //初始化table 
  otableinit.init = function () { 
    $('#table_sysuser').bootstraptable({ 
      url: path+'/sysuser/finduser.action',     //请求后台的url（*） 
      method: 'post',           //请求方式（*） 
      toolbar: '#toolbar',        //工具按钮用哪个容器 
      striped: true,           //是否显示行间隔色 
      cache: false,            //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*） 
      pagination: true,          //是否显示分页（*） 
      sortable: true,           //是否启用排序 
      sortname:"id", 
      sortorder: "desc",          //排序方式 
      queryparams: otableinit.queryparams,//传递参数（*） 
      queryparamstype: 'limit', 
      sidepagination: "server",      //分页方式：client客户端分页，server服务端分页（*） 
      pagenumber:1,            //初始化加载第一页，默认第一页 
      pagesize: 15,            //每页的记录行数（*） 
      pagelist: [10, 15, 20, 50],    //可供选择的每页的行数（*） 
      search: true,            //是否显示表格搜索 
      strictsearch: true, 
      showcolumns: true,         //是否显示所有的列 
      showrefresh: true,         //是否显示刷新按钮 
      minimumcountcolumns: 2,       //最少允许的列数 
      clicktoselect: true,        //是否启用点击选中行 
      //height: 500,            //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度 
      uniqueid: "id",           //每一行的唯一标识，一般为主键列 
      showtoggle:true,          //是否显示详细视图和列表视图的切换按钮 
      cardview: false,          //是否显示详细视图 
      detailview: false,          //是否显示父子表 
      contenttype: "application/x-www-form-urlencoded", //解决post提交问题 
      columns: [ 
           {checkbox: true }, 
      {title:'用户名称',field: 'username',sortable:true }, 
      {title:'手机号码',field: 'phone',sortable:true, 
         formatter:function(v,r,i){ 
          if(v){ 
            return v.substring(0,3)+"****"+v.substring(7,4); 
          } 
          return v; 
        }   
      }, 
      {title:'邮箱账号',field: 'email',sortable:true }, 
      {title:'生日',field: 'birthday',sortable:true }, 
      {title:'部门',field: 'departmentkey',sortable:true, 
        formatter:function(v,r,i){ 
          if(r.departmentvalue){ 
            return r.departmentvalue; 
          } 
          return ""; 
        } 
      }, 
      {title:'最后登录时间',field: 'lastlogintime',sortable:true }, 
      {title:'性别',field: 'sex',sortable:true, 
        formatter:function(v,r,i){ 
          switch (number(v)) { 
          case 1: 
            return "男"; 
            break; 
          case 2: 
            return "女"; 
            break; 
          default: 
            return "未知"; 
            break; 
          } 
        } 
      }, 
      {title:'用户状态',field: 'status',sortable:true, 
        formatter:function(v,r,i){ 
          return r.statuscn == "false"?"启用":"禁用"; 
        } 
      }, 
      {title:'所属公司编号',field: 'companyid',sortable:true }, 
      {title:'注册时间',field: 'createtime',sortable:true }, 
      {title:'用户头像',field: 'userhead',sortable:true }, 
      {title:'职位',field: 'positionkey',sortable:true}, 
      {title:'角色',field:'role'}] 
    }); 
  }; 
  //得到查询的参数 
  otableinit.queryparams = function (params) { 
    var temp = {  //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的 
      pagesize: params.limit,  //页面大小 
  <span style="white-space:pre">    </span>pagenumber: params.pagenumber, //页码 
  <span style="white-space:pre">    </span>sortname: params.sort,<span style="white-space:pre"> </span>//排序列名 
  <span style="white-space:pre">    </span>sortorder:params.order,<span style="white-space:pre">  </span>//排序方式 
  <span style="white-space:pre">    </span>searchtext:params.search<span style="white-space:pre">  </span>//搜索框参数 
    }; 
    return temp; 
  }; 
  return otableinit; 
}; 

很多参数在代码注释里面说得很明显啦，我们来说说怎么新增查询参数，我们只需要在queryparams方法里面在新增参数信息就行：

otableinit.queryparams = function (params) { 
    var temp = {  //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的 
      pagesize: params.limit,  //页面大小 
      pagenumber: params.pagenumber, //页码 
      sortname: params.sort, //排序列名 
      sortorder:params.order, //排序方式 
      searchtext:params.search,  //搜索框参数 
      searchtext:params.search,  //搜索框参数 
    }; 
    return temp; 
  }; 

bootstrap-table获取页面上勾选的数据：

var rowdata = $("#table_sysuser").bootstraptable("getselections");

bootstrap-table刷新表格：

$('#table_sysuser').bootstraptable('refresh'); 

源码：