jQuery实现的简单分页示例

2024-12-02 21:33:26

本文实例讲述了jQuery实现的简单分页。分享给大家供大家参考，具体如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS分页Class - 风干的果子</title>
<style type="text/css">
a {margin:3px; text-decoration:none;}
</style>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
//jquery页面加载开始
$(function()
{
  var pageDiv1=new jsPage("list","all","p1","3");
  pageMethod.call(pageDiv1);
  var pageDiv2=new jsPage("list2","all","p2","5");
  pageMethod.call(pageDiv2);
})//$
//jquery 页面加载结束
//方法: pageMethod
function pageMethod()
{
  var obj=this;
  obj.resetTotal();
  obj.reloadpage("1",obj.list_class);
  obj.page(); //生成页码
  ready2go.call(obj);
}
//方法:ready2go
function ready2go()
{
  var obj=this;
  $("#"+obj.page_obj_id+" a").live("click",function()
  { //点击页码的时候跳到相应页
  obj.target_p=parseInt($(this).attr("p"));
  gotopage.call(obj,obj.target_p);
  })
}
// 方法: showClass
function showClass(list,x,pDiv,pSize){
  var pObj=new jsPage(list,x,pDiv,pSize);
  pageMethod.call(pObj);
}
// 方法: jsPage
function jsPage(list_id,list_class,page_obj_id,pagesize)
{
  // list_id 结果集UL的id
  // list_class 要显示的类别
  // page_id 存放页码的id
  // pagesize 每页显示多少条
  this.list_obj_id=list_id;
  this.list_Obj=$("#"+list_id);
  this.li=$("#"+list_id+" li");
  this.li.hide();
  this.page_obj_id=page_obj_id;
  this.page_obj=$("#"+page_obj_id); //存放页码的div
  this.list_class=list_class; // 类别
  if(list_class=="all")
  {
    this.results=this.li.length; // 总记录数等于所有记录
  }
  else
  {
    this.results=$("#"+list_id+" li."+list_class).length; // 总记录数等于指定类别的li数
  }
  this.totalpage; // 总页数
  this.pagesize=pagesize; //每页记录数
  this.cpage=1; //当前页,默认显示第一页
  this.count;
  this.target_p;
  this.curcount;
  this.outstr= ""; // 输出页码html
}//jsPage结束
//方法: gotopage
function gotopage(target){
  this.cpage = target;    //把页面计数定位到第几页
  this.page();
  this.reloadpage(target,this.list_class);
}
//给对象jsPage 增加函数 reloadpage
jsPage.prototype.reloadpage=function(p,resultType)
{
  this.li.hide();
  for(var i=this.pagesize*p-this.pagesize;i<this.pagesize*p;i++)
  {
    if(resultType=="all")
    {
    this.li.eq(i).show();
    }else
    {
    $("#"+this.list_obj_id+" li."+resultType).eq(i).show();
    }
  }
}
//给对象jsPage 增加函数 resetTotal
jsPage.prototype.resetTotal=function()
{
  if(this.results==0){
    this.totalpage=0;
    this.cpage=0;
  }else if(this.results<=this.pagesize)
  {
    this.totalpage=1;
  }
  else if(parseInt(this.results/this.pagesize)==1)
  {
    this.totalpage=2;
  }
  else if(parseInt(this.results/this.pagesize)>1 && this.results%this.pagesize==0){
    this.totalpage=this.results/this.pagesize;
  }
  else
  {
    this.totalpage=parseInt(this.results/this.pagesize)+1;
  }
}//resetTotal()
//jsPage 对象增加函数 page
jsPage.prototype.page=function()
{
  if(this.totalpage<=10)
  {    //总页数小于十页  页码以十页为单位
    for (this.count=1;this.count<=this.totalpage;this.count++)
    {
      if(this.count!=this.cpage)
      {
        this.outstr = this.outstr + "<a href='javascript:void(0)' p='"+this.count+"' >"+this.count+"</a>";
      }else
      {
        this.outstr = this.outstr + "<span class='current' >"+this.count+"</span>";
      }
    }
  }
  if(this.totalpage>10)
  {    //总页数大于十页
    if(parseInt((this.cpage-1)/10) == 0)
    {
      for (this.count=1;this.count<=10;this.count++)
      {
        if(this.count!=this.cpage)
        {
          this.outstr = this.outstr + "<a href='javascript:void(0)' p='"+this.count+"' >"+this.count+"</a>";
        }
        else
        {
          this.outstr = this.outstr + "<span class='current'>"+this.count+"</span>";
        }
      }
      this.outstr = this.outstr + "<a href='javascript:void(0)' p='"+this.count+"' >»</a>";
    }
    else if(parseInt((this.cpage-1)/10) == parseInt(this.totalpage/10))
    {
      this.outstr = this.outstr + "<a href='javascript:void(0)' p='"+(parseInt((this.cpage-1)/10)*10)+"' >«<\/a>";
      for (this.count=parseInt(this.totalpage/10)*10+1;this.count<=this.totalpage;this.count++)
       {
        if(this.count!=this.cpage)
        {
          this.outstr = this.outstr + "<a href='javascript:void(0)' p='"+this.count+"' >"+this.count+"</a>";
        }
        else
        {
          this.outstr = this.outstr + "<span class='current'>"+this.count+"</span>";
        }
      }
    }
    else
    {
      var lastP;
      this.outstr = this.outstr + "<a href='javascript:void(0)' p='"+(parseInt((this.cpage-1)/10)*10)+"' >«<\/a>";
      for (this.count=parseInt((this.cpage-1)/10)*10+1;this.count<=parseInt((this.cpage-1)/10)*10+10;this.count++)
      {
        if(this.count!=this.cpage)
        {
          this.outstr = this.outstr + "<a href='javascript:void(0)' p='"+this.count+"' >"+this.count+"</a>";
        }
        else
        {
          this.outstr = this.outstr + "<span class='current'>"+this.count+"</span>";
        }
        if(this.count==this.totalpage)
        {
          lastP="";
        }
        else
        {
          lastP="<a href='javascript:void(0)' p='"+(this.count+1)+"' >»</a>";
        }
      }
      this.outstr = this.outstr + lastP;
    }
  }
  document.getElementById(this.page_obj_id).innerHTML = "<div><span id='info'>共"+this.totalpage+"页 第"+this.cpage+"页<\/span>" + this.outstr + "<\/div>";
  this.outstr = "";
}
  </script>
</head>
<body>
  <a onclick="showClass('list','mm','p1','3')" href="#">美女</a> <a onclick="showClass('list','gg','p1','3')"
    href="#">帅哥</a> <a onclick="showClass('list','all','p1','3')" href="#">全部</a><br />
  <ul id="list">
    <li class="mm">美女A</li>
    <li class="gg">帅哥A</li>
    <li class="mm">美女B</li>
    <li class="gg">帅哥B</li>
    <li class="mm">美女C</li>
    <li class="gg">帅哥C</li>
    <li class="mm">美女D</li>
    <li class="gg">帅哥D</li>
    <li class="mm">美女E</li>
    <li class="gg">帅哥E</li>
    <li class="mm">美女F</li>
    <li class="gg">帅哥F</li>
    <li class="mm">美女G</li>
    <li class="gg">帅哥G</li>
    <li class="mm">美女H</li>
    <li class="gg">帅哥H</li>
    <li class="mm">美女A</li>
    <li class="gg">帅哥A</li>
    <li class="mm">美女B</li>
    <li class="gg">帅哥B</li>
    <li class="mm">美女C</li>
    <li class="gg">帅哥C</li>
    <li class="mm">美女D</li>
    <li class="gg">帅哥D</li>
    <li class="mm">美女E</li>
    <li class="gg">帅哥E</li>
    <li class="mm">美女F</li>
    <li class="gg">帅哥F</li>
    <li class="mm">美女G</li>
    <li class="gg">帅哥G</li>
    <li class="mm">美女H</li>
    <li class="gg">帅哥H</li>
    <li class="mm">美女A</li>
    <li class="gg">帅哥A</li>
    <li class="mm">美女B</li>
    <li class="gg">帅哥B</li>
    <li class="mm">美女C</li>
    <li class="gg">帅哥C</li>
    <li class="mm">美女D</li>
    <li class="gg">帅哥D</li>
    <li class="mm">美女E</li>
    <li class="gg">帅哥E</li>
    <li class="mm">美女F</li>
    <li class="gg">帅哥F</li>
    <li class="mm">美女G</li>
    <li class="gg">帅哥G</li>
    <li class="mm">美女H</li>
    <li class="gg">帅哥H</li>
    <li class="mm">美女A</li>
    <li class="gg">帅哥A</li>
    <li class="mm">美女B</li>
    <li class="gg">帅哥B</li>
    <li class="mm">美女C</li>
    <li class="gg">帅哥C</li>
    <li class="mm">美女D</li>
    <li class="gg">帅哥D</li>
    <li class="mm">美女E</li>
    <li class="gg">帅哥E</li>
    <li class="mm">美女F</li>
    <li class="gg">帅哥F</li>
    <li class="gg">帅哥G</li>
    <li class="gg">帅哥H</li>
    <li class="gg">帅哥G</li>
  </ul>
  <br />
  <div id="p1">
  </div>
  <br />
  <br />
  <a onclick="showClass('list2','music','p2','5')" href="#">音乐</a> <a onclick="showClass('list2','movie','p2','5')"
    href="#">电影</a> <a onclick="showClass('list2','all','p2','5')" href="#">全部</a><br />
  <ul id="list2">
    <li class="music">音乐A</li>
    <li class="movie">电影A</li>
    <li class="music">音乐B</li>
    <li class="movie">电影B</li>
    <li class="music">音乐C</li>
    <li class="movie">电影C</li>
    <li class="music">音乐D</li>
    <li class="movie">电影D</li>
    <li class="music">音乐E</li>
    <li class="movie">电影E</li>
    <li class="music">音乐F</li>
    <li class="movie">电影F</li>
  </ul>
  <br />
  <div id="p2">
  </div>
</body>
</html>

PS：这里再为大家推荐几款代码格式化、美化工具，相信大家在以后的开发过程中会用得到：

在线JavaScript代码美化、格式化工具：
http://tools.jb51.net/code/js

JavaScript压缩/格式化/加密工具：
http://tools.jb51.net/code/jscompress

PHP代码在线格式化美化工具：
http://tools.jb51.net/code/phpformat

XML代码在线格式化美化工具：
http://tools.jb51.net/code/xmlcodeformat

json代码在线格式化/美化/压缩/编辑/转换工具：
http://tools.jb51.net/code/jsoncodeformat

在线JSON代码检验、检验、美化、格式化工具：
http://tools.jb51.net/code/json

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

基于Bootstrap和jQuery构建前端分页工具实例代码

前言为啥名字叫[前端分页工具]?因为我实在想不到什么好名字,如果想要更加贴切的理解这个工具,应该从业务来看业务是这样的,有一个数据从后台传到前台,因为数据量不大,因此传过来之后直接显示即可,但是=.=所谓的数据量不大,最多也达到成百上千条,不可能全部显示出来,那么就需要分页常规的分页是利用Ajax,通过传页偏移量到后台,后台查询数据库再返回数据,可以实现无刷新分页,拿到的数据也是最新的前端分页优点:一次传输数据,避免用户反复请求服务器,减少网络带宽.服务器调度压力.数据库查询.缓存查询
jQuery前端分页示例分享

大家在作分页时,多数是在后台返回一个导航条的html字符串,其实在前端用js也很好实现. 调用pager方法,输入参数,会返回一个导航条的html字符串.方法的内部比较简单. 复制代码代码如下: /** * pageSize, 每页显示数 * pageIndex, 当前页数 * pageCount 总页数 * url 连接地址 * pager(10, 1, 5, 'Index')使用方法示例 */ function pager(pageSize, pageIndex, pageCoun
jQuery ajax分页插件实例代码

推荐阅读:jQuery插件开发精品教程让你的jQuery提升一个台阶既然说到基于jQuery的ajax分页插件,那我们就先看看主要的代码结构:(我觉得对咱们程序员来说再优美的文字描述.介绍也比不上代码来得实在.) 1.首先定义一个pager对象: var sjPager = window.sjPager = { opts: { //默认属性 pageSize: , preText: "pre", nextText: "next", firstText: &quo
前端分页功能的实现以及原理（jQuery）

分页场景常见于电商网站,比如说淘宝天猫的评论区,分页功能一般是后台实现,前端请求就完事了.现闲得无聊,就写出来玩玩,只实现功能,并未封装. 基于jq实现分页功能,大致分为以下几步: 定义一个分页方法,可多次调用参数设置请求数据页面跳转方法创建非数字按钮和数据内容区创建数字按钮首屏加载调用结构层只需要一个容器 <div class="pagination-nick"></div> 一.定义分页方法 function paginationNick(op
利用jQuery中的ajax分页实现代码

本文实例讲解了用jQuery中的ajax分页相关代码,分享给大家供大家参考,具体内容如下把分页封装到一个jsp里,那么大家就可以通过include的方式引入分页的页面这里起名为page_ajax.jsp 本人封装后,使用者需要在页面中引入page_ajax.jsp,并且在查询列表的时候,点击按钮,调用自定义的方法,如myFunction(),在这个方法里头,调用自己拓展的jquer方法,$.pageAjax(url,functionName,showDIv); 这里的url是你要请求的ajax
使用JQuery实现的分页插件分享

一个简单的jQuery分页插件,兼容AMD规范和requireJS. /** * jQuery分页插件 * */ ;(function (factory) { if (typeof define === "function" && define.amd) { // AMD模式 define([ "jquery" ], factory); } else { // 全局模式 factory(jQuery); } }(function ($) { //定义
使用Jquery+Ajax+Json如何实现分页显示附JAVA+JQuery实现异步分页

先给大家展示下运行效果图: 1.后台action产生json数据. List blackList = blackService.getBlackInfoList(mobileNum, gatewayid, startDate, endDate); int totalRows = blackList.size(); StringBuffer sb = new StringBuffer(); sb.append("{\"totalCount\":\""+to
MVC+jQuery.Ajax异步实现增删改查和分页

本文实例为大家分享了MVC+jQuery.Ajax异步实现增删改查和分页的具体代码,供大家参考,具体内容如下 1.Model层代码 using System; using System.Data; using System.Configuration; using System.Linq; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.HtmlControls; usin
Ajax分页插件Pagination从前台jQuery到后端java总结

困惑了我一段时间的网页分页,今天特地整理了一下我完成不久的项目.下面我要分享下我这个项目的分页代码,前后端通吃.希望前辈多多指教. 一.效果图下面我先上网页前台和管理端的部分分页效果图,他们用的是一套代码. 二.上代码前的一些知识点此jQuery插件为Ajax分页插件,一次性加载,故分页切换时无刷新与延迟,如果数据量较大不建议用此方法,因为加载会比较慢. 三.前台代码部分 var pageSize =6; //每页显示多少条记录 var total; //总共多少记录 $(function(
jQuery DataTables插件自定义Ajax分页实例解析

一.问题描述园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分类效果. 后端的分页接口已经写好了,不涉及条件查询,需要传入页码(pageNo)和页面显示数据条数(pageSize),显示相应页的显示记录,且不能修改后端接口. 二.分析先来分析下分页实现. 一是后端分页:这种情况下,在后端很容易实现,在官网上有示例,不多说明. 二是前端分页:前端分页也是支持的,不过需要一次把所有数据都获取到才可以. 看到这里,问题来了.由于后端在目前的情况下是更改不

jQuery实现的简单分页示例

相关推荐

随机推荐