masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > tutorial js > javascript ajax 仿百度分页函数_javascript技巧

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

WBOY
Lepaskan： 2016-05-16 17:18:18
asal
1127 orang telah melayarinya
复制代码 代码如下:

/**
* 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是点击上一页、下一页或者页码的时候调用的函数。
Label berkaitan：
分页函数
sumber：php.cn
Artikel sebelumnya：js同比例缩放图片的小例子_javascript技巧 Artikel seterusnya：javascript实现颜色渐变的方法_javascript技巧
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Halaman tiba-tiba tidak dapat menarik css atau bootstrap Jadi saya sedang membangunkan halaman, saya telah membuat sebahagian daripadanya semalam d...
daripada 2024-04-06 21:58:04
0
1
800
Bagaimana untuk mencetuskan render (dengan penapis dan penomboran) pada kaedah isihan dalam React? Berikut ialah komponen gaya Sort.js saya: <SortWrapper><SortText>SortBy</So...
daripada 2024-04-06 21:28:37
0
1
2257
untuk gelung secara rawak pergi dari 1 hingga 0 Pada asasnya, setiap kali halaman dimuat semula, gelung for berpotensi berubah daripada 1 ...
daripada 2024-04-06 16:48:14
0
1
393
Saya menghadapi masalah dengan grid CSS yang ketinggiannya tidak seperti yang saya jangkakan, apakah kesilapan yang mungkin saya lakukan? Saya sedang belajar grid CSS dan diminta untuk membuat kad ini dengan memecahkannya kepada...
daripada 2024-04-06 12:52:14
0
1
339
Perintah pelaksanaan fungsi penjadualan VueJS menyebabkan masalah Saya cuba memaparkan senarai pengumuman (diambil daripada API) pada halaman. Saya mengguna...
daripada 2024-04-06 10:37:58
0
1
385
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan