使用jQuery Quick Pagination實現ul li的分頁

最近項目中要使用分頁技術，對於用戶發佈的新聞信息進行分頁，所以須要對分頁技術進行研究。

因爲目前項目中對於展現在前臺的數據庫中的表格數據有兩種呈現方式，一種是ul li的列表形式，一種是表格的形式，所以對應這兩種展現方式，

其分頁的方式也不一樣。

對於ul li方式展現的數據分頁，我在網上找了不少資料，最終決定採用jquery quick pagination這個js.

首先訪問它的主頁：http://www.jquery4u.com/demos/jquery-quick-pagination/

主頁上有一個可供下載的demo.下載以後能夠看到，其中包含一個css文件和兩個js文件，咱們須要使用的只是quickpager.jquery.js.

引入這個文件<script type="text/javscript" src="js/quickpager.jquery.js"></script>,

別忘了引入jquery <script type="text/javascript" src="js/jquery-1.8.2.js"></script>

頁面中的列表結構是普通的ul li的結構，相似這樣,我給ul指定一個class.

<ul class="mylist">

<li><a href=""></a></li>

.......這裏省略若干條，js循環出的數據只要是ul li的格式就能夠

</ul>

那麼在頁面中加入以下代碼：

<script type="text/javscript">

$(document).ready(function(){

   $("ul.mylist").quickPager({pageSize:"6"});   //這裏的ul.後面的就是ul的class, quickPager()後的pagesize參數是分頁每一頁的li的記錄個數，這裏我讓每頁顯示6條；

});

</script>

初步分頁效果以下；

那麼這就是基本的分頁了，可是下面的頁面index沒有橫向顯示，所以如今就須要給列表項上加css了，那麼先讓咱們看看渲染事後的ul li變成了什麼結構。

能夠看到，在本來的ul li的下面又加了一個ul class="simplePageNav就是分頁導航，li 這個就是分頁的頁號號碼，若是選中某個頁，會增長一個currentPage class在 simplePageNav前面，咱們使用css把頁號這部分float:left，並作一些樣式的設定，那麼這個分頁就能夠用了。

最終效果以下:

經過這個例子，咱們可使用quickpager來對ui li進行分頁，並能夠控制分頁的列表數量，同時，對於表格數據的分頁，這種放大並不適用，必須使用datatable這種形式.