分页表的动态索引
Dynamic Index for paged table
我正在创建一个分页的表格(每页仅显示 10 个元素(。 我不确定表格会有多大,因为用户是动态添加的。我希望有与表中页面相对应的数字,当用户单击其中一个页面时,它会加载该页面的元素。我还想显示用户当前所在的页面。目前我有一个整数来跟踪用户所在的页面,下一个后退,第一个和最后一个按钮。我真正需要知道的是如何创建一组可点击的动态数字。我正在使用chrome浏览器,HTML5和JS。
提前致谢
Java脚本
function display(){//shows the Status Table
document.getElementById("DStatusTable").hidden='';
document.getElementById("buttons").hidden='';
var table = document.getElementById('statusTable');
for(var i =1; i<table.rows.length; i++){
var x =table.rows[i].cells;
table.rows[i].id ='notselected';
table.rows[i].hidden='';
if (!((pageCUR*10+i)>fileLIST.length)){
x[0].innerHTML = fileLIST[pageCUR*10+(i-1)]
[0].name;
x[1].innerHTML = fileLIST[pageCUR*10+
(i-1)][1];
}
else{
table.rows[i].hidden='hidden';
}
function nextPage(){//shows next page
pageCUR++;
if (pageCUR>=parseInt(pageMAX)){//checks if on last page
document.getElementById('Next').hidden='hidden';
document.getElementById('Last').hidden='hidden'; }
else {
document.getElementById('Next').hidden='';
document.getElementById('Last').hidden='';
}
document.getElementById('Back').hidden='';
document.getElementById('First').hidden='';
display();
}
function backPage(){//shows previous page
pageCUR--;
if (pageCUR==0){//checks if on first page
document.getElementById('Back').hidden='hidden';
document.getElementById('First').hidden='hidden';
}
else{
document.getElementById('Back').hidden='';
document.getElementById('First').hidden='';
}
document.getElementById('Next').hidden=''
document.getElementById('Last').hidden=''
display();
}
function firstPage(){//shows first page
pageCUR =0;
document.getElementById('First').hidden='hidden';
document.getElementById('Back').hidden='hidden';
document.getElementById('Next').hidden='';
document.getElementById('Last').hidden='';
display();
}
function lastPage(){//shows last page
pageCUR =parseInt(pageMAX);
document.getElementById('First').hidden='';
document.getElementById('Back').hidden='';
document.getElementById('Next').hidden='hidden';
document.getElementById('Last').hidden='hidden';
display();
}
HTML5
<div class="StatusTable" id="DStatusTable" hidden>
<table id='statusTable' border='1'>
<thead><tr>
<th> NAME</th>
<th>STATUS</th>
</tr>
</thead>
<tbody>
<tr id="row1">
<td onclick = "play(0)">video 1</td>
<td onclick="SET(this,0)" ></td></tr>
<tr id="row2">
<td onclick = "play(1)">video 1</td>
<td onclick="SET(this,1)" ></td></tr>
<tr id="row3">
<td onclick = "play(2)">video 1</td>
<td onclick="SET(this,2)" ></td></tr>
<tr id="row4">
<td onclick = "play(3)">video 1</td>
<td onclick="SET(this,3)" ></td></tr>
<tr id="row5">
<td onclick = "play(4)">video 1</td>
<td onclick="SET(this,4)" ></td></tr>
<tr id="row6">
<td onclick = "play(5)">video 1</td>
<td onclick="SET(this,5)" ></td></tr>
<tr id="row7">
<td onclick = "play(6)">video 1</td>
<td onclick="SET(this,6)" ></td></tr>
<tr id="row8">
<td onclick = "play(7)">video 1</td>
<td onclick="SET(this,7)" ></td></tr>
<tr id="row9">
<td onclick = "play(8)">video 1</td>
<td onclick="SET(this,8)" ></td></tr>
<tr id="row10">
<td onclick = "play(9)">video 1</td>
<td onclick="SET(this,9)" ></td></tr>
</tbody>
</table>
</div>
以及我有 2 个全局变量 pageCUR 和 pageMAX,它们保存当前页面的索引和 max(last( 页面的索引
这是在 JavaScript 中生成分页的方式(使用 jQuery(: JSFiddle-Example
请注意,window.changePage = function ...
只是 JSFiddle 中使此函数全局化的一种解决方法。用于加载下一页的 JScript-Code 将直接进入其中。
function changePage (page){
alert('change page to ' + page);
}
function makePagination(n){
for(var i=0; i<=5; i++){
$("<a onclick='changePage("+i+");'>"+i+"</a>").appendTo('#pagination');
if(i!=5) $('#pagination').append(' | ');
}
}
$(document).ready(function () {
makePagination(5); // Number of pages
});
跟
<div id='pagination'></div>
这就是
我最终用来更改页面的内容
.JS
function makePagination(){
var x = document.getElementById('pagination');
var y='|';
for(var i=0; i<=(pageMAX); i++){
y= y+"<a id ='pageNumber"+i+"' onclick='changePage("+ (i+1)+");'>"+(i+1)+"</a>'n ";
if(i!=(fileLIST.length/10)) y=y+' | ';
}
x.innerHTML=y
}
function changePage(k){
pageCUR = k-1;
display();
}
以及 HTMLdiv
<div id='pagination'></div>
相关文章:
- 传递给 PHP 表单时 JavaScript 动态变量上的未定义索引
- 谷歌索引iframe动态创建了什么
- 在 JavaScript 中动态创建带有字符串索引的二维表
- 在使用 javascript 动态添加行时,我正在增加索引值,但出现错误
- 如何在jquery中根据父级和内部父级动态更改输入元素的索引
- 为动态生成的表查找表行索引
- 使用 jQuery 创建动态元素 单击事件始终返回 for 循环中的最后一个索引
- 如何在ng-options中添加两个索引,并使用Angular.js动态设置值
- 将动态输入索引到其他动态输入数组
- 动态 jquery ui 可排序块的索引/位置
- 如何动态地将索引分配给角度中的 ng-show 值
- 我试图获取动态选择的选定索引的值.JavaScript
- 使用 JS 动态设置 z 索引
- 分页表的动态索引
- 动态递增 Javascript 函数参数名称的索引
- 动态控制的 z 索引
- 创建具有动态索引的Json
- 动态更改文本框的选项卡索引
- 如何为音频文件数组的每个索引动态绑定src值到指令作用域变量
- 如何让谷歌在Angular.js应用中索引动态标题