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

js教程评论1.1K views阅读模式
复制代码 代码如下:

/**

* 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) < pageCount) {

    this.endPage = currentPage + this.minDisplayPageCount - 1;

    } else {

    this.endPage = pageCount;

    }

    }

    paginationLinks += "

      ";

      if(currentPage != 1) {

      paginationLinks += "

    • 《上一页
    • ";

      }

      for(var i = this.startPage; i <= this.endPage; i++) {

      if(currentPage == i) {

      paginationLinks += "

    • " + currentPage + "
    • ";

      } else {

      paginationLinks += "

    • " + i + "
    • ";

      }

      }

      if(currentPage < pageCount) {

      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是点击上一页、下一页或者页码的时候调用的函数。

企鹅博客
  • 本文由 发表于 2019年7月28日 00:29:28
  • 转载请务必保留本文链接:https://www.qieseo.com/420995.html

发表评论