如何使我的無序列表使用jquery進行分頁？

-3

我想知道如何讓我的<ul>分頁？如何使我的無序列表使用jquery進行分頁？

實施例：先前1 2 3 4 5下

當我點擊下這將是這樣的

先前2 3 4 5 6下

當我點擊PREV它將是這樣的

先前1 2 3 4 5下

等等...

<ul class="pages"> 
<li>Prev</li> 
<li>1</li> 
<li>2</li> 
<li>3</li> 
<li>4</li> 
<li>5</li> 
<li>6</li> 
<li>7</li> 
<li>8</li> 
<li>9</li> 
<li>10</li> 
<li>Next</li> 
</ul>

來源

2012-10-05 Sui Go

您是否已經編寫了任何可以顯示給我們的代碼？ –

我試過使用pajinate插件，但它與我實際需要的不同，因爲分頁基於li的數量。 –

使用'$（li）：gt（4）' –

你也可以使用:gt(n)//n denotes number

$(function(){ 
    $("li:gt(5)").css("display", "none"); 
     });

JsFiddle Demo

如果你想看到的6至10元，那麼你可以

$(function(){ 
    $("li:lt(6)").css("display", "none"); 
     });

來源

2012-10-05 12:58:08

可以包括下一個？每次下一次都會點擊第6次李會顯示第1次李會隱藏，等等：3 –

@SuiGo請嘗試，如果你卡住了，那麼我們會幫助你，但首先你自己嘗試... –

好的，當我想查看第6-10個李的 –

使用jQuery .nextUntil()和.prevUntil()

這些鏈接已經有演示

來源

2012-10-05 12:37:23 Dipak

您可以使用slice，使得：

$(".pages li").slice(5).css("display", "none");

然而，這將包括你的「下一個」項目，但使用jQuery您可以輕鬆計數li並排除最後一個索引 - 這是讀者的練習。

來源

2012-10-05 12:39:22

這是如何正確的方式我試過這[jsfiddle]（http://jsfiddle.net/tpBdc/） –

你的jsfiddle有什麼問題是它使用Mootools和不導入jQuery。這是[更新示例]（http://jsfiddle.net/tpBdc/4/）。 –

對不起，我怎麼能包括下一個，當點擊下一個第6將顯示，當我點擊prev它會倒退：3 –

試試這個JS，我創建功能：

 function showPage (pageIndex, pageSize) { 
      var items = $(".pages > li"); 
      $(items).hide(); 

      // Range 
      var start = pageIndex * pageSize; 
      var end = start + pageSize; 

      $(items).slice(start, end).show(); 

     }

然後調用showPage（0，10）; // PageNumber = 1，PageSize = 10

來源

2016-05-11 06:26:46 tomexou

如何使我的無序列表使用jquery進行分頁？

回答

相關問題