基於jquery編寫分頁外掛_jquery-js教程-PHP中文網

首頁

web前端

js教程

基於jquery編寫分頁外掛_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:11 PM

擴充JQuery很容易，作為一個練習，寫一個簡單的分頁插件，程式碼量不大，直接看程式碼好了：

$.fn.mypagination = function(totalProperty,opts){ 
  opts = $.extend({ 
    perPage:10, 
  
    callback:function(){ 
    } 
  },opts||{}); 
     
  return this.each(function(){ 
    function numPages(){ 
      return Math.ceil(totalProperty/opts.perPage); 
    } 
  
     
    function selectPage(page){ 
      return function(){ 
        currPage = page; 
        if (page<0) currPage = 0; 
        if (page>=numPages()) currPage = numPages()-1; 
        render(); 
  
        $('img.page-wait',panel).attr('src','images/wait.gif'); 
        opts.callback(currPage+1); 
        $('img.page-wait',panel).attr('src','images/nowait.gif'); 
      } 
    } 
     
    function render(){ 
  
      var html = '<table><tbody><tr>'  
        +'<td><a href="#"><img class="page-first"></a></td>' 
        +'<td><a href="#"><img class="page-prev"></a></td>' 
        +'<td><span>第<input type="text" class="page-num">页/共'+numPages()+'页</span></td>' 
        +'<td><a href="#"><img class="page-next"></a></td>' 
        +'<td><a href="#"><img class="page-last"></a></td>' 
        +'<td><img src="images/nowait.gif" class="page-wait"></td>' 
        +'<td><span style="padding-left:50px;">检索到'+totalProperty+'记录</span></td>' 
        +'</tr></tbody></table>'; 
      var imgFirst = 'images/page-first-disabled.gif'; 
      var imgPrev = 'images/page-prev-disabled.gif'; 
      var imgNext = 'images/page-next-disabled.gif'; 
      var imgLast = 'images/page-last-disabled.gif'; 
      if (currPage > 0){ 
        imgFirst = 'images/page-first.gif'; 
        imgPrev = 'images/page-prev.gif'; 
      } 
      if (currPage < numPages()-1){ 
        imgNext = 'images/page-next.gif'; 
        imgLast = 'images/page-last.gif'; 
      } 
      panel.empty(); 
      panel.append(html); 
      $('img.page-first',panel) 
        .bind('click',selectPage(0)) 
        .attr('src',imgFirst);  
      $('img.page-prev',panel) 
        .bind('click',selectPage(currPage-1)) 
        .attr('src',imgPrev);   
      $('img.page-next',panel) 
        .bind('click',selectPage(currPage+1)) 
        .attr('src',imgNext);   
      $('img.page-last',panel) 
        .bind('click',selectPage(numPages()-1)) 
        .attr('src',imgLast); 
      $('input.page-num',panel) 
        .val(currPage+1) 
        .change(function(){ 
          selectPage($(this).val()-1)(); 
        }); 
    } 
     
    var currPage = 0; 
    var panel = $(this); 
    render(); 
  
  }); 
}

登入後複製

下面測試一下：

<head> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <link rel="stylesheet" href="mypagination.css"/> 
  <script type="text/javascript" src="jquery-1.2.6.js"></script> 
  <script type="text/javascript" src="jquery.mypagination.js"></script> 
  <script> 
    $(document).ready(function(){ 
      $('#mypage').mypagination(10112,{ 
        callback:function(page){ 
          alert(page); 
        } 
      }); 
    }); 
  </script> 
</head> 
<div id="mypage" class="mypagination"></div>

登入後複製

運作效果圖如下：

以上就是本文的全部內容，希望對大家的學習有所幫助。

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

gmail信箱登陸入口在哪裡

7663

CakePHP 教程

1393

C# 教程

1205

steam的賬戶名稱是什麼格式

win11激活密鑰永久

Related knowledge

前端熱敏紙小票打印遇到亂碼問題怎麼辦？ Apr 04, 2025 pm 02:42 PM

前端熱敏紙小票打印的常見問題與解決方案在前端開發中，小票打印是一個常見的需求。然而，很多開發者在實...

誰得到更多的Python或JavaScript？ Apr 04, 2025 am 12:09 AM

Python和JavaScript開發者的薪資沒有絕對的高低，具體取決於技能和行業需求。 1.Python在數據科學和機器學習領域可能薪資更高。 2.JavaScript在前端和全棧開發中需求大，薪資也可觀。 3.影響因素包括經驗、地理位置、公司規模和特定技能。

神秘的JavaScript：它的作用以及為什麼重要 Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。