4

ページングされたテーブルを作成しています（ページごとに10個の要素のみを表示しています）。ユーザーがテーブルを動的に追加しているため、テーブルの大きさがわかりません。テーブル内のページに対応する番号が必要です。ユーザーがページの1つをクリックすると、そのページの要素が読み込まれます。また、ユーザーが現在どのページを表示しているかを表示したいと思います。現在、ユーザーが表示しているページ、次の戻る、最初と最後のボタンを追跡する整数があります。私が本当に知る必要があるのは、クリック可能な動的な数字のセットを作成する方法だけです。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>

また、現在のページのインデックスとmax（last）ページのインデックスを保持する2つのグローバル変数pageCURとpageMAXがあります。

4

2 に答える 2

1

これは、JavaScriptでページ付けを生成する方法です（jQueryを使用）：JSFiddle-例

window.changePage = function ...これは、この関数をグローバルにするためのJSFiddleの回避策にすぎないことに注意してください。次のページをロードするためのJScriptコードがすぐに挿入されます。

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>​

</ p>

于 2012-05-16T17:24:41.617 に答える
0

これは私が私のページを変更するために使用することになったものです

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>
于 2012-05-17T12:40:55.803 に答える