2016-04-22 11 views
0

テーブルのページングをHTMLに追加しようとしています。 たとえば、私は100行のテーブルを持っているし、1つのpage.So 10レコードをそれぞれ10レコードで10レコードでそれを行うためにページ分割をしています。 私はそれを自動的に行うようにして、ユーザーが特にページをクリックして見る必要はありません。あるページから別のページへのオートメーションのやり方と、最初のページに戻るページのhtmlのページにあるページ番号

Iコード

ここ
<style type="text/css"> 
    .paging-nav { 
    text-align: right; 
    padding-top: 2px; 
    } 
    .paging-nav a { 
    margin: auto 1px; 
    text-decoration: none; 
    display: inline-block; 
    padding: 1px 7px; 
    background: #91b9e6; 
    color: white; 
    border-radius: 3px; 
    } 
    .paging-nav .selected-page { 
    background: #187ed5; 
    font-weight: bold; 
    } 
    .paging-nav, 
    #tableData { 
    'width: 400px; 
    margin: 0 auto; 
    font-family: Arial, sans-serif; 
    } 
    </style> 

    $(document).ready(function() { 
    $('#file').paging({limit:10}); 
    }); 

ファイル以下でpaging.jsを

使用は、ページ分割されるテーブルのIDです。どうすればテーブルのページを自動的に変えることができますか?すべての答えは大歓迎です。

答えて

0

ここから始める方法の例です。 これは単なる例示であり、何も例を示していません。あなた自身の保護のため

//create 
 
el = $("<table></table>"); 
 
for (var i = 1; i !== 100; i++) { 
 
    el.append("<tr><td>" + i + "</td><td>buuurp</td></tr>"); 
 
} 
 
el.data("intStart", 1); 
 
el.appendTo("body"); 
 

 

 
//fuction 
 
function showRow(j = 10) { //default var j = 10; you can call showRow(50) for 50 as example 
 
    var i = $("table").data().intStart; //grabs data that hold the number of currect first element to view 
 
    $("tr").hide(); 
 
    // hides all 
 
    $("tr").filter(function(index) { 
 
    return index >= i - 1 && index < i + j - 1; //jquery has 0-9 we count in 1-10 so -1 
 
    }).show(); //shows the one needed 
 
    $("table").data().intStart += j; //addes 'j' to the counter 
 
    if ($("table").data().intStart > $("table").children("tr").lenght) { 
 
    clearInterval(timer); //if we reach the end we can kill this 
 
    } 
 
} 
 

 
showRow(); 
 
var timer = setInterval(function() { 
 
    showRow(); 
 
}, 3000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

+0

私はそれを行うにはどのようにいくつかのアイデアを得たおかげで –

関連する問題