jquery简单的分页插件和详细过程

首先HTML部分首先需要引入jquery

.

div里面是渲染页码的位置，pageCount是总页数，current 是当前页数，backFn点击回调的页面

css部分

js部分demo.js

(function($){  

    function init(dom, args){

        console.log(dom, args)

        if(args.current <= args.pageCount){

            fillHtml(dom, args);

            bindEevent(dom, args);

        }else{

            alert('请输入正取的页码')

        }

    };

    // 页面渲染

    function fillHtml(dom, args) {

        // 上一页

        $('.page').html('');

        if(args.current > 1){

            dom.append('<a href="#" class="prevPage">上一页</a>');

        }else{

            dom.remove('.prevPage');

            dom.append('<span class="disabled">上一页</span>');

        }

        // 中间页数

        // 第一页

        if(args.current !==1 && args.current >=4 && args.pageCount !== 4){

            dom.append('<a href="#" class="num">1</a>')

        }

        if(args.current -2 > 2 && args.pageCount > 5) {

            dom.append('<span>...</span>');

        }

        // 中间连续页

        var start = args.current -2;

        var end = args.current + 2;

        for(; start <= end; start++){

            if(start <= args.pageCount && start >= 1){

                if(start == args.current){

                    dom.append('<a href="#" class="current">'+ start +'</a>')

                }else{

                    dom.append('<a href="#" class="num">'+ start +'</a>')

                }

            }

        }

        // 最后一页

        if(args.current +2 < args.pageCount -1 && args.pageCount > 5) {

            dom.append('<span>...</span>');

        }

        if(args.current !== args.pageCount && args.current < args.pageCount -2 && args.pageCount !== 4) {

            dom.append('<a href="#" class="num">'+ args.pageCount +'</a>')

        }

        // 下一页

        if(args.current < args.pageCount){

            dom.append('<a href="#" class="nextPage">下一页</a>')

        }else{

            dom.remove('.prevPage');

            dom.append('<span class="disabled">下一页</span>')

        }

 

    };

    // 分页逻辑处理

    function bindEevent(dom, args) {

        dom.on('click', '.num',function(){

            var cur = parseInt($(this).text());

            changePage(dom,args,cur)

        })

        dom.on('click', '.prevPage',function(){

            var  cur =parseInt(dom.find('.current').text())

            changePage(dom,args,cur -1)

        })

        dom.on('click', '.nextPage',function(){

            var  cur =parseInt(dom.find('.current').text())

            changePage(dom,args,cur + 1)

        })

    };

    // 回调渲染

    function changePage(dom,args,page){

        fillHtml(dom,{current:page,pageCount:args.pageCount});

        args.backFn(page);

    }

    // jQuery里边的表达是方法

    $.fn.extend({

        createdPage:function(options){

            var args = $.extend({

                pageCount:5,

                current:1,

                backFn:function(){}

            },options)

            // 入口函数

            init(this, args)

        }

    })

})(jQuery)