1. 问题描述
在项目当中使用bootstrap-table的page-jump-to插件发现不好使,用法是完全根据官方文档中来的。如图:
我是在引入了此扩展的css和js之后,在另外的一个js中调用的bootstrap-table插件,然后在表格选项中加上了showJumpTo: true,但是没有效果。
html代码部分如下:
<div>
<table id="test" class="table text-center text-nowrap"></table>
</div>
我自己的js代码部分如下:
$('#test').bootstrapTable({
url: '/test', // 请求后台数据的url
dataType: 'json', // 服务器返回的数据格式
cache: false, // 是否缓存
striped: true, // 是否隔行变色
pagination: true, // 是否分页
showColumns: true, // 内容列下拉框
sortable: true, // 是否开启排序
sortName: 'column01', // 默认排序的列
sortOrder: 'desc', // 排序方式, 'asc'升序,'desc'降序
pageNumber: 1, // 首页页码
pageSize: 15, // 分页之后,每页的数据条数
pageList: [30, 50, 100, all], // 可选的每页数据条数
clickToSelect: true, // 是否开启点击选中行
idField: 'id', // 指定主键列
paginationLoop: true, // 是否开启分页循环,即最后一页点下一页由回到第一页
showRefresh: true, // 是否显示刷新按钮
showToggle: true, // 是否显示切换表格数据展示方式的按钮,方式有table/card
sidePagination: 'server', // 分页方式,两种client/server
queryParamType: 'limit', // 请求参数类型,一般使用'limit'
showJumpTo: true, // 是否显示跳页
queryParams: function (params) {
return {
"search": params.search, // 搜索的内容
"sort": params.sort, // 排序的字段(列名)
"order": params.order, // 排序方式
"limit": params.limit, // 每页数据条数
"offset": params.offset, // 从第几条开始
}
},
responseHandler: function (resp) {
return resp.res
},
columns:[
{
field: 'col1',
title: '第一列',
},
{
field: 'col2',
title: '第二列',
},
{
field: 'col3',
title: '第三列',
},
{
field: 'col4',
title: '第四列',
},
{
field: 'col5',
title: '第五列',
},
]
})
2. 解决办法
直接在html中的< table > 标签中指明data-show-jumpto=“true”,跳转页面生效。
<div>
<table id="test" class="table text-center text-nowrap" data-show-jumpto="true"></table>
</div>
猜测上面的js代码在渲染到html过程中,出现了一些问题,导致最终的< table >标签中并没有检测到跳转页的属性。