//引入的css文件 
<link href="../public/static/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet" />
<link href="../public/static/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="external nofollow" rel="stylesheet">
//引入的js文件
 <script src="../public/static/js/jquery.min.js"></script>
 <script src="../public/static/js/bootstrap.min.js"></script>
 <script src="../public/static/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
 <script src="../public/static/js/plugins/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>

<div class="panel panel-default">
 <div class="panel-heading">
  查詢條件
 </div>
 <div class="panel-body form-group" style="margin-bottom:0px;">
  <label class="col-sm-1 control-label" style="text-align: right; margin-top:5px">姓名：</label>
  <div class="col-sm-2">
   <input type="text" class="form-control" name="Name" id="search_name"/>
  </div>
  <label class="col-sm-1 control-label" style="text-align: right; margin-top:5px">手機(jī)號(hào)：</label>
  <div class="col-sm-2">
   <input type="text" class="form-control" name="Name" id="search_tel"/>
  </div>
  <div class="col-sm-1 col-sm-offset-4">
   <button class="btn btn-primary" id="search_btn">查詢</button>
  </div>
  </div>
</div>
<table id="mytab" class="table table-hover"></table>
<div id="toolbar" class="btn-group pull-right" style="margin-right: 20px;">
  <button id="btn_edit" type="button" class="btn btn-default" style="display: none; border-radius: 0">
   <span class="glyphicon glyphicon-pencil" aria-hidden="true" ></span>修改
  </button>
  <button id="btn_delete" type="button" class="btn btn-default" style="display: none;">
   <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>刪除
  </button>
  <button id="btn_add" type="button" class="btn btn-default">
   <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
  </button>
 </div>

//根據(jù)窗口調(diào)整表格高度
 $(window).resize(function() {
  $('#mytab').bootstrapTable('resetView', {
   height: tableHeight()
  })
 })
//生成用戶數(shù)據(jù)
 $('#mytab').bootstrapTable({
  method: 'post',
  contentType: "application/x-www-form-urlencoded",//必須要有?。。?！
  url:"../index.php/admin/index/userManagement",//要請(qǐng)求數(shù)據(jù)的文件路徑
  height:tableHeight(),//高度調(diào)整
  toolbar: '#toolbar',//指定工具欄
  striped: true, //是否顯示行間隔色
  dataField: "res",//bootstrap table 可以前端分頁也可以后端分頁，這里
  //我們使用的是后端分頁，后端分頁時(shí)需返回含有total：總記錄數(shù),這個(gè)鍵值好像是固定的 
  //rows： 記錄集合 鍵值可以修改 dataField 自己定義成自己想要的就好
  pageNumber: 1, //初始化加載第一頁，默認(rèn)第一頁
  pagination:true,//是否分頁
  queryParamsType:'limit',//查詢參數(shù)組織方式
  queryParams:queryParams,//請(qǐng)求服務(wù)器時(shí)所傳的參數(shù)
  sidePagination:'server',//指定服務(wù)器端分頁
  pageSize:10,//單頁記錄數(shù)
  pageList:[5,10,20,30],//分頁步進(jìn)值
  showRefresh:true,//刷新按鈕
  showColumns:true,
  clickToSelect: true,//是否啟用點(diǎn)擊選中行
  toolbarAlign:'right',工具欄對(duì)齊方式
  buttonsAlign:'right',//按鈕對(duì)齊方式
  toolbar:'#toolbar',//指定工作欄
  columns:[
   {
    title:'全選',
    field:'select',
    //復(fù)選框
    checkbox:true,
    width:25,
    align:'center',
    valign:'middle'
   },
   {
    title:'ID',
    field:'ID',
    visible:false
   },
   {
    title:'登錄名',
    field:'LoginName',
    sortable:true
   },
   {
    title:'姓名',
    field:'Name',
    sortable:true
   },
   {
    title:'手機(jī)號(hào)',
    field:'Tel',
   },
   {
    title:'郵箱',
    field:'Email'
   },
   {
    title:'注冊(cè)日期',
    field:'CreateTime',
    sortable:true
   },
   {
    title:'狀態(tài)',
    field:'Attribute',
    align:'center',
    //列數(shù)據(jù)格式化
    formatter:operateFormatter
   }
  ],
  locale:'zh-CN',//中文支持,
  responseHandler:function(res){
   //在ajax獲取到數(shù)據(jù)，渲染表格之前，修改數(shù)據(jù)源
   return res;
  }
 })
 //三個(gè)參數(shù)，value代表該列的值
 function operateFormatter(value,row,index){
  if(value==2){
   return '<i class="fa fa-lock" style="color:red"></i>'
  }else if(value==1){
   return '<i class="fa fa-unlock" style="color:green"></i>'
  }else{
   return '數(shù)據(jù)錯(cuò)誤'
  }
 }
 //請(qǐng)求服務(wù)數(shù)據(jù)時(shí)所傳參數(shù)
 function queryParams(params){
  return{
   //每頁多少條數(shù)據(jù)
   pageSize: params.limit,
   //請(qǐng)求第幾頁
   pageIndex:params.pageNumber,
   Name:$('#search_name').val(),
   Tel:$('#search_tel').val()
  }
 }
  //查詢按鈕事件
 $('#search_btn').click(function(){
  $('#mytab').bootstrapTable('refresh', {url: '../index.php/admin/index/userManagement'});
 })
 //tableHeight函數(shù)
 function tableHeight(){
  //可以根據(jù)自己頁面情況進(jìn)行調(diào)整
  return $(window).height() -280;
 }