简单的分页代码js实现

2024-12-16 15:32:35

先看看效果图：

简单的分页js代码:
1、效果描述：
不用分页即可显示的jQuery插件
jQuery分页插件——jQuery.page.js用法很简单，效果很棒
2、调用方法：

 $(".tcdPageCode").createPage({
  pageCount:10,
  current:1,
  backFn:function(p){
   //单击回调方法，p是当前页码
  }
 });
 pageCount：总页数
 current：当前页

3、js封装代码

//分页插件
/**
ch
**/
(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();
    //上一页
    if(args.current > 1){
     obj.append('<a href="javascript:;" class="prevPage">上一页</a>');
    }else{
     obj.remove('.prevPage');
     obj.append('<span class="disabled">上一页</span>');
    }
    //中间页码
    if(args.current != 1 && args.current >= 4 && args.pageCount != 4){
     obj.append('<a href="javascript:;" class="tcdNumber">'+1+'</a>');
    }
    if(args.current-2 > 2 && args.current <= args.pageCount && args.pageCount > 5){
     obj.append('<span>...</span>');
    }
    var start = args.current -2,end = args.current+2;
    if((start > 1 && args.current < 4)||args.current == 1){
     end++;
    }
    if(args.current > args.pageCount-4 && args.current >= args.pageCount){
     start--;
    }
    for (;start <= end; start++) {
     if(start <= args.pageCount && start >= 1){
      if(start != args.current){
       obj.append('<a href="javascript:;" class="tcdNumber">'+ start +'</a>');
      }else{
       obj.append('<span class="current">'+ start +'</span>');
      }
     }
    }
    if(args.current + 2 < args.pageCount - 1 && args.current >= 1 && args.pageCount > 5){
     obj.append('<span>...</span>');
    }
    if(args.current != args.pageCount && args.current < args.pageCount -2 && args.pageCount != 4){
     obj.append('<a href="javascript:;" class="tcdNumber">'+args.pageCount+'</a>');
    }
    //下一页
    if(args.current < args.pageCount){
     obj.append('<a href="javascript:;" class="nextPage">下一页</a>');
    }else{
     obj.remove('.nextPage');
     obj.append('<span class="disabled">下一页</span>');
    }
   })();
  },
  //绑定事件
  bindEvent:function(obj,args){
   return (function(){
    obj.on("click","a.tcdNumber",function(){
     var current = parseInt($(this).text());
     ms.fillHtml(obj,{"current":current,"pageCount":args.pageCount});
     if(typeof(args.backFn)=="function"){
      args.backFn(current);
     }
    });
    //上一页
    obj.on("click","a.prevPage",function(){
     var current = parseInt(obj.children("span.current").text());
     ms.fillHtml(obj,{"current":current-1,"pageCount":args.pageCount});
     if(typeof(args.backFn)=="function"){
      args.backFn(current-1);
     }
    });
    //下一页
    obj.on("click","a.nextPage",function(){
     var current = parseInt(obj.children("span.current").text());
     ms.fillHtml(obj,{"current":current+1,"pageCount":args.pageCount});
     if(typeof(args.backFn)=="function"){
      args.backFn(current+1);
     }
    });
   })();
  }
 }
 $.fn.createPage = function(options){
  var args = $.extend({
   pageCount : 10,
   current : 1,
   backFn : function(){}
  },options);
  ms.init(this,args);
 }
})(jQuery);

4、使用demo:

<!DOCTYPE html>
<html lang="zh-cn" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>一个非常简单的jQuery分页插件</title>
<style>
*{ margin:0; padding:0; list-style:none;}
a{ text-decoration:none;}
a:hover{ text-decoration:none;}
.tcdPageCode{padding: 15px 20px;text-align: left;color: #ccc;}
.tcdPageCode a{display: inline-block;color: #428bca;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 #428bca;}
.tcdPageCode span.current{display: inline-block;height: 25px;line-height: 25px;padding: 0 10px;margin: 0 2px;color: #fff;background-color: #428bca; border: 1px solid #428bca;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;}
</style>
</head>
<body>
<style>
.baidu_ads{ width:960px; height:90px; position:absolute; left:50%; bottom:0; margin-left:-480px; overflow:hidden;}
</style>
<div class="baidu_ads">
</div> 

<span style="display:none;">
</span><!-- 代码部分begin -->
 <div class="tcdPageCode">
 </div>
 <pre>
 调用方法：
 $(".tcdPageCode").createPage({
  pageCount:10,
  current:1,
  backFn:function(p){
   //单击回调方法，p是当前页码
  }
 });
 pageCount：总页数
 current：当前页
 </pre>
</body>
<script src="http://www.jb51.net/ajaxjs/jquery.min.js"></script>
<script src="http://www.jb51.net/ajaxjs/jquery.page.js"></script>
<script>
 $(".tcdPageCode").createPage({
  pageCount:6,
  current:1,
  backFn:function(p){
   console.log(p);
  }
 });
</script>
<!-- 代码部分end -->
</html>

以上就是本文的全部内容，希望对大家学习Javascript有所帮助。

JS代码实现table数据分页效果

第一个:实现的很常见很简单的显示页数翻页效果图: •这是HTML代码,很简单滴(我好像看到了被嫌弃的小眼神) <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-"> <script src="js/jquery-...js"></script> <script src="js/demo.js
纯JS前端实现分页代码

先给大家展示下效果图,如果大家感觉效果不错,请参考实现代码: 因为这是我自己第一次动手用js写分页,写的应该也不是很完美,有些公共的没有抽取出来,但是用起来还是可以的,这块代码是可以把它当做公共的分页去处理的,我就是用这块代码写了两个稍微不同一些的分页!公共的代码抽取的也差不多,主要就是ajax后台以及返回的值不同而已,只要把总页码的值获取到,点击首页/下一页等传值正确的话,基本上分页是不会出什么问题的网上确实有很多分页的插件以及开源代码,单本是一个后台开发猿,前台css等样式还驾驭不住,所以
AngularJS 与Bootstrap实现表格分页实例代码

AngularJS 从开始发布到现在使用的开发的者越来越多,也表明大多数做前端的朋友在往这边转,毕竟是Google 公司出品的产品啊,所以最近自己也在学习这部分知识. AngularJS Bootstrap实现表格分页: 最近一直学习Angular.js,在学习过程中也练习了很多的Demo,这里先贴一下表格+分页. 先上图看看最终结果: 不得不说Angular.js代码风格很受人欢迎,几十行代码清晰简洁的实现了上面的功能. 首先表格的数据源来自于,Server.js 点击下载.通过get取数后
js实现前端分页页码管理

用JS实现前端分页页码管理,可以很美观的区分页码显示(这也是参考大多数网站的分页页码展示),能够有很好的用户体验,这也是有业务需要就写了一下,还是新手,经验不足,欢迎指出批评! 首先先看效果图: 这是初始页面(也就是第一页)的界面,如果为第一页时,则首页和上一页按钮不可用,为了展示分页的效果,我当前的分页是一条一页. 这是页码大于5页时展示的效果:1,2页始终始终显示(考虑到用户体验) 这是最后一页的效果图: 下面直接上js代码: //页码显示 $(function(){ var dqPage
javabean servlet jsp实现分页功能代码解析

前端实现用ligerUI实现分页,感觉用框架确实简单,闲着无聊,模拟着liger的分页界面实现了一遍(只要是功能,样式什么无视) 这里用基础的三层架构+servlet+jsp实现,思路很简单,把所有分页相关信息写入到一个pagebean类里面,service返回这个bean类,每次分页查询时都从该bean里查找信息.只是其中的细节问题比较繁琐,如边界处理(前端和后台边界都要处理),下拉框跳转后要显示当前页等等这是ligerUI实现的分页样式(实现过程我的上一篇博客有写:http://www.j
vue.js 表格分页ajax 异步加载数据

Vue.js是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API. 分页一般和表格一起用,分页链接作为表格的一部分,将分页链接封装成一个独立的组件,然后作为子组件嵌入到表格组件中,这样比较合理. 1.注册一个组件 js Vue.component('pagination',{ template:'#paginationTpl', replace:true, props:['cur','all','pageNum'], methods:{ //页码点击事件 btnClick: f
vue.js表格分页示例

分页一般和表格一起用,分页链接作为表格的一部分,将分页链接封装成一个独立的组件,然后作为子组件嵌入到表格组件中,这样比较合理. 效果: 代码: 1.注册一个组件 js Vue.component('pagination',{ template:'#paginationTpl', replace:true, props:['cur','all','pageNum'], methods:{ //页码点击事件 btnClick: function(index){ if(index != this.cu
js多功能分页组件layPage使用方法详解

本文的主要目的就是为大家分享layPage 多功能的js分页组件具体操作方法,供大家参考,具体内容如下 php 部分 function index(){ header('Content-Type:text/html;charset=utf-8'); // 获取当前页码,默认第一页,设置每页默认显示条数 $nowpage = I('get.page', 1, 'intval'); $limits = 8; // 获取总条数 $count = M('Article') -> where(array(
基于Vue.js的表格分页组件

一.Vue.js简介 1.Vue的主要特点: (1) 简洁 (2) 轻量 (3)快速 (4) 数据驱动 (5) 模块友好 (6) 组件化 (1) 简洁下面看一段Angular的实现双向绑定的代码 // html <body ng-app="myApp"> <div ng-controller="myCtrl"> <p>{{ note }}</p> <input type="text" ng-
Angularjs 实现分页功能及示例代码

基于Angularjs实现分页前言学习任何一门语言前肯定是有业务需求来驱动你去学习它,当然ng也不例外,在学习ng前我第一个想做的demo就是基于ng实现分页,除去基本的计算思路外就是使用指令封装成一个插件,在需要分页的列表页面内直接引用. 插件在封装分页插件时我实现了几种方式总体都比较零散,最后找到了一个朋友(http://www.miaoyueyue.com/archives/813.html)封装的插件,觉还不错,读了下他的源码就直接在项目中使用了. 原理和使用说明 1.插件源码主要

简单的分页代码js实现

相关推荐

随机推荐