我已使用此https://jsfiddle.net/u9d1ewsh/在表中添加分页,效果很好。问题是有效页码上出现一个百搭的“-”破折号(请参见下图)。我已经使用开发人员工具检查过相同的内容,它不是字符,它恰好仅适用于活动类。 如何删除它?
$(document).ready(function () {
$('#tblAH1').after('<div id="pager" style="" ></div>');
var rowsShown = 5;
var rowsTotal = $('#tblAH1 tbody tr').length;
var numPages = rowsTotal / rowsShown;
for (i = 0; i < numPages; i++) {
var pageNum = i + 1;
$('#pager').append('<a href="#" rel="' + i + '">' + pageNum + '</a> ');
}
$('#tblAH1 tbody tr').hide();
$('#tblAH1 tbody tr').slice(0, rowsShown).show();
$('#pager a:first').addClass('active');
$('#pager a').bind('click', function () {
$('#pager a').removeClass('active');
$(this).addClass('active');
var currPage = $(this).attr('rel');
var startItem = currPage * rowsShown;
var endItem = startItem + rowsShown;
$('#tblAH1 tbody tr').css('opacity', '0.0').hide().slice(startItem, endItem).
css('display', 'table-row').animate({ opacity: 1 }, 300);
event.preventDefault();
});
});
#pager {
display: inline-block;
align-items: center;
}
#pager a {
color: black;
float: left;
padding: 4px 8px;
text-decoration: none;
}
#pager a.active {
background-color: #fb9a55;
padding: 4px 8px;
color: white;
}
#pager a:hover:not(.active) {
background-color: #ddd;
}
答案 0 :(得分:1)
添加以下CSS,该行可能由伪选择器生成
.active:before,.active:after {
content:"";
display:none;
}
如果您有其他类似引导程序的库,则可能会用该行来设置active
类的样式,否则您将覆盖CSS或更改类名
答案 1 :(得分:0)
尝试一下:
$('#pager').append('<a href="#" rel="' + i + '">' + pageNum.replace('-','') + '</a> ');