分页效果

最新推荐文章于 2024-05-16 15:28:38 发布
最新推荐文章于 2024-05-16 15:28:38 发布
阅读量654 收藏 1
点赞数
分类专栏： 前端笔记 jquery 文章标签： 分页 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分页效果（face项目）</title>
    <script src="src/jquery-1.11.1.js"></script>
    <script src="src/jquery.pagebar.1.0.0.js"></script>
    <link rel="stylesheet" href="css/pagebar.css">
</head>
<body>

    <div class="pagebar" id="pagebar"></div>

    <script>

        initPageBar(5, 25,30,160);
        function initPageBar(pageNo, totalPage,pageSize,rowCount) {
         /*   if (pageInstance != null) {
                // 处理分页
                $.fn.setTotalPage(pageInstance,pageNo, totalPage,pageSize,rowCount);
                return;
            }*/
            pageInstance = $.fn.jpagebar({
                renderTo : $(".pagebar"),
                totalpage : totalPage,
                currentPage : pageNo,
                pageSize : pageSize,
                rowCount : rowCount,
                pageNameCssName : 'pageName',
                onClickPage : function(pageIndex,pageSize) {
                    $.fn.setCurrentPage(this, pageIndex,pageSize);
                    pageNo = pageIndex;
                    pageSize=pageSize;
                }
            });

        }


    </script>
</body>
</html>

这里写图片描述

///jquery.pagebar.1.0.0.js内容如下：


(function($) {
    $.extend($.fn, {
        jpagebar : function(setting) {
            var pb = $.extend({
                // pagebar 对象div
                renderTo : $(document.body),
                // 总页码
                totalpage : 0,
                // 当前页码
                currentPage : 0,
                //每页显示条数
                pageSize:0,
                //总条数
                rowCount:0,
                // 分页条样式
                pagebarCssName : 'pagebar',
                // 页码样式
                pageNumberCssName : 'page_number',
                // 首页、Pre、Next、尾页样式
                pageNameCssName : 'pageName',
                // 选中首页、Pre或Next、尾页样式
                currentPageNameCssName : 'current_pageName',
                // 当前选中页码样式
                currentPageNumberCssName : 'current_page_number',
                // 显示总页码样式
                totalpageNumberCssName : 'totalpage_number',
                // 点击页码action
                onClickPage : function(pageIndex,pageSize) {

                }
            }, setting);

            pb.resetPagebar = function() {
                var _this = this;
                _this.renderTo = (typeof _this.renderTo == 'string' ? $(_this.renderTo) : _this.renderTo);

                /*
                 * ----------> html : <div> ---->pagebar <a>首页</a> <a>Pre</a> <a>&nbsp;</a>... ----> 显示页码 <a>Next</a> <a>尾页</a> <span class="show_page_detail"> ---->显示信息 <span
                 * class="current_page">currentpage</span> ----> 显示当前页码 <span>/</span> <span class="total_page">totalpage</span> ----> 显示总页码 </span> </div> <-----------
                 */
                var pagebar = _this.renderTo;
                pagebar.attr('class', _this.pagebarCssName);

                // 清空分页导航条
                pagebar.empty();


                // 分页
                var front_block = parseInt(_this.currentPage) - 4;// 当前页码前面一截,原来是5
                var back_block = parseInt(_this.currentPage) + 4;// 当前页码后面一截,原来是5

                // 处理首页、Pre
                if (_this.currentPage == 1) {
                    // 当前页为第一页
                    $('<a>首页</a> ').attr('class', _this.pageNameCssName + ' ' + _this.currentPageNameCssName).appendTo(pagebar);
                    $('<a>上一页</a> ').attr('class', _this.pageNameCssName + ' ' + _this.currentPageNameCssName).appendTo(pagebar);

                }
                else {
                     //当前页大于第一页
                    $('<a>首页</a> ').attr('class', _this.pageNameCssName).bind("click", function() {
                        _this.onClickPage(1,pageSize);
                  }).appendTo(pagebar);
                    $('<a>上一页</a> ').attr('class', _this.pageNameCssName).bind("click", function() {
                        _this.onClickPage(_this.currentPage - 1,pageSize);
                    }).appendTo(pagebar);
                }

                // 处理数字页码

                if (_this.totalpage == 1) {
                    // 共1页
                    $('<a>1</a> ').attr('class', _this.currentPageNumberCssName).bind("click", function() {
                        _this.onClickPage(1,pageSize);
                    }).appendTo(_this.renderTo);

                }
                else {
                    // 有多页
                    var tempBack_block = _this.totalpage;
                    var tempFront_block = 1;
                    if (back_block < _this.totalpage)
                        tempBack_block = back_block;
                    if (front_block > 1)
                        tempFront_block = front_block;

                    for ( var i = tempFront_block; i <= tempBack_block; i++) {
                        if (_this.currentPage == i) {
                            // 当前页
                            $('<a>' + i + '</a> ').attr('class', _this.pageNumberCssName + ' ' + _this.currentPageNumberCssName).appendTo(pagebar);
                        }
                        else {
                            $('<a>' + i + '</a> ').attr('class', _this.pageNumberCssName).bind("click", function() {
                                _this.onClickPage(this.innerHTML,pageSize);
                            }).appendTo(pagebar);

                        }
                    }
                }

                // Next, 尾页 处理
                if (_this.currentPage == _this.totalpage) {
                    // 当前页为最后一页
                    $('<a>下一页</a> ').attr('class', _this.pageNameCssName + ' ' + _this.currentPageNameCssName).appendTo(pagebar);
                  $('<a>尾页</a> ').attr('class', _this.pageNameCssName + ' ' + _this.currentPageNameCssName).appendTo(pagebar);
                }
                else {
                    $('<a>下一页</a> ').attr('class', _this.pageNameCssName).bind("click", function() {
                        _this.onClickPage(parseInt(_this.currentPage) + 1,pageSize);
                    }).appendTo(pagebar);
                    $('<a>尾页</a> ').attr('class', _this.pageNameCssName).bind("click", function() {
                        _this.onClickPage(_this.totalpage,pageSize);
                   }).appendTo(pagebar);
                }


                var pager='';
                var pageSize=_this.pageSize;
                var rowCount=_this.rowCount;
                pager += "<div class=\"pageTextBox\"  id=\"selectRowCount\">共"+rowCount+"项，每页显示 <select id=\"pageSize\" name=\"pageSize\"  class=\"input_ff\"  onchange=\"$.fn.changeTotal()\">";               
                if(pageSize==10){
                    pager += " <option value=\"10\" selected=\"selected\" > 10 </option>";
                }else{
                    pager += " <option value=\"10\"  > 10 </option>";
                }
                if(pageSize==15){
                    pager += " <option value=\"15\" selected=\"selected\" > 15 </option>";
                }else{
                    pager += " <option value=\"15\"  > 15 </option>";
                }
                if(pageSize==20){
                    pager += " <option value=\"20\" selected=\"selected\" > 20 </option>";
                }else{
                    pager += " <option value=\"20\"  > 20 </option>";
                }
                if(pageSize==30){
                    pager += " <option value=\"30\" selected=\"selected\" > 30 </option>";
                }else{
                    pager += " <option value=\"30\"  > 30 </option>";
                }
                if(pageSize==50){
                    pager += " <option value=\"50\" selected=\"selected\" > 50 </option>";
                }else{
                    pager += " <option value=\"50\"  > 50 </option>";
                }
                if(pageSize==100){
                    pager += " <option value=\"100\" selected=\"selected\" > 100 </option>";
                }else{
                    pager += " <option value=\"100\"  > 100 </option>";
                }
                pager += " </select>条记录" ;
                pager +="<div class=\"goPage\">";
                pager +='到<input text id=\"pageNoText\" onkeyup="$.fn.limitSize('+_this.totalpage+')" placeholder="'+_this.totalpage+'" style="width:40px;">页';
                pager +='<span class="oBtn goBtn" onclick="$.fn.jumpPage()" >跳转</span>'; 
                pager +="</div>";
                pager +="</div>";

                $(pager).appendTo(pagebar);
                if (totalpage = 0) {
                    return;
                }

                 /*红色字体显示当前页
                $('<span>共'+_this.totalpage+'页</span> ').attr('class',_this.totalpageNumberCssName).appendTo(pagebar);
                 $('&nbsp;&nbsp;&nbsp;<span>当前'+_this.currentPage+'</span> ').attr('class',_this.currentPageNumberCssName).appendTo(pagebar);
                 $('<span>/</span>').appendTo(pagebar);
                 $('<span>共'+_this.totalpage+'页</span> ').attr('class',_this.totalpageNumberCssName).appendTo(pagebar);

                 pagebar.find("a").attr('class',_this.pageNumberCssName);*/
            };
            pb.resetPagebar();
            return pb;
        },

        changeTotal : function() {
            $('#searchBtn').click();
        },
        limitSize : function(renderTo) {
            var text = $("#pageNoText").val();
            text=text.replace(/\D/g,'');
            if(text > renderTo){
                $("#pageNoText").val(renderTo);
            }else if(text <= 0 ){
                $("#pageNoText").val(1);
            }else{
                $("#pageNoText").val(text);
            }

        },
        jumpPage : function(_this){
            var pageNoText = $("#pageNoText").val();
            var pageSize= $("#pageSize option:selected").val();
            if(pageNoText != ""){
                search(pageNoText,pageSize,"next");
            }
        },
        setCurrentPage : function(_this, currentPage,pageSize) {
            _this.currentPage = currentPage;
            _this.pageSize = pageSize;
            _this.resetPagebar(_this);
        },
        getCurrentPage:function(_this) {
            return _this.currentPage;
        },
        setTotalPage : function(_this,currentPage,totalpage,pageSize,rowCount) {
            _this.currentPage = currentPage;
            _this.totalpage = totalpage;
            _this.pageSize = pageSize;
            _this.rowCount = rowCount;
            _this.resetPagebar(_this);
        }

    });
})(jQuery);
 /*css代码如下： */
.pagebar {
    width:100%;
    margin:10px 0 0 0;
    position:relative;
    display:inline-block;
    padding:10px;
    background:#e5eee2;
    border-top:2px solid #309a0a;
    z-index:12;
}


#pagebar{position:fixed;bottom:0;left:0;}

#selectRowCount{line-height:27px;}





.pagebar a { 
    color: #5A9D0F;
    border: 1px solid #5A9D0F;
    cursor: pointer;
    height: 25px;
    text-align: center;
    line-height: 25px;
    display: inline-block;
    margin-left: 5px;
    float: left;
}


.pagebar a:hover,.pagebar a.on { /* background: #ededed;
    color: #666; */
    color: #FFF;
    background-color: #5A9D0F;
}



.pageName { /* border: solid 1px #AAE;
    cursor: pointer;
    color: #5F7690; */
    width: 80px;
}

.page_number { /* float: left;
    padding: 0.3em 0.5em;
    margin-right: 5px;
    margin-bottom: 5px;
    text-decoration: none;
    border: solid 1px #AAE;
    cursor: pointer; */
    width: 25px;
}

.current_pageName {
    cursor: default;
    border: 1px solid #eee;
    color: #ddd;
}


.current_page_number { /* background: #26B;
    color: white;
    border: solid 1px #eee;
    cursor: default; */
    color: #FFF;
    background-color: #a6a7ab;
    width: 25px;
}

#jpagebar a.current_pageName,#jpagebar a.current_page_number {
    color: #FF6600;
    font-weight:bold;   
    border:none;
    background: none;
}


.totalpage_number {
    color: #2278db;
    border: 1px solid #5A9D0F;
    height: 25px;
    line-height: 25px;
    width: 60px;
    text-align: center;
    /* position:absolute;
    left:-65px; */
    margin-left: 5px;
}
/* 前台统一的分页样式 about pagebar -linlijun*/

.pagebar  a.current_pageName,#jpagebar  a.current_pageName {color:#999999;
border: 1px solid #999999;}
.pagebar  a.current_page_number,#jpagebar  a.current_page_number{
    color:#ffffff; background-color:#7cc064;}
.pagebar  a:hover, .pagebar a.on,#jpagebar  a:hover, #jpagebar a.on{ 
    background: #7cc064; color:#ffffff; background-color: #7cc064; }
.pagebar  a.current_pageName:hover{color:#999999;
border: 1px solid #999999; background:none;cursor: default;}



.input_ff{width:50px;height:25px;}
#pageNoText{text-align:center; margin:0 4px 0 5px;}
.pageTextBox,.goPage{display:inline-block; margin:0 0 0 20px;}

.pagebar .goBtn{margin:0 0 0 4px;padding:0 10px;color: #5A9D0F;height:25px;line-height:25px;
    border: 1px solid #5A9D0F;background:none;border-radius:0;}
.pagebar .goBtn:hover{color:#ffffff;background:#7cc064}
酷jjs
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JSP实现分页效果
01-20
在JSP中实现分页效果是一项常见的任务，尤其是在构建数据量较大的Web应用时。分页可以帮助用户更方便地浏览和管理大量的信息，避免一次性加载过多数据导致页面响应速度变慢。下面我们将详细讨论如何在JSP中实现分页...
【学习笔记45】JavaScript的分页效果
yizhiyang
11-28 415
JavaScript的分页效果
前端实现分页效果
热门推荐
welcome
09-09 1万+
前端分页？后端做得了的事，我前端也要做。后端做不了的事，我前端更要做。
关于分页，那些你不得不知道的原理、场景及测试要点
最新发布
NHB234567的博客
05-16 794
是一种将大量数据划分成多个页面以方便查看和处理的功能。当一个数据表格中包含了大量数据时，将其全部显示在同一页上会使页面变得非常拥挤和难以浏览。因此，将数据表格分成若干个子集，并将这些子集分别显示在不同的页面上，能够提高用户的浏览和操作效率。通常情况下，一个数据报表分页包含以下组件：1.分页控制器：用于切换页码或者跳转到特定的页面。2.每页显示条目数选择器：允许用户自定义每页显示的数据条目数量。3.：显示分页后的数据。4.汇总行：对分页后的数据进行汇总统计，如总数、平均数等。
不知道哪种分页效果更好？一次性教给你四种分页方案！
芋艿V
12-05 283
???? 这是一个或许对你有用的社群???? 一对一交流/面试小册/简历优化/求职解惑，欢迎加入「芋道快速开发平台」知识星球。下面是星球提供的部分资料：《项目实战（视频）》：从书中学，往事上“练”《互联网高频面试题》：面朝简历学习，春暖花开《架构 x 系统设计》：摧枯拉朽，掌控面试高频场景题《精进 Java 学习指南》：系统学习，互联网主流技术栈《必读 Java 源码专栏》：知其然，知其所以然????这是一个或许...
如何用php实现分页效果
vx15528175269的博客
05-17 715
分页效果在网页中是常见的，可是怎样才能实现分页呢，今天做了两种方法来实现一下分页的效果 首先，我们需要准备在数据库里面准备一个表，并且插入数据，这些都是必需的前提工作了，不多说，如图所示（库名为jereh,表名为n_content）： 步骤分析： 我们需要分页的话，需要用到 "select * from tableName limit num1,num2”;这是一个限定查询的语句，后面跟两个参数，num1为从第几个开始查找，num2为查找的信息的个数，如我想查找2,3,4这三条数据，如下图所示..
页面的分页效果
JXXHA的博客
11-25 1227
在做之前我们要知道我们需要什么 1.放置内容的容器 2.放置页数的容器 3.当前页面的页数(这个应该是最重要的) 4.算出一个可以渲染出多少页 HTML代码 <ul class="content"> </ul> <ul class="page"></ul> CSS代码 *{ padding: 0; margin: 0; } .box{ position: absolute; top: 20%;
js分页效果
09-22
本示例聚焦于使用原生JavaScript实现一个分页效果，同时结合图片的运动效果，以提升用户体验。以下是对这个话题的详细阐述： 1. **JavaScript基础**：JavaScript是一种广泛应用于Web开发的客户端脚本语言，它可以...
css实现的漂亮的分页效果代码(橘黄色与蓝色)
09-25
在网页设计中，分页效果是常见的用户界面元素，用于帮助用户浏览大量内容时分批次查看，例如在文章列表、商品目录或论坛中。本文将详细介绍一个使用CSS实现的美观分页效果，其特色是结合了橘黄色和蓝色的配色方案。 ...
Django自定义分页效果
09-21
本文将详细介绍如何在Django中自定义分页效果。 首先，我们需要理解分页的基本原理：根据用户指定的每页数据条数和当前页码，计算出在数据库中应获取数据的起始和结束位置。Django提供了一个内置的分页模块`django....
gridview分页效果
08-25
"gridview分页效果"是Android开发中的一个重要知识点，主要涉及到如何在GridView中实现数据的分页加载，以提高用户体验并优化性能。 首先，我们需要理解GridView的工作原理。GridView继承自AbsListView，它会根据其...
div+js分页效果
11-26
div分页浏览，可上下浏览 div id命名为div+位置号，通 js函数通过要显示的div var eventSizez//总页数 var currentPosition = 0; //初始位置 //下一个正在办理事项办理情况 function next() { if(currentPosition 0){ $('#div'+currentPosition).hide(); currentPosition--; if(currentPosition <0){ currentPosition=eventSize-1; } $('#div'+currentPosition).show(); }else{ $('#div'+currentPosition).hide(); currentPosition=eventSize-1; $('#div'+currentPosition).show(); } } //初始化正在办理事项情况 function initPostion(position) { if(position==0){ $('#div0').show() return; } }
html+css实现简单分页页码效果
04-19
html+css实现简单分页页码效果源码，尚且没有复杂的后台，给前端新手学习之用
JS分页效果JS分页效果JS分页效果
07-13
直接将HTML文件和CSS文件放在同一目录点击即可查看效果
原生js实现分页效果
10-14
在JavaScript中实现分页效果是网页开发中的常见需求，尤其在处理大量数据时，分页能提高用户体验并优化加载速度。本文将详细介绍如何使用原生JavaScript来实现这一功能。我们将通过一个具体的实例来探讨分页的核心...
Android实现简单的分页效果
01-05
本文实例为大家分享了Android分页效果的具体代码，供大家参考，具体内容如下 1.实现分页最主要的就是封装分页代码，然后在按钮里实现相关的操作 /** * 分页工具 * * @Project App_Page * @Package ...
Vue使用Element-UI实现分页效果
见证自己学习,成长的记录
02-04 9892
分页在展示数据列表的场景肯定是非常多的。一般的项目开发中，数据量特别大，一般都是后端接口直接处理分页返回，前端直接调用即可。但是前端也是可以不需要借助后端，自己也是可以处理分页的。今天我这个后端开发就站在前端的角度上，处理列表分页。友情提示：数据量大的情况下一定要后端处理分页，前端虽然可以实现，但是仅限数据量不是特别大的情况下！先给大家看下我的列表，一个特别单纯的列表，只是返回一个用户列表，并且根据id倒叙排序。感觉elementui对分页组件做的特别好。
前端案例：基于el-table和el-pagination实现数据的分页效果
m0_67401746的博客
03-02 3003
首先使用 el-table(表格) 和 el-pagination(分页) 组件需要npm 下载 Element UI 组件库，下载安装方式参见官网：Element - The world’s most popular Vue UI frameworkElement，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库[这里是图片001]https://element.eleme.cn/#/zh-CN/component/installation 目录 一、案例效果 二、实现步骤&amp
【案例练习】02—32 个网站分页效果的练习
web前端开发
01-05 501
英文 | https://niemvuilaptrinh.medium.com/how-to-create-pagination-and-20-pagination-examples-fo...
flask实现分页效果
03-30
要在Flask中实现分页效果，可以使用Flask-Paginate扩展。下面是实现分页的步骤： 1. 安装Flask-Paginate扩展： ``` pip install Flask-Paginate ``` 2. 在Flask应用中导入Flask-Paginate： ``` from flask_...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值