基于jquery编写分页插件
网络编程 发布日期：2025/11/14 浏览次数：1
正在浏览：基于jquery编写分页插件
扩展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="/UploadFiles/2021-04-02/nowait.gif">
下面测试一下：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="mypagination.css"/>
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.2.6.js">
运行效果图如下：
以上就是本文的全部内容，希望对大家的学习有所帮助。