...table分页后点击下一页,页面重新刷新了表格被隐藏了必须重新点击获取...
发布网友
发布时间：2024-11-29 04:53
共2个回答
热心网友
时间：1分钟前
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title>cainiao</title>
<style type="text/css">
</style>
<script type="text/javascript">
window.onload = function ()
{
PageModel.produceTrs ();
}
var PageModel =
{
index : 0,
page : 14,
end : 1,
all : 20,
col : 5,
bottomLine : 2,
word : "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ01234567",
produceTrs : function ()
{
var table = document.getElementById ("Table1");
var info = document.getElementById ("info");
var wp = this.word.split ('');
for ( var i = this.page * this.index; i < this.page * (this.index + 1); i++)
{
var tr = table.insertRow (table.rows.length - this.bottomLine);
for ( var j = 0; j < this.col; j++)
{
var td = tr.insertCell (tr.cells.length);
if (j == 0)
{
var ck = document.createElement ("input");
ck.type = "checkbox";
ck.name = "che" + i;
ck.value = wp[i] ? wp[i] : "";
td.appendChild (ck);
}
else
{
for ( var k = 0; k <= j; k++)
{
td.innerHTML += (wp[i] ? wp[i] : "");
}
}
}
}
info.innerText = (this.index + 1) + " / " + (this.all);
},
removeTrs : function ()
{
var table = document.getElementById ("Table1");
var len = table.rows.length;
while (len > this.bottomLine + 1)
{
table.deleteRow (1);
len = table.rows.length;
}
},
toPage : function (dir)
{
var table = document.getElementById ("Table1");
var info = document.getElementById ("info");
if (dir == -1)
{
this.index = this.index == 0 ? 0 : --this.index;
}
else if (dir == 1)
{
this.index = this.index == this.all ? this.all : ++this.index;
}
else if (dir == -2)
{
this.index = 0;
}
else if (dir = 2)
{
this.index = this.all - 1;
}
info.innerText = (this.index + 1) + " / " + (this.all);
this.removeTrs ();
this.produceTrs ();
}
};
var appendWord = function ()
{
var text1 = document.getElementById ('text1');
var cks = document.getElementsByTagName ("input");
var temp = ";" + text1.value + ";";
for ( var i = 0; i < cks.length; i++)
{
var ck = cks[i];
if (ck.type == 'checkbox' && ck.checked)
{
var text = ck.parentElement.parentElement.cells[1].innerText;
if (temp.indexOf (";" + text + ";") == -1)
{
temp += text + ";";
}
text1.value = temp;
}
}
text1.value = temp.replace (/;;/g, ';').replace (/^;|;$/g, '');
var temp = ";" + text1.value + ";";
for ( var i = 0; i < cks.length; i++)
{
var ck = cks[i];
if (ck.type == 'checkbox' && !ck.checked)
{
var text = ck.parentElement.parentElement.cells[1].innerText;
var reg = new RegExp(";" + text + ";" ,"g");
if (temp.indexOf (";" + text + ";") != -1)
{
temp += temp.replace (reg, ";");
}
text1.value = temp;
}
}
};
</script>
</head>
<body style="text-align: center;">
<div id="tablebox">
<div id="TableWrapper" style="text-align: center; height: 340px;">
<table id="Table1"
style="width: 60%; margin: 0 auto; border-collapse: collapse;"
border="1px">
<tr>
<th scope="col"></th>
<th scope="col">a</th>
<th scope="col" id="col1">a</th>
<th scope="col">a</th>
<th scope="col">a</th>
</tr>
<tr>
<td colspan="5"><input type="button" value="<"
onclick="PageModel.toPage(-2);" /> <input type="button" value="前"
onclick="PageModel.toPage(-1);" /> <span id="info"></span> <input
type="button" value="后" onclick="PageModel.toPage(1);" /> <input
type="button" value=">" onclick="PageModel.toPage(2);" />
</td>
</tr>
<tr>
<td colspan="4"><input type="text" maxlength="20"
style="width: 80%" id="text1"></input>
</td>
<td colspan="1"><button type="button" class="littleButton9"
onclick="appendWord();">追加</button></td>
</tr>
</table>
</div>
</div>
</body>
</html>
热心网友
时间：7分钟前
“下一页”不能刷新页面。
“下一页”需要使用ajax去请求数据，在其Success的Callback，使用JQuery对表格数据进行刷新。
