Home>Article>Web Front-end> 基于jquery编写分页插件_jquery

基于jquery编写分页插件_jquery

WBOY
WBOY Original
2016-05-16 15:11:46 1114browse

扩展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','//m.sbmmt.com/m/faq/images/nowait.gif'); } } function render(){ var html = '' +'' +'' +'' +'' +'' +'' +'' +'
基于jquery编写分页插件_jquery基于jquery编写分页插件_jquery页/共'+numPages()+'页基于jquery编写分页插件_jquery基于jquery编写分页插件_jquery基于jquery编写分页插件_jquery检索到'+totalProperty+'记录
'; 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(); }); }

下面测试一下:

      

运行效果图如下:

以上就是本文的全部内容,希望对大家的学习有所帮助。

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn