Community Learn Tools Library Leisure
search
English
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
1126 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：
paging function
source：php.cn
Previous article：A small example of js scaling images at the same ratio_javascript skills Next article：How to implement color gradient in javascript_javascript skills
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
Latest Articles by Author
Latest Issues
The page suddenly cannot pull css or bootstrap So I'm developing a page, I did part of it yesterday and it worked great, and today I cont...
From 2024-04-06 21:58:04
0
1
800
How to trigger render (with filter and pagination) on sort method in React? Here is my Sort.js style component: <SortWrapper><SortText>SortBy</SortText...
From 2024-04-06 21:28:37
0
1
2257
for loop randomly goes from 1 to 0 Basically, every time the page is refreshed, the for loop has the potential to change from...
From 2024-04-06 16:48:14
0
1
393
I'm having trouble with a CSS grid where the height isn't what I expected, what mistakes might I be making? I'm currently learning CSS grids and was asked to make this card by breaking it into a gri...
From 2024-04-06 12:52:14
0
1
339
The execution order of VueJS scheduling functions causes problems I'm trying to display a list of announcements (retrieved from API) on a page. I'm using a ...
From 2024-04-06 10:37:58
0
1
385
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template