bootstrap-table 前端分页

既然有那么好的轮子，为什么要重复造轮子。

Html页面

<!doctype html>
<html  xmlns:th="http://www.thymeleaf.org">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Hello, Bootstrap Table!</title>
  
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css">
     <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>
    <link href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css" rel="stylesheet">
<!-- 引入语言包 -->
<script src="https://unpkg.com/[email protected]/dist/bootstrap-table-locale-all.min.js"></script>
  </head>
  <body>
 <h2>前端分页</h2>
 
             
                 
            <table id="table_server"   ></table>
  <script>
 
   $(function (){
       
       $("#table_server").bootstrapTable({
           url:"http://localhost:8080/user/list",  //请求地址
           striped : true, //是否显示行间隔色     
           pageNumber : 1, //初始化加载第一页
           pagination : true,//是否分页
           sidePagination : 'client',//server:服务器端分页|client：前端分页
           pageSize : 5,//单页记录数
           search:true,//搜索
           locale :'zh-CN',//设置成中文
           showColumns: true,
           showToggle:true,//改变表格展示样式
           pageList : [ 5, 10],//可选择单页记录数
           showRefresh : true,//刷新按钮
           sortable: true, // 是否启用排序
           
          columns : [ {
               title : 'id',
               field : 'id',
               sortable : true
           }, {
               title : '姓名',
               field : 'title',
               sortable : true
           }, {
               title : '年龄',
               field : 'summary',
               sortable : true
           },{
               title : '性别',
               field : 'cover_img',
               sortable : true
           }]
       })
       
       
   })

    
    
</script>

  </body>
</html>

后端controller

 @RequestMapping(value = "/list")
     @ResponseBody
     public Object list(HttpServletRequest request){
         
         //PageHelper.startPage(0, 10);
        // request.setAttribute("test", test.findAllStudent());
        
          return test.findAllStudent();
                 
     }

效果：

参考链接

bootstrap-table官方：https://examples.bootstrap-table.com/

其他大神的参考地址：

大神一：https://www.cnblogs.com/wl1202/p/10677196.html

大神二：https://www.jianshu.com/p/761299fd877f

bootstrap-table 前端分页

猜你喜欢