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

复制代码 代码如下:

/**
* Ajax分页功能
* 在需要分页的地方添加<ul class="pagination"></ol>
* 作为分页组件容器元素。
* 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 += "<ul>";
if(currentPage != 1) {
paginationLinks += "<li><a id='prevpage' href='javascript:;' rel='prev'>《上一页</a></li>";
}
for(var i = this.startPage; i <= this.endPage; i++) {
if(currentPage == i) {
paginationLinks += "<li id='page_" + currentPage + "_container'><a id='page_" + i + "' class='current' href='javascript:;'>" + currentPage + "</a></li>";
} else {
paginationLinks += "<li id='page_" + i + "_container'><a id='page_" + i + "' href='javascript:;'>" + i + "</a></li>";
}
}
if(currentPage < pageCount) {
paginationLinks += "<li><a id='nextpage' href='javascript:;' rel='next'>下一页》</a></li>";
}
paginationLinks += "</ul>";
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是点击上一页、下一页或者页码的时候调用的函数。

时间: 2024-12-22 09:22:49

javascript ajax 仿百度分页函数_javascript技巧的相关文章

科讯商业版中用到的ajax空间与分页函数_javascript技巧

科讯sql商业版中用到的ajax空间与分页函数,他们的js代码学习是非常不错的//ajax 控件 function PageAjax(){     var xhrObj=null;     if(window.XMLHttpRequest)     {     xhrObj=new XMLHttpRequest();     }     else if(window.ActiveXObject)     {     try{     xhrObj=new ActiveXObject("Micro

JavaScript AJAX之惰性载入函数_javascript技巧

在JS中有些内存只需执行一遍即可,如浏览器类型检测是最常用的一个功能,因为我们使用Ajax的时候需要检测浏览器的内置的XHR.我们可以在第一次检测的时候记录下类型,往后在使用Ajax的时候就不需要再去检测浏览器类型了.在JS中就算只有一个if也总比没有if的语句效率要高. 普通Ajax方法 复制代码 代码如下: /**  * JS惰性函数  */   function ajax(){     if(typeof XMLHttpRequest != "undefined"){      

js实现ASP分页函数 HTML分页函数_javascript技巧

复制代码 代码如下: <!-- //ASP分页函数 function ShowListPage(page,Pcount,TopicNum,maxperpage,strLink,ListName){     var alertcolor = '#FF0000';     maxperpage=Math.floor(maxperpage);     TopicNum=Math.floor(TopicNum);     page=Math.floor(page);     var n,p;     i

JavaScript学习笔记(三):JavaScript也有入口Main函数_javascript技巧

在C和Java中,都有一个程序的入口函数或方法,即main函数或main方法.而在JavaScript中,程序是从JS源文件的头部开始运行的.但是某种意义上,我们仍然可以虚构出一个main函数来作为程序的起点,这样一来不仅可以跟其他语言统一了,而且说不定你会对JS有更深的理解. 1. 实际的入口 当把一个JavaScript文件交给JS引擎执行时,JS引擎就是从上到下逐条执行每条语句的,直到执行完所有代码. 2. 作用域链.全局作用域和全局对象 我们知道,JS中的每个函数在执行时都会产生一个新的

JavaScript验证电子邮箱的函数_javascript技巧

本文介绍一个JavaScript验证电子邮箱的函数,相当靠谱. JavaScript验证电子邮箱的函数,源代码如下: function checkEmail(text) { if( text.match(/qq\.com$/) ) { return -1; } if( ! text.match(/^\w+([._-]\w+)*@(\w+\.)+\w+$/) ) { return false; } return true; } 关于JavaScript验证电子邮箱的函数,本文就介绍这么多,希望对您

Javascript实现的分页函数_javascript技巧

/**  * 分页类构造  * 参数 nTotalList: 总条数  * 参数 nPageSize: 每页显示条数  * 参数 nPageNum: 当前页码  * 参数 sPageUrl: 分页链接的URL,页码以[pn]代替,输出时将被替换为实际页码  * 参数 nPageListSize: 页码列表(下拉框)中显示的最多页码条数.该参数可省略,默认100  */ function Pagination(nTotalList, nPageSize, nPageNum, sPageUrl, n

JavaScript EasyPager 分页函数_javascript技巧

复制代码 代码如下: var EasyPager = function(wrap,pageCount,currPage){ var d = document ,el = function(tag,inner,click,css){ tag = d.createElement(tag); inner && (tag.innerHTML = inner); click && (tag.onclick = click); css && (tag.className

Javascript isArray 数组类型检测函数_javascript技巧

1.typeof操作符.对于Function.String.Number.Undefined这几种类型的对象来说,不会有什么问题,但是针对Array的对象就没什么用途了: Js代码 复制代码 代码如下: alert(typeof null); // "object" alert(typeof []); // "object" 2.instanceof操作符.此操作符检测对象的原型链是否指向构造函数的prototype对象,恩,听起来不错,应该可以解决我们的数组检测问

JavaScript Distilled 基础知识与函数_javascript技巧

一.运算符 复制代码 代码如下: . [] () 属性存取及函数调用 delete new typeof + - ! 一元运算符 * / % 乘法,除法,取模 + - 加法/连接,减法 >= <= > < 不等式运算符 === !== 等式运算符 && 逻辑与 || 逻辑或 ?: 三元运算符 二.语句: 1.if语句 复制代码 代码如下: var dayOfWeek=0; if(day===6){ } else if(dayOfWeek===0){ } else{