根据http://hi.baidu.com/fenggandeguozi/blog/item/d8f4ad009fb79f0f1c95835c.html的js前台分页代码,修改一下,加入首页 ,上页,下页,末页的功能。
//页面跳转
function ready2go(){
var obj=this;
$("#"+obj.page_obj_id+" a").live("click",function(){ //点击页码的时候跳到相应页
////alert("obj.cpage:"+obj.cpage);
var tmp = $(this).attr("p");
if(isNaN(tmp)&&tmp=="next"){
if((obj.cpage+1)>obj.totalpage){
obj.target_p=obj.totalpage
}else{
obj.target_p=obj.cpage+1;
}
}else if(isNaN(tmp)&&tmp=="prev"){
if((obj.cpage-1)==0){
obj.target_p=1
}else{
obj.target_p=obj.cpage-1;
}
}else{
obj.target_p=parseInt($(this).attr("p"));
}
gotopage.call(obj,obj.target_p);
})
}
//生成跳转链接
jsPage.prototype.page=function(){
//alert(this.totalpage);
if(this.totalpage<=10){ //总页数小于十页 页码以十页为单位
for (this.count=1;this.count<=this.totalpage;this.count++) {
if(this.count!=this.cpage) {
if(this.count==1){
this.outstr = this.outstr + "<a href='javascript:void(0)' p='"+this.count+"' >"+"首页"+"</a>";
this.outstr = this.outstr + "<a href='javascript:void(0)' p='next' >"+"下页"+"</a>";
this.outstr = this.outstr + "<a href='javascript:void(0)' p='prev' >"+"上页"+"</a>";
}else{
if(this.count==this.totalpage){
this.outstr = this.outstr + "<a href='javascript:void(0)' p='"+this.count+"' >"+"末页"+"</a>";
}else{
this.outstr = this.outstr + "<a href='javascript:void(0)' p='"+this.count+"' >"+this.count+"</a>";
}
}
}else{
//alert(this.outstr);
if(this.count==1){
this.outstr = this.outstr + "<span class='current' >"+"首页"+"</span>";
this.outstr = this.outstr + "<a href='javascript:void(0)' p='next' >"+"下页"+"</a>";
this.outstr = this.outstr + "<a href='javascript:void(0)' p='prev' >"+"上页"+"</a>";
}else{
if(this.count==this.totalpage){
this.outstr = this.outstr + "<span class='current' >"+"末页"+"</span>";
}else{
this.outstr = this.outstr + "<span class='current' >"+this.count+"</span>";
}
}
}
}
}
分享到:
相关推荐
用于前台js分页。。传入array返回每页的array数据
web项目中大多数分页是通过后台操作的,但是有的时候也是需要在前台进行分页操作,此代码就是用js做的分页
JavaScript分页是网页开发中一个常见且重要的功能,主要用于处理大量数据时的显示优化,避免一次性加载过多内容导致页面响应速度变慢或者消耗过多的网络资源。本篇将深入探讨JavaScript实现分页的相关知识点,包括...
JavaScript(简称JS)前台分页是一种常见的网页交互技术,它允许用户在不刷新整个页面的情况下,动态加载并显示大量数据的分段内容。这种技术在处理大数据集时尤其有用,可以提高用户体验,减少服务器压力。在JSP...
本篇主要介绍如何使用JavaScript(JS)在前端实现分页功能。 首先,理解分页的基本概念:分页通常包括“上一页”、“下一页”、页码和每页显示的条目数等元素。用户可以通过点击这些元素来切换不同的数据集。在JS中...
叶子JavaScript分页实例,JS分页代码,实现类似ajax分页的效果,无刷新实现分页功能,用JS模拟出了动态获取分页字符串进行无刷新分页的过程,里面的例子有7个,每一个都有不同的分页样式。请注意,此代码不包括后台...
JavaScript分页,也称为前台分页或客户端分页,是指在用户的浏览器端处理分页逻辑,而不是在服务器端。这种方式的优点在于可以减少服务器的负载,因为只需要传输当前页面所需的数据,而非所有数据。但是,这也意味着...
2. **引入分页插件**:接着引入分页插件的JavaScript文件,这通常是下载后的压缩包文件中的js文件。 ```html <script src="path/to/jquery_pagination.js"> ``` 3. **HTML结构**:创建一个容器元素,用于展示分页...
在这个“js分页实例asp服务端”的示例中,我们将探讨如何结合JavaScript(js)前端技术和ASP服务端技术来实现动态数据分页。 首先,我们需要理解分页的基本原理。分页通常涉及到两个主要部分:前端的用户界面(UI)...
html前台分页,静态分页,使用及其简单,支持多个列表
本篇文章将详细讲解基于Ext JS框架实现前台分页的原理和方法。 首先,理解“前台分页”概念。前台分页指的是在客户端,即用户的浏览器端进行数据的分页处理,而不是在服务器端。这种方式的优点是减少了服务器的负载...
**jQuery实现的前台假分页详解** 在网页开发中,数据分页是一种常见的优化手段,用于处理大量数据的展示,避免一次性加载过多内容导致页面加载缓慢。本篇将深入探讨如何利用jQuery实现前台假分页,即一次性获取所有...
接下来,在 JavaScript 中初始化分页插件,配置如每页显示的条目数、总条目数等: ```javascript $(document).ready(function() { var totalItems = 100; // 总数据量 var itemsPerPage = 10; // 每页显示的数据...
本项目 "angular js+bootstrap实现前台分页demo" 是一个基于这两个技术实现的简单前台分页示例,旨在帮助开发者快速理解和应用这种分页方案。 **AngularJS** 是一个强大的 JavaScript 框架,它主要用于构建动态 web...
这里提到的“jquerypage”工具类,可能是一个专门用于前端分页的JavaScript库,它封装了上述步骤,提供了一套简便的API供开发者使用。使用此类库,开发者可以更专注于业务逻辑,而不必关心分页的具体实现细节。例如...
Bootstrap Angular 前台分页插件是一款专为Angular开发的高效、易用的分页组件,它使得在前端实现分页功能变得极其简便,无需依赖后端进行任何分页处理。这款插件的设计理念是简化开发流程,提高项目的可维护性和可...
本示例主要介绍了如何使用Ext.js这个JavaScript框架来实现前端的分页查询功能。 首先,创建一个名为`resource`的数据存储(Store),它负责从服务器获取数据。这里的`Store`对象定义了字段(fields)、数据源URL...
以上就是关于“简单的jquery前台分页插件paginathing.js”的核心知识点和使用方法。通过这个插件,你可以高效地实现在前端对大数据集的分页展示,提升用户体验,同时降低服务器负载。结合jQuery和Bootstrap的使用,...
本文将深入探讨使用jQuery实现简单前台表格分页的插件——`paginathing.js`。 首先,我们需要了解`jQuery`库。jQuery是由John Resig于2006年创建的,它的目标是使JavaScript编程变得简单、快捷。它通过提供简洁的...
"前台分页Demo测试项目支持所有浏览器"这个标题暗示我们这是一个专门针对前端分页功能的示例项目,旨在展示如何在不同浏览器环境下实现分页效果。下面将详细介绍前台分页的相关知识点以及可能涉及的技术和实现方式。...