我怎样才能允许 bootstrap table 和左侧 header 分页
How can I allow pagination on a bootstrap table with header on the left side
您好,我在 上找到了这个 table,我想知道如何为每 5 个寄存器添加分页
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<table class="table">
<tbody>
<tr>
<th>Row</th>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<th>First Name</th>
<td>John</td>
<td>Peter</td>
<td>John</td>
</tr>
<tr>
<th>Last Name</th>
<td>Carter</td>
<td>Parker</td>
<td>Rambo</td>
</tr>
<tr>
<th>Email</th>
<td>johncarter@mail.com</td>
<td>peterparker@mail.com</td>
<td>johnrambo@mail.com</td>
</tr>
</tbody>
</table>
您可以在 link 中查看 table 的样子,我放在 post 的开头。感谢您的回答
你想要这样的东西吗?
getPagination("#table-id");
function getPagination(table) {
var lastPage = 1;
$("#maxRows")
.on("change", function (evt) {
//$('.paginationprev').html(''); // reset pagination
lastPage = 1;
$(".pagination").find("li").slice(1, -1).remove();
var trnum = 0; // reset tr counter
var maxRows = parseInt($(this).val()); // get Max Rows from select option
if (maxRows == 5000) {
$(".pagination").hide();
} else {
$(".pagination").show();
}
var totalRows = $(table + " tbody tr").length; // numbers of rows
$(table + " tr:gt(0)").each(function () {
// each TR in table and not the header
trnum++; // Start Counter
if (trnum > maxRows) {
// if tr number gt maxRows
$(this).hide(); // fade it out
}
if (trnum <= maxRows) {
$(this).show();
} // else fade in Important in case if it ..
}); // was fade out to fade it in
if (totalRows > maxRows) {
// if tr total rows gt max rows option
var pagenum = Math.ceil(totalRows / maxRows); // ceil total(rows/maxrows) to get ..
// numbers of pages
for (var i = 1; i <= pagenum; ) {
// for each page append pagination li
$(".pagination #prev")
.before(
'<li data-page="' +
i +
'">\
<span>' +
i++ +
'<span class="sr-only">(current)</span></span>\
</li>'
)
.show();
} // end for i
} // end if row count > max rows
$('.pagination [data-page="1"]').addClass("active"); // add active class to the first li
$(".pagination li").on("click", function (evt) {
// on click each page
evt.stopImmediatePropagation();
evt.preventDefault();
var pageNum = $(this).attr("data-page"); // get it's number
var maxRows = parseInt($("#maxRows").val()); // get Max Rows from select option
if (pageNum == "prev") {
if (lastPage == 1) {
return;
}
pageNum = --lastPage;
}
if (pageNum == "next") {
if (lastPage == $(".pagination li").length - 2) {
return;
}
pageNum = ++lastPage;
}
lastPage = pageNum;
var trIndex = 0; // reset tr counter
$(".pagination li").removeClass("active"); // remove active class from all li
$('.pagination [data-page="' + lastPage + '"]').addClass("active"); // add active class to the clicked
// $(this).addClass('active'); // add active class to the clicked
limitPagging();
$(table + " tr:gt(0)").each(function () {
// each tr in table not the header
trIndex++; // tr index counter
// if tr index gt maxRows*pageNum or lt maxRows*pageNum-maxRows fade if out
if (
trIndex > maxRows * pageNum ||
trIndex <= maxRows * pageNum - maxRows
) {
$(this).hide();
} else {
$(this).show();
} //else fade in
}); // end of for each tr in table
}); // end of on click pagination list
limitPagging();
})
.val(5)
.change();
// end of on select change
// END OF PAGINATION
}
function limitPagging() {
// alert($('.pagination li').length)
if ($(".pagination li").length > 7) {
if ($(".pagination li.active").attr("data-page") <= 3) {
$(".pagination li:gt(5)").hide();
$(".pagination li:lt(5)").show();
$('.pagination [data-page="next"]').show();
}
if ($(".pagination li.active").attr("data-page") > 3) {
$(".pagination li:gt(0)").hide();
$('.pagination [data-page="next"]').show();
for (
let i = parseInt($(".pagination li.active").attr("data-page")) - 2;
i <= parseInt($(".pagination li.active").attr("data-page")) + 2;
i++
) {
$('.pagination [data-page="' + i + '"]').show();
}
}
}
}
$(function () {
// Just to append id number for each row
$("table tr:eq(0)").prepend("<th> ID </th>");
var id = 0;
$("table tr:gt(0)").each(function () {
id++;
$(this).prepend("<td>" + id + "</td>");
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<h2>Select Number Of Rows</h2>
<div class="form-group"> <!-- Show Numbers Of Rows -->
<select class ="form-control" name="state" id="maxRows">
<option value="5000">Show ALL Rows</option>
<option value="5">5</option>
<option value="10">10</option>
</select>
</div>
<table class="table table-striped table-class" id= "table-id">
<tbody>
<tr>
<th>Row</th>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<th>First Name</th>
<td>John</td>
<td>Peter</td>
<td>John</td>
</tr>
<tr>
<th>Last Name</th>
<td>Carter</td>
<td>Parker</td>
<td>Rambo</td>
</tr>
<tr>
<th>Email</th>
<td>johncarter@mail.com</td>
<td>peterparker@mail.com</td>
<td>johnrambo@mail.com</td>
</tr>
<tr>
<th>Row</th>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<th>First Name</th>
<td>John</td>
<td>Peter</td>
<td>John</td>
</tr>
<tr>
<th>Last Name</th>
<td>Carter</td>
<td>Parker</td>
<td>Rambo</td>
</tr>
<tr>
<th>Email</th>
<td>johncarter@mail.com</td>
<td>peterparker@mail.com</td>
<td>johnrambo@mail.com</td>
</tr>
<tr>
<th>Row</th>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<th>First Name</th>
<td>John</td>
<td>Peter</td>
<td>John</td>
</tr>
<tr>
<th>Last Name</th>
<td>Carter</td>
<td>Parker</td>
<td>Rambo</td>
</tr>
<tr>
<th>Email</th>
<td>johncarter@mail.com</td>
<td>peterparker@mail.com</td>
<td>johnrambo@mail.com</td>
</tr>
<tr>
<th>Row</th>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<th>First Name</th>
<td>John</td>
<td>Peter</td>
<td>John</td>
</tr>
<tr>
<th>Last Name</th>
<td>Carter</td>
<td>Parker</td>
<td>Rambo</td>
</tr>
<tr>
<th>Email</th>
<td>johncarter@mail.com</td>
<td>peterparker@mail.com</td>
<td>johnrambo@mail.com</td>
</tr>
</tbody>
</table>
<!-- Start Pagination -->
<div class='pagination-container' >
<nav>
<ul class="pagination">
<li data-page="prev" >
<span> < <span class="sr-only">(current)</span></span>
</li>
<!-- Here the JS Function Will Add the Rows -->
<li data-page="next" id="prev">
<span> > <span class="sr-only">(current)</span></span>
</li>
</ul>
</nav>
</div>
</div> <!-- End of Container -->
您好,我在
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<table class="table">
<tbody>
<tr>
<th>Row</th>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<th>First Name</th>
<td>John</td>
<td>Peter</td>
<td>John</td>
</tr>
<tr>
<th>Last Name</th>
<td>Carter</td>
<td>Parker</td>
<td>Rambo</td>
</tr>
<tr>
<th>Email</th>
<td>johncarter@mail.com</td>
<td>peterparker@mail.com</td>
<td>johnrambo@mail.com</td>
</tr>
</tbody>
</table>
您可以在 link 中查看 table 的样子,我放在 post 的开头。感谢您的回答
你想要这样的东西吗?
getPagination("#table-id");
function getPagination(table) {
var lastPage = 1;
$("#maxRows")
.on("change", function (evt) {
//$('.paginationprev').html(''); // reset pagination
lastPage = 1;
$(".pagination").find("li").slice(1, -1).remove();
var trnum = 0; // reset tr counter
var maxRows = parseInt($(this).val()); // get Max Rows from select option
if (maxRows == 5000) {
$(".pagination").hide();
} else {
$(".pagination").show();
}
var totalRows = $(table + " tbody tr").length; // numbers of rows
$(table + " tr:gt(0)").each(function () {
// each TR in table and not the header
trnum++; // Start Counter
if (trnum > maxRows) {
// if tr number gt maxRows
$(this).hide(); // fade it out
}
if (trnum <= maxRows) {
$(this).show();
} // else fade in Important in case if it ..
}); // was fade out to fade it in
if (totalRows > maxRows) {
// if tr total rows gt max rows option
var pagenum = Math.ceil(totalRows / maxRows); // ceil total(rows/maxrows) to get ..
// numbers of pages
for (var i = 1; i <= pagenum; ) {
// for each page append pagination li
$(".pagination #prev")
.before(
'<li data-page="' +
i +
'">\
<span>' +
i++ +
'<span class="sr-only">(current)</span></span>\
</li>'
)
.show();
} // end for i
} // end if row count > max rows
$('.pagination [data-page="1"]').addClass("active"); // add active class to the first li
$(".pagination li").on("click", function (evt) {
// on click each page
evt.stopImmediatePropagation();
evt.preventDefault();
var pageNum = $(this).attr("data-page"); // get it's number
var maxRows = parseInt($("#maxRows").val()); // get Max Rows from select option
if (pageNum == "prev") {
if (lastPage == 1) {
return;
}
pageNum = --lastPage;
}
if (pageNum == "next") {
if (lastPage == $(".pagination li").length - 2) {
return;
}
pageNum = ++lastPage;
}
lastPage = pageNum;
var trIndex = 0; // reset tr counter
$(".pagination li").removeClass("active"); // remove active class from all li
$('.pagination [data-page="' + lastPage + '"]').addClass("active"); // add active class to the clicked
// $(this).addClass('active'); // add active class to the clicked
limitPagging();
$(table + " tr:gt(0)").each(function () {
// each tr in table not the header
trIndex++; // tr index counter
// if tr index gt maxRows*pageNum or lt maxRows*pageNum-maxRows fade if out
if (
trIndex > maxRows * pageNum ||
trIndex <= maxRows * pageNum - maxRows
) {
$(this).hide();
} else {
$(this).show();
} //else fade in
}); // end of for each tr in table
}); // end of on click pagination list
limitPagging();
})
.val(5)
.change();
// end of on select change
// END OF PAGINATION
}
function limitPagging() {
// alert($('.pagination li').length)
if ($(".pagination li").length > 7) {
if ($(".pagination li.active").attr("data-page") <= 3) {
$(".pagination li:gt(5)").hide();
$(".pagination li:lt(5)").show();
$('.pagination [data-page="next"]').show();
}
if ($(".pagination li.active").attr("data-page") > 3) {
$(".pagination li:gt(0)").hide();
$('.pagination [data-page="next"]').show();
for (
let i = parseInt($(".pagination li.active").attr("data-page")) - 2;
i <= parseInt($(".pagination li.active").attr("data-page")) + 2;
i++
) {
$('.pagination [data-page="' + i + '"]').show();
}
}
}
}
$(function () {
// Just to append id number for each row
$("table tr:eq(0)").prepend("<th> ID </th>");
var id = 0;
$("table tr:gt(0)").each(function () {
id++;
$(this).prepend("<td>" + id + "</td>");
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<h2>Select Number Of Rows</h2>
<div class="form-group"> <!-- Show Numbers Of Rows -->
<select class ="form-control" name="state" id="maxRows">
<option value="5000">Show ALL Rows</option>
<option value="5">5</option>
<option value="10">10</option>
</select>
</div>
<table class="table table-striped table-class" id= "table-id">
<tbody>
<tr>
<th>Row</th>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<th>First Name</th>
<td>John</td>
<td>Peter</td>
<td>John</td>
</tr>
<tr>
<th>Last Name</th>
<td>Carter</td>
<td>Parker</td>
<td>Rambo</td>
</tr>
<tr>
<th>Email</th>
<td>johncarter@mail.com</td>
<td>peterparker@mail.com</td>
<td>johnrambo@mail.com</td>
</tr>
<tr>
<th>Row</th>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<th>First Name</th>
<td>John</td>
<td>Peter</td>
<td>John</td>
</tr>
<tr>
<th>Last Name</th>
<td>Carter</td>
<td>Parker</td>
<td>Rambo</td>
</tr>
<tr>
<th>Email</th>
<td>johncarter@mail.com</td>
<td>peterparker@mail.com</td>
<td>johnrambo@mail.com</td>
</tr>
<tr>
<th>Row</th>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<th>First Name</th>
<td>John</td>
<td>Peter</td>
<td>John</td>
</tr>
<tr>
<th>Last Name</th>
<td>Carter</td>
<td>Parker</td>
<td>Rambo</td>
</tr>
<tr>
<th>Email</th>
<td>johncarter@mail.com</td>
<td>peterparker@mail.com</td>
<td>johnrambo@mail.com</td>
</tr>
<tr>
<th>Row</th>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<th>First Name</th>
<td>John</td>
<td>Peter</td>
<td>John</td>
</tr>
<tr>
<th>Last Name</th>
<td>Carter</td>
<td>Parker</td>
<td>Rambo</td>
</tr>
<tr>
<th>Email</th>
<td>johncarter@mail.com</td>
<td>peterparker@mail.com</td>
<td>johnrambo@mail.com</td>
</tr>
</tbody>
</table>
<!-- Start Pagination -->
<div class='pagination-container' >
<nav>
<ul class="pagination">
<li data-page="prev" >
<span> < <span class="sr-only">(current)</span></span>
</li>
<!-- Here the JS Function Will Add the Rows -->
<li data-page="next" id="prev">
<span> > <span class="sr-only">(current)</span></span>
</li>
</ul>
</nav>
</div>
</div> <!-- End of Container -->