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

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

HTML代码：

    

        

            查询条件
        
        

            姓名：
            

                
            
            

                查询
            
        
    
    
    

        
            新增
        
    

 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 '查看'

}
//请求服务数据时所传查询参数
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 list = cadreInfoService.getAll(name);//获取列表数据
    PageInfo 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是列表数据！

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