bootstrap-table插件，有分页，有可跳转至，先附上效果图
1565253292(1).png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script src="bootstrap-table/bootstrap-table.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="bootstrap-table/locale/bootstrap-table-zh.js"></script>
<script type="text/javascript" src="js/pagejump.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="bootstrap-table/bootstrap-table.min.css" />
<link rel="stylesheet" type="text/css" href="css/pagejump.css" />
</head>
<body style="padding: 30px;">
<table id="table" class="table table-hover" data-height="500" data-show-jump-to="true" data-pagination="true">
<thead>
<tr>
<th>项目1</th>
<th>项目1</th>
<th>项目1</th>
<th>项目1</th>
</tr>
</thead>
<tbody id="tbody"></tbody>
</table>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
这部分直接新建一个js文件引入即可
(function($) {
'use strict';
$.extend($.fn.bootstrapTable.defaults, {
// 默认不显示
paginationShowPageGo: false
});
$.extend($.fn.bootstrapTable.locales, {
pageGo: function() {
// 定义默认显示文字，其它语言需要扩展
return '跳转至';
}
});
$.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales);
var BootstrapTable = $.fn.bootstrapTable.Constructor,
_initPagination = BootstrapTable.prototype.initPagination;
// 扩展已有的初始化分页组件的方法
BootstrapTable.prototype.initPagination = function() {
_initPagination.apply(this, Array.prototype.slice.apply(arguments));
// 判断是否显示跳转到指定页码的组件
if(this.options.paginationShowPageGo) {
var html = [];
// 渲染跳转到指定页的元素
html.push(
'<ul class="pagination-jump">',
'<li class=""><span>' + this.options.pageGo() + ':</span></li>',
'<li class=""><input style="margin-left: 1px;margin-right: 1px;border-radius: 4px;" type="text" class="page-input" value="' + this.options.pageNumber + '" /></li>',
'<li class=""><span style="padding-left: 3px;">页</span></li>',
'<li class="page-go"><a class="jump-go" href="" style="border-radius: 4px;">跳转</a></li>',
'</ul>');
// 放到原先的分页组件后面
this.$pagination.find('ul.pagination').after(html.join(''));
// 点击按钮触发跳转到指定页函数
this.$pagination.find('.page-go').off('click').on('click', $.proxy(this.onPageGo, this));
// 手动输入页码校验，只允许输入正整数
this.$pagination.find('.page-input').off('keyup').on('keyup', function() {
this.value = this.value.length == 1 ? this.value.replace(/[^1-9]/g, '') : this.value.replace(/\D/g, '');
});
}
};
// 自定义跳转到某页的函数
BootstrapTable.prototype.onPageGo = function(event) {
// 获取手动输入的要跳转到的页码元素
var $toPage = this.$pagination.find('.page-input');
// 当前页不做处理
if(this.options.pageNumber === +$toPage.val()) {
return false;
}
// 调用官方的函数
this.selectPage(+$toPage.val());
return false;
};
})(jQuery);
$(function() {
for(var i = 0; i < 45; i++) {
var html = '<tr>';
html += '<td>' + i + '</td>';
html += '<td>123</td>';
html += '<td>2019-08-01至2019-08-31</td>';
html += '<td>456</td>';
html += '</tr>';
$("#tbody").append(html);
}
$('#table').bootstrapTable({
striped: true, // 是否显示行间隔色
pageSize: "10",
pagination: true, // 是否分页
showPaginationSwitch: false,
pageList: [],
paginationShowPageGo: true
});
})
css部分
.pagination-jump {
margin: 0;
}
.pagination-jump {
display: inline-block;
padding-left: 1px;
border-radius: 4px;
}
.pagination-jump>li {
display: inline;
}
.pagination-jump>li>a, .pagination-jump>li>input, .pagination-jump>li>span {
position: relative;
float: left;
margin-left: -1px;
line-height: 1.42857143;
color: rgba(102, 156, 254, 1);
text-decoration: none;
background-color: #fff;
}
.pagination-jump>li>a {
padding: 6px 12px;
border: 1px solid #ddd;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.pagination-jump>li>input {
padding: 6px 0px;
border: 1px solid #ddd;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
width: 36px;
text-align: center;
}
.pagination-jump>li>span{
padding: 6px 3px 6px 12px;
}
.pagination-jump>li>.jump-go {
margin-left: 0;
padding: 6px;
}
网友评论