分页插件

最新推荐文章于 2021-06-16 23:43:40 发布
最新推荐文章于 2021-06-16 23:43:40 发布
阅读量229 收藏 1
点赞数
分类专栏： javascript 文章标签： 分页 插件 页码 js 跳转页码
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lujingjing567/article/details/78749851
版权

今天来说一下分页插件
先来一张效果图
这是我们项目中的分页效果图

这里css样式大家自己写吧！
这是html

 <div class="page">
                <div class="pagenum fl">
                显示:<span>1</span>~<span>10</span>,&nbsp;共<span></span>页,&nbsp;每页<span ></span>条,&nbsp;共:<span></span>条记录
                </div>
                <div class="module-page fr">
                    <ul class="pagination" id="page">
                    </ul>
               <div class="pageJump">
                   <span>跳转到</span>
                   <input type="text"/>
                   <span>页</span>
                   <button type="button" class="button">确定</button>
               </div>
       </div>

 </div>

这里是js代码

/**
 * zhixing.ouyang
 * @param Data 返回分页数据
 * @param pageId 分页ul的ID
 * @param callback 回调方法
 * @constructor
 */
function Page(Data,pageId,callback){

     var inputnumber=Data.number+1;
     var startnum=(Data.number*Data.size)+1;
     var endnum=Data.number*Data.size+Data.numberOfElements;
    var opt={
            num:Data.totalPages,    //页码数
            startnum:inputnumber,   //指定页码
            start:startnum,
            end:endnum,
            elem:$(pageId),        //指定的元素
            callback:callback

            };
        var set = $.extend({num:null,startnum:1,elem:null,callback:null},opt||{});
        if(set.startnum>set.num||set.startnum<1){
            set.startnum = 1;
        }
        var n = 0,htm = '';
        var clickpages = {
            elem:set.elem,
            num:set.num,
            callback:set.callback,
            init:function(){
                this.elem.next('div.pageJump').children('.button').unbind('click')
                this.JumpPages();
                this.elem.parent().find("input").val(opt.startnum);
                this.elem.parent().parent("div[class='page']").find("div[class='pagenum fl']").find("span").eq(2).html(set.num);
                this.elem.parent().parent("div[class='page']").find("div[class='pagenum fl']").find("span").eq(4).html(Data.totalElements);
                this.elem.parent().parent("div[class='page']").find("div[class='pagenum fl']").find("span").eq(3).html(Data.size);
                this.elem.parent().parent("div[class='page']").find("div[class='pagenum fl']").find("span").eq(0).html(opt.start);
                this.elem.parent().parent("div[class='page']").find("div[class='pagenum fl']").find("span").eq(1).html(opt.end);
                this.elem.children('li').click(function () {
                    var txt = $(this).children('a').text();
                    var page = '', ele = null;
                    var page1 = parseInt(clickpages.elem.children('li.active').attr('page'));
                    if (isNaN(parseInt(txt))) {
                        switch (txt) {
                            case '下一页':
                                if (page1 == clickpages.num) {
                                    return;
                                }
                                if (page1 >= (clickpages.num - 2) || clickpages.num <= 6 || page1 < 3) {
                                    ele = clickpages.elem.children('li.active').next();
                                } else {
                                    clickpages.newPages('next', page1 + 1);
                                    ele = clickpages.elem.children('li.active');
                                }
                                break;
                            case '上一页':
                                if (page1 == '1') {
                                    return;
                                }
                                if (page1 >= (clickpages.num - 1) || page1 <= 3 || clickpages.num <= 6) {
                                    ele = clickpages.elem.children('li.active').prev();
                                } else {
                                    clickpages.newPages('prev', page1 - 1);
                                    ele = clickpages.elem.children('li.active');
                                }
                                break;
                            case '«':
                                if (page1 == '1') {
                                    return;
                                }
                                if (clickpages.num > 6) {
                                    clickpages.newPages('«', 1);
                                }
                                ele = clickpages.elem.children('li[page=1]');
                                break;
                            case '»':
                                if (page1 == clickpages.num) {
                                    return;
                                }
                                if (clickpages.num > 6) {
                                    clickpages.newPages('»', clickpages.num);
                                }
                                ele = clickpages.elem.children('li[page=' + clickpages.num + ']');
                                break;
                            case '...':
                                return;
                        }
                    } else {
                        if ((parseInt(txt) >= (clickpages.num - 3) || parseInt(txt) <= 3) && clickpages.num > 6) {
                            clickpages.newPages('jump', parseInt(txt));
                        }
                        ele = $(this);
                    }
                    page = clickpages.actPages(ele);
                    if (page != '' && page != page1) {
                        if (clickpages.callback){
                            clickpages.callback(parseInt(page));
                        }
                    }
                });
            },
            //active
            actPages:function (ele) {
                ele.addClass('active').siblings().removeClass('active');
                return clickpages.elem.children('li.active').text();
            },
            JumpPages:function () {
                this.elem.next('div.pageJump').children('.button').click(function(){
                    var i = parseInt($(this).siblings('input').val());
                    if(isNaN(i)||(i<=0)||i>clickpages.num){
                        return;
                    }else if(clickpages.num>6){
                        clickpages.newPages('jump',i);
                    }else{
                        var ele = clickpages.elem.children('li[page='+i+']');
                        clickpages.actPages(ele);
                        if (clickpages.callback){
                            clickpages.callback(i);
                        }
                        return;
                    }

                    if (clickpages.callback){
                        clickpages.callback(i);
                    }
                })
            },

            //newpages
            newPages:function (type, i) {
                var html = "",htmlLeft="",htmlRight="",htmlC="";
                var HL = '<li><a>...</a></li>';
                html = '<li><a  aria-label="Previous">&laquo;</a></li>\
                    <li><a>上一页</a></li>'
                for (var n = 0;n<3;n++){
                    htmlC += '<li '+((n-1)==0?'class="active"':'')+' page="'+(i+n-1)+'"><a>'+(i+n-1)+'</a></li>';
                    htmlLeft += '<li '+((n+2)==i?'class="active"':'')+' page="'+(n+2)+'"><a>'+(n+2)+'</a></li>';
                    htmlRight += '<li '+((set.num+n-3)==i?'class="active"':'')+' page="'+(set.num+n-3)+'"><a>'+(set.num+n-3)+'</a></li>';
                }

                switch (type) {
                    case "next":
                        if(i<=4){
                            html+='<li page="1"><a>1</a></li>'+htmlLeft+HL+'<li page="'+set.num+'"><a>'+set.num+'</a></li>';
                        }else if(i>=(set.num-3)){
                            html+='<li page="1"><a>1</a></li>'+HL+htmlRight+'<li page="'+set.num+'"><a>'+set.num+'</a></li>';
                        }else{
                            html += '<li page="1"><a>1</a></li>'+HL+htmlC+HL+'<li page="'+set.num+'"><a>'+set.num+'</a></li>';
                        }
                        break;
                    case "prev":
                        if(i<=4){
                            html+='<li page="1"><a>1</a></li>'+htmlLeft+HL+'<li page="'+set.num+'"><a>'+set.num+'</a></li>';
                        }else if(i>=(set.num-3)){
                            html+='<li page="1"><a>1</a></li>'+HL+htmlRight+'<li page="'+set.num+'"><a>'+set.num+'</a></li>';
                        }else{
                            html += '<li page="1"><a>1</a></li>'+HL+htmlC+HL+'<li page="'+set.num+'"><a>'+set.num+'</a></li>';
                        }
                        break;
                    case "«" :
                        html+='<li class="active" page="1"><a>1</a></li>'+htmlLeft+HL+'<li page="'+set.num+'"><a>'+set.num+'</a></li>';
                        break;
                    case "»" :
                        html+='<li page="1"><a>1</a></li>'+HL+htmlRight+'<li class="active" page="'+set.num+'"><a>'+set.num+'</a></li>';
                        break;
                    case "jump" :
                        if(i<=4){
                            if(i==1){
                                html+='<li class="active" page="1"><a>1</a></li>'+htmlLeft+HL+'<li page="'+set.num+'"><a>'+set.num+'</a></li>';
                            }else{
                                html+='<li page="1"><a>1</a></li>'+htmlLeft+HL+'<li page="'+set.num+'"><a>'+set.num+'</a></li>';
                            }
                        }else if((i>=set.num-3)&&(set.num>=7)){
                            if(i==set.num){
                                html+='<li page="1"><a>1</a></li>'+HL+htmlRight+'<li class="active" page="'+set.num+'"><a>'+set.num+'</a></li>';
                            }else{
                                html+='<li page="1"><a>1</a></li>'+HL+htmlRight+'<li page="'+set.num+'"><a>'+set.num+'</a></li>';
                            }
                        }else{
                            html += '<li page="1"><a>1</a></li>'+HL+htmlC+HL+'<li page="'+set.num+'"><a>'+set.num+'</a></li>';
                        }
                }
                html += '<li><a>下一页</a></li>\
                    <li><a  aria-label="Next">&raquo;</a></li>';
                if (this.num > 5 || this.num < 3) {
                    set.elem.html(html);
                    clickpages.init({num:set.num,elem:set.elem,callback:set.callback});
                }
            }
        }
        /*if(set.num<=1){
            $(".pagination").html('');
            return;
        }else */if(parseInt(set.num)<=6){
            n = parseInt(set.num);
            var html='<li><a  aria-label="Previous">&laquo;</a></li>\
                    <li><a>上一页</a></li>';
            for(var i=1;i<=n;i++){
                if(i==set.startnum){
                    html+='<li class="active" page="'+i+'"><a>'+i+'</a></li>';
                }else{
                    html+='<li page="'+i+'"><a>'+i+'</a></li>';
                }
            }
            html +='<li><a>下一页</a></li>\
                    <li><a  aria-label="Next">&raquo;</a></li>';
            set.elem.html(html);
            clickpages.init();
        }else{
            clickpages.newPages("jump",set.startnum)
        }
}
@-567
关注
专栏目录
页码插件
羽下佳人的博客
11-29 651
调用： var param = { pageNumber : 1, pageSize : 1; name : $("#searchname").val(), ssgs : ssgs } getByPage("#page",param,"../../bond/showZqzt",showZqzt); // 页码回调函数 function showZqzt(d
自制页码插件（JQ）
qq_30975339的博客
01-22 488
这里的JS代码使用的是JQ库，使用前，请先载入jquery（版本没啥要求） 效果如下： 包括首页、上一页、下拉框、输入框、跳转、下一页、尾页等功能按钮，分别对应类名见HTML代码实例。 这些按钮的样式请自行设置，但是结构要按照下面的HTML代码书写。 按钮可自行搭配，对应的按钮功能不需要也可在JS代码2中自行删除。 （我在下面的js代码中设置了一些下拉框、输入框样式，如果不喜欢可以删掉自...
html页码插件,最实用的jQuery分页插件
weixin_35857552的博客
06-16 780
在做商城和订单管理的时候，常常会用到分页功能，所以我封装了一个jQuery的分页插件，该插件主要实现上下翻页，输入数字跳转等功能。具体实现如下：输入参数需要当前页码pageNo，总页码totalPage，回调函数callback。主要的实现有两个函数，一个是根据当前页和总页数生成相应的html的代码，一个是事件绑定及回调函数的执行。creatHtml函数：creatHtml:function(){...
导航栏分页
weixin_44540436的博客
06-05 4670
1、结构搭建HTML代码 <div class="page"></div> 2、页面修饰的css样式代码 .page{ width:500px;margin:100px auto;color: #ccc; }.page a{ display: inline-block;color: #428bca;height: 25px; line-height: 25px;paddi...
vue pc分页组件
abc_26zm的博客
07-07 267
引入组件 <pagerNew :currentPage=“currentPage” :totalPage=“totalPage” @pageChange=“pageChange”> <template> <div class="pager" v-if="total_page>1"> <div class="page-item"> <template v-for="(item,index) in pages">
分页插件.zip
05-15
本文将详细介绍一个基于jQuery的分页插件，它具有代码简洁、兼容性良好的特点，能够很好地支持IE5及以上的浏览器。 首先，jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互...
分页插件jar包pagehelper
最新发布
09-29
PageHelper是一款非常流行的MyBatis分页插件，它能够方便地实现数据库的分页查询功能。本压缩包包含了PageHelper的jar包以及其依赖的jsqlparser库。 1. **PageHelper插件**：PageHelper是针对MyBatis框架的一个辅助...
vue分页插件_vue.js分页插件下载
07-16
Vue.js 提供了多种实现分页功能的方法，包括自定义组件和使用现成的分页插件。 一、Vue分页插件的基本原理 Vue分页插件的核心思想是通过计算当前页、总页数、每页显示数量等参数，动态生成分页条目，并监听用户的...
适配所有浏览器的js分页插件
06-18
**JavaScript分页插件概述** 在网页开发中，分页是一种常见的数据展示方式，它能够有效地组织大量数据，提高用户体验。本项目提供的“适配所有浏览器的js分页插件”是一个轻量级且易用的解决方案，尤其适用于那些...
bootstrap分页插件
10-12
Bootstrap分页插件是一种基于流行的前端框架Bootstrap设计的页面导航工具，主要用于在大量数据或内容中实现分块显示，提供用户友好的翻页体验。在Web应用中，当需要展示的数据超过一个页面所能容纳的范围时，分页就...
漂亮的thinkphp分页类
你YY个呸的
07-07 2376
话不多说，先来张图片看看 1，修改核心类库，代码如下 <?php // +---------------------------------------------------------------------- // | ThinkPHP [ WE CAN DO IT JUST THINK IT ] // +-------------------------------------
简单的html数据分页控件封装
Clement-Xu的专栏
03-03 5621
好用的分页控件有好多，但似乎自己实现和封装一个比较方便，以后修改也方便。 大概的想法是创建一个page.js文件，把所需的函数封装到window的page对象中。需要使用这个控件的时候，引用page.js文件，然后调用它里面的方法来初始化、更新和显示控件。控件可以根据返回数据的结果判断要不要显示总页数和“末页”按钮。 效果如下： 有总页数的情况： 没总页数的情况：
HTML && CSS 学习笔记（5）div、class（关键词：html/div/class）
Henry1991back的博客
11-28 5582
HTML <div> 标签实例文档中的一个部分会显示为绿色：<div style="color:#00FF00"> <h3>This is a header</h3> <p>This is a paragraph.</p> </div>浏览器支持IE Firefox Chrome Safari Opera 所有主流浏览器都支持 标签。定义和用法<div> 可定义文档中的分区或节（d
div中class常用名称
郭亮均的博客
04-28 6032
做站的时候经常为怎么命名id、class发愁，弄个中文拼音的命名吧太老土，弄个洋气的英文吧苦于肚子里墨水不多，整理了一下常用的命名，英语不太好的争取背下来，以后不会为怎么命名儿发愁了， 以下为页面模块的常用命名： 头：header 内容：content/container 尾：footer 导航：nav 侧栏：sid...
jquery分页插件pagination教程
热门推荐
李秀才的博客
02-16 1万+
pagination使用起来非常的方便。第一步：引入分页需要的js（jquery.pagination.js）和css(pagination.css)pagination插件下载地址：http://download.csdn.net/download/qq_33556185/9427446第二步：将分页条容器写到页面里（固定代码） &lt;div class="pages"&gt;...
编程语言之php封装的page分页类完整实例，在Web应用程序中，分页功能在展示大量数据时是十分必要的。PHP作为一种流行的Web开发语言，自然也提供了分页的实现方法。本文将介绍如何在PHP中实现分页
凯歌技术控团队
08-21 8418
【代码】编程语言之php封装的page分页类完整实例，在Web应用程序中，分页功能在展示大量数据时是十分必要的。PHP作为一种流行的Web开发语言，自然也提供了分页的实现方法。本文将介绍如何在PHP中实现分页。
div模拟页面切换
zhuyangxing的专栏
08-12 2781
web端实现浏览器的快速页面切换（特别适用于android做壳，内部用h5来实现的app） 设计思路： 多个div每个div单独占用一整页需要跳页时使用div的显示（新页）和隐藏（旧页）即可。 经测试隐藏div(页)与显示div(页)之间的事件并不会相互影响 其实设计思路和jqm（jqueryMobile）设置思路一致 jqm里面是以data-role="page
Mybatis全效分页插件实战教程
Mybatis全面分页插件是一种强大的工具，它允许开发人员在Mybatis框架中更高效地进行分页处理，特别是在需要在执行分页查询时实现拦截和定制SQL语句的场景下。该插件利用了Mybatis拦截器（Interceptor）的功能，通过...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值