首頁 > 開發者 > 網站開發

jquery自訂外掛程式實現分頁效果，jquery分頁

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

jquery自訂外掛程式實現分頁效果，jquery分頁

這節介紹如何自訂jquery外掛程式，實現分頁效果，話不多說，先看看實現的效果：



分頁外掛程式

實現的代碼如下： 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head>    <meta charset="utf-8">    <title>page test</title><style>html,body,#pages,items{font-size:11px;font-family:"宋體","Times New Roman";}.page_item{background:#C9DCD7;width:155px;text-align:left;padding:10px;border-bottom:1px solid #3CF;}.page_item:hover{background:#A9C9FA;cursor:pointer;}#page_ctrl{padding-top:5px;}.page_ctrl{width:40px;text-align:center;background:#A9C9FA;float:left;margin:2px;padding-top:5px;padding-bottom:5px;}.page_ctrl:hover{background:#C9DCD7;cursor:pointer;}</style>    <script type="text/javascript" src="../../zTree/js/jquery-1.4.4.min.js"></script>    <script type="text/javascript">var showItemInfo;(function($){  $.fn.itemPage = function(options){var defaults = {};var options = $.extend(defaults, options);var data=options.data,//資料currpage=options.currpage,//當前頁pagesize=options.pagesize;//每頁顯示的資料條目器var total=data.total;var items=$("<div id='items'></div>"),pagectrl=$("<div id='page_ctrl'></div>");var first=$("<div id=\"first\" class=\"page_ctrl\" onClick=\"showPage('first')\">首 頁</div>"),prev=$("<div id=\"prev\" class=\"page_ctrl\" onClick=\"showPage('prev')\">前一頁</div>"),next=$("<div id=\"next\" class=\"page_ctrl\" onClick=\"showPage('next')\">後一頁</div>"),last=$("<div id=\"last\" class=\"page_ctrl\" onClick=\"showPage('last')\">末 頁</div>");var start=getStartindex(),end=getEndindex();for(var i=start;i<end;i++){var itemi=$("<div class='page_item' onClick='showItemInfo("+i+")'>"+data.items[i].text+"</div>");items.append(itemi);}pagectrl.append(first),pagectrl.append(prev),pagectrl.append(next)pagectrl.append(last);var container = $(this);container.append(items),container.append(pagectrl);function getStartindex(){return (currpage-1)*pagesize;}function getEndindex(){var endIndex=0;if(data.total%pagesize!=0 && currpage==getLastPage()){endIndex = data.total;}else {endIndex = currpage*pagesize;}return endIndex;}showItemInfo = function(i){console.log(i);};}})(jQuery);</script>        <script type="text/javascript">var PAGE_DATA={"total":10,"items":[{"id":1,"text":"資料1"},{"id":2,"text":"資料2"},{"id":3,"text":"資料3"},{"id":4,"text":"資料4"},{"id":5,"text":"資料5"},{"id":6,"text":"資料6"},{"id":7,"text":"資料7"},{"id":8,"text":"資料8"},{"id":9,"text":"資料9"},{"id":10,"text":"資料10"}]};var currpage=1;var pagesize=4;$(document).ready(function (){loadPages(currpage);});function showPage(page){console.log(page);switch(page){case "prev":{//前一頁if(currpage>1){currpage=currpage-1;}else{alert("沒有上一頁了！");}break;}case "next":{//後一頁if(currpage!=getLastPage()){currpage=currpage+1;}else{alert("沒有下一頁了！");}break;}case "last":{//最後一頁currpage=getLastPage();break;}default:{currpage=1;//第一頁break;}}loadPages(currpage);};function loadPages(page){$('#pages').html("");$('#pages').itemPage({data:PAGE_DATA,currpage:page,pagesize:pagesize});};function getLastPage(){var total=PAGE_DATA.total;if(total%pagesize==0){return total/pagesize;}else{return parseInt(total/pagesize)+1;}}</script></head><body><div id="pages">    </div></body></html>

下面說說實現思路。實現分頁效果，資料的載入可以分為兩種情況：一次性擷取資料和動態擷取資料。一次性擷取資料就是將所要查詢的資料一次性查詢出來，在前台去做分頁處理；動態擷取資料是根據當前頁面和每頁顯示的條目數去動態擷取資料。對於第一種，可在資料量比較小的情況下使用，可以減去每次去請求資料庫和寫分頁sql語句的麻煩；對於第二種，適用於資料量比較大的時候，當資料量特別大的時候，一次性查詢資料不論是前端還是後端，無疑都會減緩程式的執行效率與時間。
第二種情況的實現比第一種的實現簡單，所以本文就不做說明，本文為第一種。
首先，擷取資料。在程式中，我類比定義了一個資料，JSON格式的，包括總條數和各對象。
其次，根據currpage和pagesize載入所要顯示的條目。這裡面，擷取起始數和結束數是關鍵。起始數比較簡單，為（currpage-1）*pagesize；終止數稍微麻煩一點，因為有一個判斷data.total%pagesize是否為零和當前頁是不是最後一頁，當data.total%pagesize！=0並且滿足當前頁為最後一頁的條件時，終止數為data.total，否組終止數為currpage*pagesize。
再次，頁面控制的實現。頁面控制的關鍵是currpage。第一頁，currpage=1即可；最後一頁得判斷total%pagesize是否為零，是值為total/pagesize，不是值為otal/pagesize取整+1；上一頁，如果當前頁大於零的情況下為當前頁減1，否則，沒有上一頁；下一頁，如果當前頁小於最後一頁的情況下，當前頁加1，否則，沒有最後一頁。
最後，載入顯示。


實現分頁用什jquery外掛程式好

jquery有個外掛程式叫dataTables你找找吧
jquery.dataTables.min.js
 
那個jQuery外掛程式實現分頁，代碼中是怎實現的

<%
page=clng(request("page"))
Set rs=Server.CreateObject("ADODB.RecordSet")
if BigClass<>"" and SmallClass <>"" then
sql="select * from news where BigClassName='"&BigClass&"' and SmallClassName='"&SmallClass&"' order by id desc"
rs.Open sql,conn,1,1
elseif BigClass<>"" then
sql="select * from news where BigClassName='"&BigClass&"' order by id desc"
rs.Open sql,conn,1,1
end if
if rs.eof and rs.bof then
response.Write("暫時沒有記錄")
else
%>
<div class="newslist">
<%
rs.PageSize=20
if page=0 then page=1
pages=rs.pagecount
if page > pages then page=pages
rs.AbsolutePage=page
for j=1 to rs.PageSize
%>
<ul><li><span class="time"><%= RS("AddDate") %></span><a href="news_info.asp?id=<%= RS("id") %>" target="_blank"><%= RS("TITLE") %></a></li></ul>
<%
rs.movenext
if rs.eof then exit for
next
%>
</div>
<div class="clear"></div>
<div class="pagePanel pagePane2">
<ul><li class="cr"><form method=Post action="news.asp?BigClass=<%=BigClass%>&SmallClass=<%=SmallClass%>">
<%if......餘下全文>>
 

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More