首页 > web前端 > js教程 > javascript ajax 仿百度分页函数_javascript技巧

javascript ajax 仿百度分页函数_javascript技巧

WBOY
发布: 2016-05-16 17:18:18
原创
1126 人浏览过
复制代码 代码如下:

/**
* Ajax分页功能
* 在需要分页的地方添加

    * 作为分页组件容器元素。
    * pageCount 总页数
    * currentPage 当前页数
    * container 带有pagination类的ol容器元素
    * loadData 用于加载数据的函数
    * version 1.0
    */
    pagination : function(pageCount, currentPage, container, loadData) {
    this.startPage = 1;
    this.endPage = pageCount;
    this.minDisplayPageCount = 5;
    var c = $(container);
    var paginationLinks = "";
    if(pageCount == 1) {
    c.css({'visibility': 'hidden'});
    return;
    }
    if(pageCount > this.minDisplayPageCount + 1) {
    if(currentPage - this.minDisplayPageCount > 0) {
    this.startPage = currentPage - this.minDisplayPageCount;
    }
    if((currentPage + this.minDisplayPageCount - 1) this.endPage = currentPage + this.minDisplayPageCount - 1;
    } else {
    this.endPage = pageCount;
    }
    }
    paginationLinks += "
      ";
      if(currentPage != 1) {
      paginationLinks += "
    • ";
      }
      for(var i = this.startPage; i if(currentPage == i) {
      paginationLinks += "
    • " + currentPage + "
    • ";
      } else {
      paginationLinks += "
    • " + i + "
    • ";
      }
      }
      if(currentPage paginationLinks += "
    • ";
      }
      paginationLinks += "
    ";
    c.html(paginationLinks);
    var links = $("#page_number ul li a");
    links.each(function(index) {
    if(!(this.innerHTML == "上一页" || this.innerHTML == "下一页")) {
    $(this).click(function(event) {
    alert(links[index].innerHTML);
    loadData(curTaskId,"","",parseInt(links[index].innerHTML));
    pagination(pageCount, parseInt(links[index].innerHTML), container, loadData);
    });
    }
    });
    var prevPage = $("#prevpage");
    var nextPage = $("#nextpage");
    c.css({'visibility': 'visible'});
    if(prevPage) {
    prevPage.click(function(event) {
    loadData(curTaskId,"","",currentPage - 1);
    pagination(pageCount, currentPage - 1, container, loadData);
    });
    }
    if(nextPage) {
    nextPage.click(function(event) {
    loadData(curTaskId,"","",currentPage + 1);
    pagination(pageCount, currentPage + 1, container, loadData);
    });
    }
    }

loadData为加载数据的函数,这个函数需要定义一个当前页数的参数,比如:
复制代码 代码如下:

var currentPage = 1;
loadExamList(currentPage){
//TODO
pagination(5,currentPage,$(ul),loadExamList);
};

5是总页数,1是当前页数,$(ul)是要将页码按钮存放的位置,loadExamList是点击上一页、下一页或者页码的时候调用的函数。
相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板