JS分页

最新推荐文章于 2024-05-30 20:25:46 发布
最新推荐文章于 2024-05-30 20:25:46 发布
阅读量915 收藏
点赞数
分类专栏： Web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pa5201314/article/details/46506231
版权
(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);">首页</a>');
obj.append('<a href="javascript:void(0);" class="prevPage">上一页</a>');
}
/*
if(parseInt(args.current) == 1){
obj.append('<span class="current">1</span>');
if(parseInt(args.pageCount) >= 2){
obj.append('<a href="javascript:void(0);" class="tcdNumber">' + (parseInt(args.current) + 1) + '</a>');
}
if(parseInt(args.pageCount) >= 3){
obj.append('<a href="javascript:void(0);" class="tcdNumber">' + (parseInt(args.current) + 2) + '</a>');
}
if(parseInt(args.pageCount) >= 4){
obj.append('<a href="javascript:void(0);" class="tcdNumber">' + (parseInt(args.current) + 3) + '</a>');
}
if(parseInt(args.pageCount) >= 5){
obj.append('<a href="javascript:void(0);" class="tcdNumber">' + (parseInt(args.current) + 4) + '</a>');
}
}
if(parseInt(args.current) == 2){
obj.append('<a href="javascript:void(0);" class="tcdNumber">' + (parseInt(args.current) - 1) + '</a>');
if(parseInt(args.pageCount) >= 2){
obj.append('<span class="current">2</span>');
}
if(parseInt(args.pageCount) >= 3){
obj.append('<a href="javascript:void(0);" class="tcdNumber">' + (parseInt(args.current) + 1) + '</a>');
}
if(parseInt(args.pageCount) >= 4){
obj.append('<a href="javascript:void(0);" class="tcdNumber">' + (parseInt(args.current) + 2) + '</a>');
}
if(parseInt(args.pageCount) >= 5){
obj.append('<a href="javascript:void(0);" class="tcdNumber">' + (parseInt(args.current) + 3) + '</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);">末页</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);
}
});
})();
}
}
$.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
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript分页代码实例分享(js分页)
10-26
JavaScript分页代码实例分享 JavaScript分页代码实例分享是指使用JavaScript语言来实现分页功能的代码实例。该实例主要用于实现分页的功能，例如在列表、表格或其他数据展示场景中，通过分页来限制数据的显示数量，...
js分页效果
09-22
总的来说，"js分页效果"是一个综合性的前端开发任务，涵盖了JavaScript基础、DOM操作、事件处理、数据交互、动画效果等多个方面。通过这个示例，开发者不仅可以学习到分页的实现技巧，还能加深对前端开发整体流程的...
JavaScript分页功能如何实现
xiaojie513的博客
05-11 1101
函数用于显示分页链接。具体实现可以根据具体需求进行调整。函数用于从数据源中获取当前页显示的数据，函数用于显示当前页的数据，
【js 分页】js 分页 方法一 【实用】
刘贵庆的博客
08-19 7916
纯js 分页功能。
JS分页插件
weixin_70227543的博客
05-19 1383
<body> <div class="box"></div> <script> function Page(classname, options={}){ //将参数定义成属性 this.options = options this.fn = this.options.fn || function(){} this.containe.
javascript 实现分页
weixin_35755188的博客
02-13 1976
JavaScript 实现分页可以使用以下步骤： 计算出需要分页的数据总量和每页显示的数据数量。 根据总数据量和每页数据量计算出需要的总页数。 根据当前页码计算出该页的数据在总数据中的起始位置和结束位置。 根据起始位置和结束位置截取出当前页的数据。 在界面上显示当前页的数据，并提供页码控制功能，使用户可以在不同的页码间切换。 以下是一个简单的 JavaScript 代码示例： ```...
JS 分页效果展示
前端开发,HTML5,css3,JavaScript,node.js,vue
11-30 1091
首先是默认界面，默认首次进入页面的时候，每页展示4条数据，默认展示第一页，并把向前翻页按钮禁止掉。🏡 点击下一页按钮，可以进行翻页效果，当前页不是第一页或者最后一页时，前后翻页按钮都是可用状态。🏡 点击展示数据的按钮 可以渲染不同数量的数据在页面中。
js分页代码分享
a810373329的博客
04-28 3157
js代码 var home_page=1;//首页 var curr_page=1;//当前页 var last_page=10;//尾页 var yema_num = 6;//页码数 var page_row=1;//每页的条数 var count_page=0;//总页数 var count_row=0;//总条数 var left_page=1;//最左端页码值 var right_pa...
js分页功能
c_s_d_na的博客
04-08 793
能跳转上一页下一页首页尾页跳转 html 先请求出来数据，这里可以把请求数据封装成一个函数，后面不断去调用这个函数来实现跳转 全局变量 每次换页面显示数据都要更新 arr = data.slice((page - 1) * num, page * num); 首页 $("#first").click(() => { page = 1 port() $("#text").val(1) }) 尾页 last = Math.ceil(data..
用js实现分页
weixin_42609225的博客
01-05 538
使用 JavaScript 实现分页可以使用以下步骤： 首先，你需要确定你要分页的数据，并计算出数据的总页数。 然后，你可以在页面上创建一个分页组件，用来显示分页按钮。 为每个分页按钮添加点击事件处理函数。在这个函数中，你可以使用 AJAX 技术从服务器获取相应页的数据，然后在页面上渲染出来。 当用户点击分页按钮时，你可以使用 JavaScript 改变页面上分页组件的样式，以此来指示当前...
JS实现分页功能
热门推荐
大数据同盟会的博客
07-03 1万+
JS实现分页功能
js分页+搜索
最新发布
weixin_58462329的博客
05-30 263
好多兄弟和我说，我写的只有分页不能搜索，今天给大家上个好家伙，和昨天不能搜索的版本合并了，老性子，直接上干货。我是小辉，请大家多多关照。
js 分页
11-21
JavaScript分页是网页开发中常见的功能，用于处理大量数据时，将数据分割成多个部分，让用户逐步浏览，提高用户体验。这种技术在数据列表、表格、博客等场景中尤为常见。在JavaScript中实现分页并不复杂，主要涉及到...
适配所有浏览器的js分页插件
06-18
**JavaScript分页插件概述** 在网页开发中，分页是一种常见的数据展示方式，它能够有效地组织大量数据，提高用户体验。本项目提供的“适配所有浏览器的js分页插件”是一个轻量级且易用的解决方案，尤其适用于那些...
NGINX部署项目后浏览器选项卡icon图标不显示
寻找心的旅程
11-30 8323
在项目web.xml文件中添加： ico image/x-icon
简单易用的Div弹出层
寻找心的旅程
02-26 921
<button id="pop">点击</button> <div class="lightbox" id="pop_move"> <div class="bar"> <div class="title">消息</div> <div class="close" id="pop_close">×</div> </div> <div class="dialog"> 这里可以自由定义 </div> </div>
WEB架构师之葵花宝典
寻找心的旅程
12-12 748
Web架构师究竟都要学些什么？具备哪些能力呢？先网上查查架构师的大概的定义，参见架构师修炼之道这篇文章，写的还不错，再查查公司招聘Web架构师的要求。
Tabs切换CSS
寻找心的旅程
02-11 642
Tabs切换CSS
Vue.js分页组件实现：diVuePagination的使用详解
10-18
Vue.js分页组件实现：diVuePagination的使用详解 本文主要介绍了Vue.js分页组件实现：diVuePagination的使用详解。Vue.js是一个用于构建用户界面的渐进式框架，它易于上手，便于与第三方库或既有项目整合，同时也...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值