Bootstrap之bootstrap-table实现表格记录的分页、查询

首先在引入jQuery和Bootstrap的前提下引入bootstrap-table文件 ，我用的本地，可以用Bootcdn。 

<link href="../static/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">

<script src="../static/js/plugins/bootstrap-table/bootstrap-table.min.js" ></script>
<script src="../static/js/plugins/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>

HTML代码：

<div class="tableBody">
    <div class="panel panel-default">
        <div class="panel-heading">
            查询条件
        </div>
        <div class="panel-body form-group" style="margin-bottom:0px;">
            <label class="col-sm-2 control-label" style="text-align: right; margin-top:5px">姓名：</label>
            <div class="col-sm-2">
                <input type="text" class="form-control" name="name" id="searchName"/>
            </div>
            <div class="col-sm-2 pull-left">
                <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_add" type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
        </button>
    </div>
</div>

 js代码：

$(function(){
   //根据窗口调整表格高度
    $(window).resize(function() {
        $('#mytab').bootstrapTable('resetView', {
            height: tableHeight()
        })
    })
    //生成用户数据
    $('#mytab').bootstrapTable({
       method: 'get',
       contentType: "application/x-www-form-urlencoded",
      dataType:"json",
       url:"/getOneCadreInfo/list",
       height:tableHeight(),//高度调整
       striped: true, //是否显示行间隔色
       // dataField: "res",//获取数据的别名，先省略，则为你返回的
       pageNumber: 1, //初始化加载第一页，默认第一页
       pagination:true,//是否分页
       queryParamsType:'limit',
       queryParams:queryParams,
       sidePagination:'server',//在服务器分页
       pageSize:10,//单页记录数
       // pageList:[5,10,20,30],//分页步进值
       showRefresh:true,//刷新按钮
       // showColumns:true,
       clickToSelect: true,//是否启用点击选中行
       toolbarAlign:'right',
       buttonsAlign:'right',//按钮对齐方式
       toolbar:'#toolbar',//指定工作栏
       columns:[
           {
              title:'全选',
              field:'select',
              checkbox:true,
              width:25,
              align:'center',
              valign:'middle'
           },
           {
              title:'ID',
              field:'id',
              visible:false
           },
           {
              title:'姓名',
              field:'name',
              sortable:false
           },
         {
            title:'性别',
            field:'sex',
            sortable:false
         },
           {
              title:'出生年月',
              field:'birthday',
              sortable:true
           },
           {
              title:'民族',
              field:'nation',
           },
           {
              title:'籍贯',
              field:'nativePlace'
           },
           {
              title:'操作',
              field:'Button',
              align:'center',
            events: operateEvents,//事件
            formatter:AddFunctionAlty//添加按钮
           }
       ],
       locale:'zh-CN',//中文支持,
    })

})

function tableHeight() {
   return $(window).height() - 140;
}
//列表行‘操作’按钮
function AddFunctionAlty(value, row, index) {
   return '<button id="TableView" type="button" class="btn btn-default">查看</button>'

}
//请求服务数据时所传查询参数
function queryParams(params){
   return{
      pageSize: params.limit,
      pageNum:params.pageNumber,
      name:$('#searchName').val()
   }
}

//点击新增按钮事件
   window.operateEvents = {
      "click #TableView": function (e, value, row, index) {
         window.location.href = "/getOneCadreInfo/" + row.id;//跳转新增页面
      }
   }

//查询按钮事件
   $('#search_btn').click(function () {
      $('#mytab').bootstrapTable('refresh', {url: '/getOneCadreInfo/list'});//url为后台action
   })

后台springBoot：

/**
 * 获取列表信息
 * @param pageNum
 * @param pageSize
 * @param name
 * @return
 */
@GetMapping("/getOneCadreInfo/list")
public ResponseEntity<?> getAll(@RequestParam(value = "pageNum") Integer pageNum,
                                @RequestParam(value = "pageSize",defaultValue = "10") Integer pageSize,
                                @RequestParam(value = "name") String name) {
    PageHelper.startPage(pageNum,pageSize);
    List<CadreInfo> list = cadreInfoService.getAll(name);//获取列表数据
    PageInfo<CadreInfo> pageInfo = new PageInfo<>(list);
    Map map = new HashMap();
    int total = list.size();//获取列表长度（有多少条数据）
    map.put("total",pageInfo.getTotal());//返回列表总条数
    map.put("rows",pageInfo.getList());//返回列表数据
    return ResponseEntity.ok(map);
}

后端要把total和rows返回，这是固定，如果你不想可以修改dataField，rows是列表数据！

~不喜欢篮球的摄影师不是一个好程序员~