如何自定义bootstrap-table分页：隐藏页码仅显示首尾及翻页按钮

方法一：配置参数 + CSS 隐藏页码数字 #

这种方式简单直接，利用组件自带配置配合CSS隐藏不需要的元素：

1. 初始化表格时配置分页参数

$('#targetTable').bootstrapTable({
  url: '/your-api/data', // 你的数据接口
  pagination: true,       // 开启分页
  pageSize: 10,           // 默认每页条数
  pageList: [],           // 隐藏「每页条数选择器」
  showPaginationSwitch: false, // 隐藏分页模式切换按钮
  // 其他表格配置（列定义、数据格式等）...
});

2. 添加CSS隐藏页码数字区域

/* 隐藏页码数字和跳转输入框 */
.pagination .page-number,
.pagination .page-jump {
  display: none !important;
}

/* 可选：调整按钮间距优化布局 */
.pagination .pagination-first,
.pagination .pagination-prev,
.pagination .pagination-next,
.pagination .pagination-last {
  margin: 0 3px;
}

方法二：自定义分页模板（更灵活可控） #

通过自定义分页模板，直接只渲染需要的按钮，避免额外的CSS隐藏操作：

$('#targetTable').bootstrapTable({
  url: '/your-api/data',
  pagination: true,
  pageSize: 10,
  pageList: [],
  showPaginationSwitch: false,
  // 自定义按钮文本
  paginationFirstText: '首页',
  paginationPreText: '上一页',
  paginationNextText: '下一页',
  paginationLastText: '末页',
  // 自定义分页模板，仅保留四个按钮
  paginationTemplate: '<ul class="pagination">' +
    '<li class="pagination-first"><a href="javascript:void(0)">{first}</a></li>' +
    '<li class="pagination-prev"><a href="javascript:void(0)">{prev}</a></li>' +
    '<li class="pagination-next"><a href="javascript:void(0)">{next}</a></li>' +
    '<li class="pagination-last"><a href="javascript:void(0)">{last}</a></li>' +
    '</ul>'
});

注意事项 #

• 确保项目中引入的Bootstrap和Bootstrap Table版本兼容，避免样式或功能异常
• 自定义模板时，保持类名和官方一致（如pagination-first），组件会自动绑定点击事件
• 可以根据需求修改按钮样式，比如给禁用状态的按钮添加灰化效果

内容的提问来源于stack exchange，提问作者user19134451