纯javascript表行分页

Question

我试图对表进行分页，但我想引用表行来显示每页3个数据

我该怎么做

Fiddle：http://jsfiddle.net/578hmpv2/

此代码

var current_page = 1;
var records_per_page = 3;
var l = document.getElementById("listingTable").rows.length

function prevPage()
{
if (current_page > 1) {
current_page--;
changePage(current_page);
}
}
function nextPage()
{
if (current_page < numPages()) {
current_page++;
changePage(current_page);
}
}

function changePage(page)
{
var btn_next = document.getElementById("btn_next");
var btn_prev = document.getElementById("btn_prev");
var listing_table = document.getElementById("listingTable");
var page_span = document.getElementById("page");

// Validate page
if (page < 1) page = 1;
if (page > numPages()) page = numPages();

for (var i = (page-1) * records_per_page; i < (page * records_per_page) && i < l; i++) {

listing_table.rows[i].style.display = ""              
}

page_span.innerHTML = page + "/" + numPages();
if (page == 1) {
btn_prev.style.visibility = "hidden";
} else {
btn_prev.style.visibility = "visible";
}
if (page == numPages()) {
btn_next.style.visibility = "hidden";
} else {
btn_next.style.visibility = "visible";
}
}
function numPages()
{
return Math.ceil(l / records_per_page);
}
window.onload = function() {
changePage(1);
};

我怎样才能把它改得完美？很抱歉我的英语不好，无法解释我需要什么，希望你能理解我需要什么！

谢谢！

Answer 1

我认为这符合您的要求。我试着保持代码或多或少的结构化，但我改变了一些事情：

我使用了onclick而不是javascript方案href，因为堆栈溢出代码编辑器没有运行href。

我在onload函数中使用了current_page，而不是硬编码的1。

除此之外，我认为这些评论解释了这种情况。

请注意，在进行页面计数时，我不得不在循环中添加一个，并减去一个，以留出标题行。

var current_page = 1;
var records_per_page = 3;
var l = document.getElementById("listingTable").rows.length
function prevPage()
{
if (current_page > 1) {
current_page--;
changePage(current_page);
}
}
function nextPage()
{
if (current_page < numPages()) {
current_page++;
changePage(current_page);
}
}

function changePage(page)
{
var btn_next = document.getElementById("btn_next");
var btn_prev = document.getElementById("btn_prev");
var listing_table = document.getElementById("listingTable");
var page_span = document.getElementById("page");

// Validate page
if (page < 1) page = 1;
if (page > numPages()) page = numPages();
[...listing_table.getElementsByTagName('tr')].forEach((tr)=>{
tr.style.display='none'; // reset all to not display
});
listing_table.rows[0].style.display = ""; // display the title row
for (var i = (page-1) * records_per_page + 1; i < (page * records_per_page) + 1; i++) {
if (listing_table.rows[i]) {
listing_table.rows[i].style.display = ""
} else {
continue;
}
}

page_span.innerHTML = page + "/" + numPages();
if (page == 1) {
btn_prev.style.visibility = "hidden";
} else {
btn_prev.style.visibility = "visible";
}
if (page == numPages()) {
btn_next.style.visibility = "hidden";
} else {
btn_next.style.visibility = "visible";
}
}
function numPages()
{
return Math.ceil((l - 1) / records_per_page);
}
window.onload = function() {
changePage(current_page);
};

<table id="listingTable">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
<tr>
<td>Example</td>
<td>Page 3</td>
<td>UK</td>
</tr>
</table>
<a onclick="prevPage()" href='#' id="btn_prev">Prev</a>
<a onclick="nextPage()" href='#' id="btn_next">Next</a>
page: <span id="page"></span>

Answer 2

for (var i = 0; i < l; i++) {
listing_table.rows[i].style.display = "none"
}

将此添加到您的changePage函数中

jsfiddle