jQuery实现翻页插件

妖狐艹你老母 2022-05-26 05:24 208阅读 0赞

推荐一个自己的博客：[JS -- 手动实现数组原生方法][JS --]

使用编辑器：vs code

主要用到的技术：css3 + jQuery

欢迎加QQ：1759668379一起讨论

html:这次html里面也没写什么东西，主要实在js文件中利用for循环动态生成结构。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>翻页插件</title>
        <link rel="stylesheet" href="fycj.css">
    </head>
    <body>
        <div class="page"></div>
        <script src="jquery.js"></script>
        <script src="fycj.js"></script>
        <script>
            $('.page').create({
                pageCount:20,//总页数
                current:5,//当前页码
                backFn:function(p){}//回调函数
            })
        </script>
    </body>
    </html>

css文件：

*{
        margin: 0;
        padding: 0;
        list-style: none;
        text-decoration: none;
    }
    .page{
        width: 500px;
        height: 200px;
        margin: 100px auto;
    }
    .page a,
    .page .noPre,
    .current{
        display: inline-block;
        padding: 0 10px;
        height: 20px;
        line-height: 20px;
        border: 1px solid #ddd;
        color: #428bca;
        border-radius: 4px;
        vertical-align: middle;
        margin-left: 5px;
    }
    .page a:hover{
        border:1px solid #428bca;
    }
    .page .noPre{
        background-color: #ddd;
        color: #eee;
    
    }
    .page .current{
        background-color: #428bca;
        color:#eee;
    }

js文件：内容看注释好了

(function(){
        //入口函数
        function init(dom,arg){
            //判断传入的页码是否符合标准
            if(arg.current <= arg.pageCount){
                fillhtml(dom,arg);
                bindEvent(dom,arg);
            }else{
                alert('请输入正确的页码')
            }
        }
        //动态构建网页内容
        function fillhtml(dom,arg){
            //清空页面布局
            dom.empty();
            //大体分三部分：上一页，中间页码，下一页
            //上一页
            //上一页又分为可点击与不可点击两种
            if(arg.current > 1){
                dom.append('<a class="prePage" href="#">上一页</a>');
            }else {
                dom.remove('.prePage');
                dom.append('<span class="noPre">上一页</span>');
            }
            //中间页码
            //中间页码又分为中间可显示的5个页码与...与两端的页码
            //第一页
            if(arg.current != 1 && arg.current > 3){
                dom.append('<a class="tcdNum" href="#">1</a>');
            }
            //判断当前页面是否距离第一页大于3，是则需要...
            if(arg.current-3 > 1){
                dom.append('<span>...</span>');
            }
            //判断中间需要显示的页码
            var start = arg.current-2;
            var end = arg.current+2;
            for(;start <= end;start++){
                //判断开始页面是否大于1且是否小于最大页码
                if(start >= 1 && start <= arg.pageCount){
                    //判断是否是选中页面
                    if(start == arg.current){
                        dom.append('<span class="current">'+start+'</span>');
                    } else {
                        dom.append('<a class="tcdNum" href="#">'+start+'</a>');
                    }
                }
            }
            //后置的...
            if(arg.current+3 < arg.pageCount){
                dom.append('<span>...</span>');
            }
            //最后一页
            if(arg.current != arg.pageCount && arg.current < arg.pageCount-2){
                dom.append('<a class="tcdNum" href="#">'+arg.pageCount+'</a>');
            }
            //下一页
            //下一页与上一页类似
            if(arg.current < arg.pageCount){
                dom.append('<a class="nextPage" href="#">下一页</a>');
            }else {
                dom.remove('.prePage');
                dom.append('<span class="noPre">下一页</span>')
            }
        }
        //处理点击事件
        function bindEvent(dom,arg){
            //分为点击上一页，点击页码与点击下一页
            //点击上一页
            //获得当前页面，-1 然后调用fillhtml重绘页面
            dom.on('click','.prePage',function(){
                var cur=parseInt(dom.children('.current').text());
                fillhtml(dom,{'current':cur-1,'pageCount':arg.pageCount});
                if(typeof arg.backFn=='function'){
                    arg.backFn(cur-1);
                }
            })
            //点击页码
            //获得点击页码，调用fillhtml重绘页面
            dom.on('click','.tcdNum',function(){
                var cur=parseInt($(this).text());
                fillhtml(dom,{'current':cur,'pageCount':arg.pageCount});
                if(typeof arg.backFn=='function'){
                    arg.backFn(cur);
                }
            })
            //点击下一页
            //获得当前页面，+1 然后调用fillhtml重绘页面
            dom.on('click','.nextPage',function(){
                var cur=parseInt(dom.children('.current').text());
                fillhtml(dom,{'current':cur+1,'pageCount':arg.pageCount});
                if(typeof arg.backFn=='function'){
                    arg.backFn(cur+1);
                }
            })
        }
        //扩展jquery封装函数
        $.fn.create=function(option){
    // 
    //      extend函数：当调用create时，如果传了参数option
    //      则使用传入的参数，否则使用预定义的参数
    // 
            var arg=$.extend({
                pageCount:10,
                current:2,
                backFn:function(){}
            },option)
            init(this,arg);
        }
    })(jQuery);

效果图：

![70][]

欢迎留言批评指正。

(完)

[JS --]: https://blog.csdn.net/jacoox/article/details/82693994
[70]: /images/20220526/0b3a888b2a4c46c89097906361a426e9.png

发表评论取消回复

表情：

评论列表（有 0 条评论，208人围观）

还没有评论，来说两句吧...

相关阅读

相关 react封装翻页插件

插件演示今天用react封装一个翻页插件，先给大家看一下效果：![在这里插入图片描述][20200404114451204.png] 翻页插件上面的文字是从后台获取

淩亂°似流年/ 2023年07月22日 03:42/ 0 赞/ 20 阅读

相关自己编写JQuery扩展分页插件

背景公司分页插件用到了kkpager [https://github.com/pgkk/kkpager][https_github.com_pgkk_kkpager

Bertha 。/ 2022年09月24日 12:14/ 0 赞/ 218 阅读

相关 [jQuery]jQuery DataTables插件自定义Ajax分页实现

![JQuery DataTables插件自定义Ajax分页实现][JQuery DataTables_Ajax] 前言昨天在博客园的博问上帮一位园友解决了一个问题，

绝地灬酷狼/ 2022年08月23日 00:47/ 0 赞/ 271 阅读

相关 Jquery插件实现分页查询

1.场景分析近期在项目中很多地方都用到了分页查询，今天笔者就前端的Jquery插件实现分页详细地跟大家讲解下，希望能帮助到需要的各位！ 2.实现方案 ①

梦里梦外;/ 2022年06月11日 23:25/ 0 赞/ 384 阅读

相关原生JavaScript实现前端翻页插件

之前做项目有遇到需要使用翻页插件，公司原来使用的是基于jQuery和bootstrap扩展的插件，依赖较多，后来自己就尝试着用原生的JS实现插件效果，由于技术水平有限，花了一天

本是古典何须时尚/ 2022年05月31日 02:35/ 0 赞/ 364 阅读

相关 jQuery实现翻页插件

推荐一个自己的博客：[JS -- 手动实现数组原生方法][JS --] 使用编辑器：vs code 主要用到的技术：css3 + jQuery 欢迎加QQ：

妖狐艹你老母/ 2022年05月26日 05:24/ 0 赞/ 209 阅读

相关 jquery分页插件simplePagination.js

主页及文档 [http://flaviusmatis.github.io/simplePagination.js/][http_flaviusmatis.github.

男娘i/ 2022年04月12日 10:22/ 0 赞/ 340 阅读

相关 BookBlock：一个实现翻页效果的jQuery插件

日期：2013-5-15 来源：[GBin1.com][] [![BookBlock：一个实现翻页效果的jQuery插件][BookBlock_jQuery]][BookB

深藏阁楼爱情的钟/ 2022年02月20日 13:22/ 0 赞/ 291 阅读

相关 Django_实现翻页功能

Django提供了翻页器。用Django的Paginator类实现一、views模块导入Paginator类实现数据分页 ApiTest/apiviews.py

朱雀/ 2021年09月24日 13:14/ 0 赞/ 470 阅读

相关后台管理系统——翻页插件

翻页插件（含每页数目功能） (function ($) { function TurnPage(options) {

浅浅的花香味﹌/ 2021年07月25日 21:28/ 0 赞/ 514 阅读