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是列表数据！

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