bootstrapTable隐藏总页数

用了css隐藏了部分显示

<style type="text/css">
   .pagination-info{
	display:none;
}
  </style>

显示的样式就成了在这里插入图片描述
暂时没有办法得到想要的方式。

下面写一下简单的bootstrapTable使用:
1.先引入jQuery,然后引入bootstrapTable所用的js、css 等

<link rel="stylesheet" href="/assets/css/bootstrap.min.css">
<link rel="stylesheet" href="/assets/css/bootstrap-table.min.css">
<script src="/assets/js/bootstrap.min.js"></script>
<script src="/assets/js/bootstrap-table.min.js"></script>
<script src="/assets/js/bootstrap-table-zh-CN.min.js"></script>

2.在页面合适位置写table

 <div class="am-g">
    <div class="am-u-sm-12">
      <form class="am-form">
        <table id="table"></table>
      </form>
    </div>
  </div>

3.当点击搜索按钮时,触发该事件,建表

  $("#sou-suo").on("click", function () {
              getList();
          });

          //加载数据表
          function getList(){
              $("#table").bootstrapTable('destroy');//先销毁表格
              $("#table").bootstrapTable({ // 对应table标签的id
                  url: baseUrl + serviceUrl + "/knowledge/find", // 获取表格数据的url
                  cache: false, // 设置为 false 禁用 AJAX 数据缓存, 默认为true
                  striped: true,  //表格显示条纹,默认为false
                  pagination: true, // 在表格底部显示分页组件,默认false
                  pageList: [10, 20], // 设置页面可以显示的数据条数
                  pageSize: 10, // 页面数据条数
                  pageNumber: 1, // 首页页码
                  sidePagination: 'client', // 设置为服务器端分页
                  method: "post",
                  queryParams: function (params) { // 请求服务器数据时发送的参数,可以在这里添加额外的查询参数,返回false则终止请求
                      return {
                          patternId: selectId,
                          describe: $('#knowledge-describe').val()
                      }
                  },
                  sortName: 'id', // 要排序的字段
                  sortOrder: 'desc', // 排序规则
                  columns: [
                      // {
                      //     checkbox: true, // 显示一个勾选框
                      //     align: 'center' // 居中显示
                      // },
                      {
                          field: 'name', // 返回json数据中的name
                          title: '标题名字', // 表格表头显示文字
                          align: 'center', // 左右居中
                          valign: 'middle' // 上下居中
                      }, {
                          field: 'knowledgePattern.name',
                          title: '类型',
                          align: 'center',
                          valign: 'middle'
                      }, {
                          field: 'createTime',
                          title: '创建时间',
                          align: 'center',
                          valign: 'middle'
                      }, {
                          field: 'operate',
                          title: '操作',
                          align: 'center',
                          valign: 'middle',
                          events: operateEvents,
                          formatter: operateFormatter
                      }
                  ],
                  onLoadSuccess: function(){  //加载成功时执行
                      console.info("加载成功");
                  },
                  onLoadError: function(){  //加载失败时执行
                      console.info("加载数据失败");
                  }

              })
          }

      })

写的较为笼统,方法里面的其他参数可以参考

https://www.cnblogs.com/baixiaoguang/p/7094459.html

猜你喜欢

转载自blog.csdn.net/qq_43137849/article/details/88403763