js分页

最新推荐文章于 2024-05-11 21:58:00 发布
最新推荐文章于 2024-05-11 21:58:00 发布
阅读量470 收藏 1
点赞数 1
分类专栏： Web前端 文章标签： js分页
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pa5201314/article/details/52701406
版权 
(function($) {
    var ms = {
        init : function(obj, args) {
            return (function() {
                ms.fillHtml(obj, args);
                ms.bindEvent(obj, args);
            })();
        },
        // 填充html
        fillHtml : function(obj, args) {
            return (function() {
                obj.empty();
                // obj.append('<div class="page_title">');
                // obj.append('第' +
                // parseInt(args.current)+'/'+parseInt(args.pageCount) +
                // '页&nbsp;&nbsp;共&nbsp;' + args.total + '&nbsp;记录');
                // obj.append('</div>');
                if (args.pageCount > 0) {
                    if (parseInt(args.current) == 1) {
                        obj.append('<a href="javascript:void(0)">首页</a>');
                        obj.append('<a href="javascript:void(0)">上一页</a>');
                    }
                    if (parseInt(args.current) >= 2) {
                        obj.append('<a href="javascript:void(0);" class="firsPage">首页</a>');
                        obj.append('<a href="javascript:void(0);" class="prevPage">上一页</a>');
                    }
                    if (parseInt(args.current) < 5) {// 当多于两个时交给下一个循环
                        for (var i = 1; i <= 7; i++) {
                            if (parseInt(args.current) == i) {// 当前页显示
                                obj.append('<span class="current">' + i
                                        + '</span>');
                            } else if (parseInt(args.pageCount) >= i) {// 可递增页显示
                                obj.append('<a href="javascript:void(0);" class="tcdNumber">'
                                                + i + '</a>');
                            } else {
                                break;
                            }
                        }
                    }

                    if (parseInt(args.current) >= 5
                            && parseInt(args.current) <= (parseInt(args.pageCount) - 4)) {
                        obj.append('<a href="javascript:void(0);" class="tcdNumber">'
                                        + (parseInt(args.current) - 3) + '</a>');
                        obj.append('<a href="javascript:void(0);" class="tcdNumber">'
                                        + (parseInt(args.current) - 2) + '</a>');
                        obj.append('<a href="javascript:void(0);" class="tcdNumber">'
                                        + (parseInt(args.current) - 1) + '</a>');
                        obj.append('<span class="current">'
                                + parseInt(args.current) + '</span>');
                        obj.append('<a href="javascript:void(0);" class="tcdNumber">'
                                        + (parseInt(args.current) + 1) + '</a>');
                        obj.append('<a href="javascript:void(0);" class="tcdNumber">'
                                        + (parseInt(args.current) + 2) + '</a>');
                        obj.append('<a href="javascript:void(0);" class="tcdNumber">'
                                        + (parseInt(args.current) + 3) + '</a>');
                    }

                    // 做减法防止页数小于0
                    if (parseInt(args.current) >= 5
                            && parseInt(args.current) > (parseInt(args.pageCount) - 4)) {
                        if (parseInt(args.current) == parseInt(args.pageCount)) {
                            if (parseInt(args.current) > 6) {
                                obj.append('<a href="javascript:void(0);" class="tcdNumber">'
                                                + (parseInt(args.current) - 6)
                                                + '</a>');
                            }
                            if (parseInt(args.current) > 5) {
                                obj.append('<a href="javascript:void(0);" class="tcdNumber">'
                                                + (parseInt(args.current) - 5)
                                                + '</a>');
                            }
                            obj.append('<a href="javascript:void(0);" class="tcdNumber">'
                                            + (parseInt(args.current) - 4)
                                            + '</a>');
                            obj.append('<a href="javascript:void(0);" class="tcdNumber">'
                                            + (parseInt(args.current) - 3)
                                            + '</a>');
                            obj.append('<a href="javascript:void(0);" class="tcdNumber">'
                                            + (parseInt(args.current) - 2)
                                            + '</a>');
                            obj.append('<a href="javascript:void(0);" class="tcdNumber">'
                                            + (parseInt(args.current) - 1)
                                            + '</a>');
                            obj.append('<span class="current">'
                                    + parseInt(args.current) + '</span>');
                        }
                        if (parseInt(args.current) == parseInt(args.pageCount) - 1) {
                            if (parseInt(args.current) > 5) {
                                obj.append('<a href="javascript:void(0);" class="tcdNumber">'
                                                + (parseInt(args.current) - 5)
                                                + '</a>');
                            }
                            obj.append('<a href="javascript:void(0);" class="tcdNumber">'
                                            + (parseInt(args.current) - 4)
                                            + '</a>');
                            obj.append('<a href="javascript:void(0);" class="tcdNumber">'
                                            + (parseInt(args.current) - 3)
                                            + '</a>');
                            obj.append('<a href="javascript:void(0);" class="tcdNumber">'
                                            + (parseInt(args.current) - 2)
                                            + '</a>');
                            obj.append('<a href="javascript:void(0);" class="tcdNumber">'
                                            + (parseInt(args.current) - 1)
                                            + '</a>');
                            obj.append('<span class="current">'
                                    + parseInt(args.current) + '</span>');
                            obj.append('<a href="javascript:void(0);" class="tcdNumber">'
                                            + (parseInt(args.current) + 1)
                                            + '</a>');
                        }
                        if (parseInt(args.current) == parseInt(args.pageCount) - 2) {
                            obj.append('<a href="javascript:void(0);" class="tcdNumber">'
                                            + (parseInt(args.current) - 4)
                                            + '</a>');
                            obj.append('<a href="javascript:void(0);" class="tcdNumber">'
                                            + (parseInt(args.current) - 3)
                                            + '</a>');
                            obj.append('<a href="javascript:void(0);" class="tcdNumber">'
                                            + (parseInt(args.current) - 2)
                                            + '</a>');
                            obj.append('<a href="javascript:void(0);" class="tcdNumber">'
                                            + (parseInt(args.current) - 1)
                                            + '</a>');
                            obj.append('<span class="current">'
                                    + parseInt(args.current) + '</span>');
                            obj.append('<a href="javascript:void(0);" class="tcdNumber">'
                                            + (parseInt(args.current) + 1)
                                            + '</a>');
                            obj.append('<a href="javascript:void(0);" class="tcdNumber">'
                                            + (parseInt(args.current) + 2)
                                            + '</a>');
                        }
                        if (parseInt(args.current) == parseInt(args.pageCount) - 3) {
                            obj.append('<a href="javascript:void(0);" class="tcdNumber">'
                                            + (parseInt(args.current) - 3)
                                            + '</a>');
                            obj.append('<a href="javascript:void(0);" class="tcdNumber">'
                                            + (parseInt(args.current) - 2)
                                            + '</a>');
                            obj.append('<a href="javascript:void(0);" class="tcdNumber">'
                                            + (parseInt(args.current) - 1)
                                            + '</a>');
                            obj.append('<span class="current">'
                                    + parseInt(args.current) + '</span>');
                            obj.append('<a href="javascript:void(0);" class="tcdNumber">'
                                            + (parseInt(args.current) + 1)
                                            + '</a>');
                            obj.append('<a href="javascript:void(0);" class="tcdNumber">'
                                            + (parseInt(args.current) + 2)
                                            + '</a>');
                            obj.append('<a href="javascript:void(0);" class="tcdNumber">'
                                            + (parseInt(args.current) + 3)
                                            + '</a>');
                        }
                    }

                    if (parseInt(args.current) < parseInt(args.pageCount)) {
                        obj.append('<a href="javascript:void(0);" class="nextPage">下一页</a>');
                        obj.append('<a href="javascript:void(0);" class="lastPage">末页</a>');
                    }
                    if (args.current == args.pageCount) {
                        obj.append('<a href="javascript:void(0)">下一页</a>');
                        obj.append('<a href="javascript:void(0)">末页</a>');
                    }
                }
            })();
        },
        // 绑定事件
        bindEvent : function(obj, args) {
            return (function() {
                // 当前页
                obj.one("click", "a.tcdNumber", function() {
                    var current = parseInt($(this).text());
                    ms.fillHtml(obj, {
                        "current" : current,
                        "pageCount" : parseInt(args.pageCount)
                    });
                    if (typeof (args.backFn) == "function") {
                        args.backFn(current);
                    }
                });
                // 上一页
                obj.one("click", "a.prevPage",
                        function() {
                            var current = parseInt(obj.children("span.current")
                                    .text());
                            ms.fillHtml(obj, {
                                "current" : current - 1,
                                "pageCount" : parseInt(args.pageCount)
                            });
                            if (typeof (args.backFn) == "function") {
                                args.backFn(current - 1);
                            }
                        });
                // 下一页
                obj.one("click", "a.nextPage",
                        function() {
                            var current = parseInt(obj.children("span.current")
                                    .text());
                            ms.fillHtml(obj, {
                                "current" : current + 1,
                                "pageCount" : parseInt(args.pageCount)
                            });
                            if (typeof (args.backFn) == "function") {
                                args.backFn(current + 1);
                            }
                        });
                // 首页
                obj.one("click", "a.firsPage",
                        function() {
                    var current = 1;
                    ms.fillHtml(obj, {
                        "current" : current,
                        "pageCount" : parseInt(args.pageCount)
                    });
                    if (typeof (args.backFn) == "function") {
                        args.backFn(current);
                    }
                });
                // 末页
                obj.one("click", "a.lastPage",
                        function() {
                    var current = parseInt(args.pageCount);
                    ms.fillHtml(obj, {
                        "current" : current,
                        "pageCount" : parseInt(args.pageCount)
                    });
                    if (typeof (args.backFn) == "function") {
                        args.backFn(current);
                    }
                });
            })();
        }
    }
    $.fn.createPage = function(options) {
        var args = $.extend({
            pageCount : 10,
            current : 1,
            total : 0,
            backFn : function() {
            }
        }, options);
        ms.init(this, args);
    }
})(jQuery);
/*
<!-- CSS显示 -->
.tcdPageCode{color: #ccc;text-align:center;}
.tcdPageCode a{display: inline-block;color: #666;display: inline-block;height: 25px;line-height: 25px;padding: 0 10px;border: 1px solid #ddd; margin: 0 2px;border-radius: 4px;vertical-align: middle;}
.tcdPageCode a:hover{text-decoration: none;border: 1px solid #FD6596;}
.tcdPageCode span.current{display: inline-block;height: 25px;line-height: 25px;padding: 0 10px;margin: 0 2px;color: #fff;background-color: #FD6596;border: 1px solid #FD6596;border-radius: 4px;vertical-align: middle;}
.tcdPageCode span.disabled{display: inline-block;height: 25px;line-height: 25px;padding: 0 10px;margin: 0 2px;color: #bfbfbf;background: #f2f2f2;border: 1px solid #bfbfbf;border-radius: 4px;vertical-align: middle;}


<!-- 分页数据展示 -->
<div id="tcdPageCode">
<div class="tcdPageCode"></div>
</div>


<!-- 调用JS函数 -->
  function showList(obj,page) {
$.ajax({
type: "post",
url: smvc+"/goods/img.html?pid="+obj+"&page="+page,
dataType: "json",
success: function(data){
var arr = [];
var rows = data["rows"];
for(var row in rows){
arr.push('<div class="image">');
arr.push('<div class="scope">');
arr.push('<img src="'+rows[row].url+'"/>');
arr.push('</div>');
arr.push('</div>');
}
$("#imgList").html(arr.join(""));

//重构分页视图(因为数据记录是动态的,每一次请求页数和总记录数都有可能变化)
$("#tcdPageCode").html($("#tcdPageCode").html());//消除多次实例化后的对象事件
$(".tcdPageCode").createPage({
       pageCount:data["pageCount"],//总页数
       current:data["currentPage"],//当前页
       total:data["total"],//总记录数
       backFn:function(p){
        showList(obj,p);//点击页数触发函数
       }
   });
}
});
}
 */
pa5201314
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript分页代码实例分享(js分页)
10-26
JavaScript分页代码实例分享 JavaScript分页代码实例分享是指使用JavaScript语言来实现分页功能的代码实例。该实例主要用于实现分页的功能，例如在列表、表格或其他数据展示场景中，通过分页来限制数据的显示数量，...
js分页效果
09-22
总的来说，"js分页效果"是一个综合性的前端开发任务，涵盖了JavaScript基础、DOM操作、事件处理、数据交互、动画效果等多个方面。通过这个示例，开发者不仅可以学习到分页的实现技巧，还能加深对前端开发整体流程的...
【js 分页】js 分页 方法一 【实用】
刘贵庆的博客
08-19 7931
纯js 分页功能。
JavaScript经典实例之分页（简单易用）原生js封装分页（一次性数据）
编程界明世隐的博客
12-17 2477
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK"> <style> *{ margin:5px; padding:0; } .table { word-break: br...
JS实现分页功能
最新发布
hexadecimal_001的博客
05-11 325
【代码】JS实现分页功能。
javascript 实现分页
weixin_35755188的博客
02-13 1979
JavaScript 实现分页可以使用以下步骤： 计算出需要分页的数据总量和每页显示的数据数量。 根据总数据量和每页数据量计算出需要的总页数。 根据当前页码计算出该页的数据在总数据中的起始位置和结束位置。 根据起始位置和结束位置截取出当前页的数据。 在界面上显示当前页的数据，并提供页码控制功能，使用户可以在不同的页码间切换。 以下是一个简单的 JavaScript 代码示例： ```...
JavaScript实现列表分页（小白版）
分享Java，vue学学习笔记
03-26 2380
上方获li获取标签为8；这里是一个页面显示5条数据所以对pageLi进行取模；为0则是Math.floor不是则是Math.ceil，Math.floor是向下取整（ 1.6 => 1），Math.ceil为向上取整（1.6=>2 ），所以这里n最后等于2，页面为2。第一步：修改一下样式（一条li标签假如有40的高度，现在有8个则整个ul有320；我现在需要进行一个页面显示5条数据；第四步：对分页两个li做点击事件进行分页显示。在获取分页li进行样式设置。以ul列表为例进行分页。第三步：创建分页标签。
js如何实现分页功能
qq_60504665的博客
09-23 1065
6. 点击分页按钮更新数据：当用户点击分页按钮时，根据按钮对应的页码更新当前页码，并重新显示当前页的数据。4. 显示当前页的数据：根据当前页码和每页显示的数量，从数据数组或对象中提取对应页码的数据。5. 生成分页按钮：根据总页数，生成相应数量的分页按钮，并为每个按钮绑定点击事件。2. 设置每页显示的数量和当前页码：确定每页要显示的数据数量，以及当前页码。3. 计算总页数：根据数据的总数和每页显示的数量，计算出总页数。或本地获取数据，并将数据存储在一个数组或对象中。以上就是实现分页的办法了。
js 分页
11-21
JavaScript分页是网页开发中常见的功能，用于处理大量数据时，将数据分割成多个部分，让用户逐步浏览，提高用户体验。这种技术在数据列表、表格、博客等场景中尤为常见。在JavaScript中实现分页并不复杂，主要涉及到...
适配所有浏览器的js分页插件
06-18
**JavaScript分页插件概述** 在网页开发中，分页是一种常见的数据展示方式，它能够有效地组织大量数据，提高用户体验。本项目提供的“适配所有浏览器的js分页插件”是一个轻量级且易用的解决方案，尤其适用于那些...
浅谈js分页的几种方法
sxs161028的博客
07-06 1366
一个项目中必然会遇到分页这种需求的，分页可以使数据加载更合理，也让页面显示更美观，更有层次感！那么js分页到底如何实现呢？下面我就来讲一下三种循序渐进的方法1.自己纯手写分页更深入的去理解分页的意义如分页的原理，其实，尝试自己去写一些分页方法是再合适不过的了，可以封装成一个分页方法，但是呢，这里呢，我就写一下最简单的指定的分页方法 ，就不去封装了。就以下图为例：上图是个非常普通的分页。第一个文本框可
使用js实现简单分页
05-27
使用js写的分页模块，html页面引入相应的js和css可以直接调用里面的方法，使用方便，里面有一个小demo
基于js分页实现（简单）
01-10
使用javacript实现分页技术，简单明了。没有多以的步骤！
纯JS前端分页方法（JS分页）
最爱喝怡宝的博客
05-15 2443
如后台传回的数据条数非常多，达到几千条甚至上万条，但是后台又不方便分页传回数据，这个时候就只能前端先获取所有数据保存下来，然后前端本地进行分页并渲染显示。1、JS分页函数：开发过程中，分页功能一般是后台提供接口，前端只要传page（当前页码）和pageSize（每页最大显示条数）及对应的其他查询条件，就可以返回所需分页显示的数据。原创博客禁止抄袭，原文地址:https://www.cnblogs.com/xiao-pengyou/只需要传入对应参数就可以返回带有对应分页属性的对象，用于前端界面展示。
初学者使用JS实现分页效果
weixin_51938119的博客
11-12 354
【代码】初学者使用JS实现分页效果。
js实现分页
w5206666的博客
04-08 3933
js实现分页 方式一： 1、html页面 <!-- 下面要展示的代码 --> <div id="commentDiv"> <div> {% for comment in comment_list %} <div class="col-12 list row"> <div class="col-2 icon"> <img src="/avatar/{
【js】js实现分页01
qq_36557846的博客
09-01 1210
js实现分页
简单的分页代码js实现
SeekerTime
07-10 8696
先看看效果图： 简单的分页js代码: 1、效果描述： 不用分页即可显示的jQuery插件 jQuery分页插件——jQuery.page.js用法很简单，效果很棒 2、调用方法：$(".tcdPageCode").createPage({ pageCount:10, current:1, backFn:function(p){ //单击回调方法，p是当前页码 } }
纯的js分页代码
热门推荐
soleghost的专栏
08-25 1万+
//每页显示字数PageSize=5000;//分页模式flag=2;//1:根据字数自动分页 2:根据[NextPage]分页//默认页startpage = 1;//导航显示样式 0:常规 1:直接 3:下拉TopShowStyle = 1;DownShowStyle = 0; var currentSet,CutFlag,TotalByte,PageCount,key,tempText,
"Vue.js分页组件实现：diVuePagination详解
Vue.js分页组件实现：diVuePagination的使用详解 本文主要介绍了Vue.js分页组件实现：diVuePagination的使用详解。Vue.js是一个用于构建用户界面的渐进式框架，它易于上手，便于与第三方库或既有项目整合，同时也...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值