Home > Web Front-end > JS Tutorial > javascript ajax imitation Baidu paging function_javascript skills

javascript ajax imitation Baidu paging function_javascript skills

WBOY
Release: 2016-05-16 17:18:18
Original
1136 people have browsed it
复制代码 代码如下:

/**
* Ajax paging function
* Add

    * as a paging component container element where paging is required.
    * pageCount total number of pages
    * currentPage current page number
    * container ol container element with pagination class
    * loadData function for loading data
    * 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是点击上一页、下一页或者页码的时候调用的函数。
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template