您好我有一个包含很多行的html表，我使用JavaScript代码添加分页选项，工作正常但是当我加载文档时显示所有行并且我只想显示5,10或者其他什么但不是所有的行。这是我的JavaScript代码和工作小提琴：
$(document).ready(function () {
getPagination('#Tabla');
});
function getPagination(table) {
$('#maxRows').on('change', function() {
$('.pagination').html(''); // reset pagination
var trnum = 0; // reset tr counter
var maxRows = parseInt($(this).val()); // get Max Rows from select option
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').append('<li class"wp" data-page="' + i + '">\
<span>' + i++ + '<span class="sr-only">(current)</span></span>\
</li>').show();
} // end for i
} // end if row count > max rows
$('.pagination li:first-child').addClass('active'); // add active class to the first li
$('.pagination li').on('click', function() { // on click each page
var pageNum = $(this).attr('data-page'); // get it's number
var trIndex = 0; // reset tr counter
$('.pagination li').removeClass('active'); // remove active class from all li
$(this).addClass('active'); // add active class to the clicked
$(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
});
}
小提琴：
答案 0 :(得分：2)
我已更改您的代码，请检查此内容。创建分页的功能按原样工作。只是一个小的改变ni代码
$(document).ready(function () {
$('#maxRows').on('change', function() {
getPagination('#Tabla',$(this).val());
});
getPagination('#Tabla',2); // the no of rows default you want to show
});
function getPagination(table,noRows) {
$('.pagination').html(''); // reset pagination
var trnum = 0; // reset tr counter
var maxRows = noRows; // get Max Rows from select option
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').append('<li class"wp" data-page="' + i + '">\
<span>' + i++ + '<span class="sr-only">(current)</span></span>\
</li>').show();
} // end for i
} // end if row count > max rows
$('.pagination li:first-child').addClass('active'); // add active class to the first li
$('.pagination li').on('click', function() { // on click each page
var pageNum = $(this).attr('data-page'); // get it's number
var trIndex = 0; // reset tr counter
$('.pagination li').removeClass('active'); // remove active class from all li
$(this).addClass('active'); // add active class to the clicked
$(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
}
答案 1 :(得分：2)
您可以选择其中一个＆＃34; maxRows＆＃34;准备文件的选项。例如，您可以选择最后一个选项：
$('#maxRows option:last').prop('selected', true).trigger('change');
您需要触发更改事件，以便根据＆＃34;更改＆＃34;重新排列所有内容。事件
摘录：
$(document).ready(function () {
getPagination('#Tabla');
$('#maxRows option:last').prop('selected', true).trigger('change');
});
function getPagination(table) {
$('#maxRows').on('change', function(e) {
$('.pagination').html(''); // reset pagination
var trnum = 0; // reset tr counter
var maxRows = parseInt($(this).val()); // get Max Rows from select option
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').append('<li class"wp" data-page="' + i + '">\
<span>' + i++ + '<span class="sr-only">(current)</span></span>\
</li>').show();
} // end for i
} // end if row count > max rows
$('.pagination li:first-child').addClass('active'); // add active class to the first li
$('.pagination li').on('click', function() { // on click each page
var pageNum = $(this).attr('data-page'); // get it's number
var trIndex = 0; // reset tr counter
$('.pagination li').removeClass('active'); // remove active class from all li
$(this).addClass('active'); // add active class to the clicked
$(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
});
// end of on select change
// END OF PAGINATION
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="input col-md-1 col-xs-2">
<!-- Show Numbers Of Rows -->
<select class="form-control" name="state" id="maxRows">
<option value="5000">Show ALL Rows</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
<div class="row col-md-12 col-xs-12">
<div class="table-responsive">
<table class="table table-striped table-hover table-condensed table-bordered" id="Tabla">
<thead>
<tr class="info">
<td>ID<span class="hidden-xs"></span></td>
<td>Family<span class="hidden-xs"></span></td>
</tr>
</thead>
<tbody id="TablaFamilias">
<tr>
<td>1</td>
<td>A</td>
</tr>
<tr>
<td>2</td>
<td>B</td>
</tr>
<tr>
<td>3</td>
<td>A</td>
</tr>
<tr>
<td>4</td>
<td>D</td>
</tr>
<tr>
<td>5</td>
<td>A</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
<div>
<nav>
<ul class="pagination"></ul>
</nav>
</div>
</div>
</div>
</div>
答案 2 :(得分：2)
首先，我建议使用一个库来表格功能，如排序，过滤，分页...因为你真的在重新发明轮子。
但是，对于你提出的问题，你必须进行两次调整：
在您的HTML中，选择selected选项，其中包含您在页面加载时显示的所需页数，例如3：
<select class="form-control" name="state" id="maxRows">
<option value="5000">Show ALL Rows</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected>3</option>
</select>
在您的代码中，调用.trigger('change')元素上的maxRows方法：
$('#maxRows').on('change', function() {
// all code here can stay as it is
// ...
}).trigger('change');
那就是它。
答案 3 :(得分：0)
$(document).ready(function () {
getPagination('#Tabla');
$('#maxRows option:last').prop('selected', true).trigger('change');
});
function getPagination(table) {
$('#maxRows').on('change', function(e) {
$('.pagination').html(''); // reset pagination
var trnum = 0; // reset tr counter
var maxRows = parseInt($(this).val()); // get Max Rows from select option
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').append('<li class"wp" data-page="' + i + '">\
<span>' + i++ + '<span class="sr-only">(current)</span></span>\
</li>').show();
} // end for i
} // end if row count > max rows
$('.pagination li:first-child').addClass('active'); // add active class to the first li
$('.pagination li').on('click', function() { // on click each page
var pageNum = $(this).attr('data-page'); // get it's number
var trIndex = 0; // reset tr counter
$('.pagination li').removeClass('active'); // remove active class from all li
$(this).addClass('active'); // add active class to the clicked
$(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
});
// end of on select change
// END OF PAGINATION
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="input col-md-1 col-xs-2">
<!-- Show Numbers Of Rows -->
<select class="form-control" name="state" id="maxRows">
<option value="5000">Show ALL Rows</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
<div class="row col-md-12 col-xs-12">
<div class="table-responsive">
<table class="table table-striped table-hover table-condensed table-bordered" id="Tabla">
<thead>
<tr class="info">
<td>ID<span class="hidden-xs"></span></td>
<td>Family<span class="hidden-xs"></span></td>
</tr>
</thead>
<tbody id="TablaFamilias">
<tr>
<td>1</td>
<td>A</td>
</tr>
<tr>
<td>2</td>
<td>B</td>
</tr>
<tr>
<td>3</td>
<td>A</td>
</tr>
<tr>
<td>4</td>
<td>D</td>
</tr>
<tr>
<td>5</td>
<td>A</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
<div>
<nav>
<ul class="pagination"></ul>
</nav>
</div>
</div>
</div>
</div>