刚写的一个js分页类,未优化

以前也写过,很久以前了,写的很长,并且使用起来也不灵活。这次搞了个灵活版的。

/*
 * SunPage --自定义分页类,仅获取分页的html代码,简单应用
 * Sunbt 2015-5-4
 * v1.0
 * @param current_page int 当前页
 * @param totle_page int 总页数
 * @param take_num int 当前页左右携带页码数
 * @param func_obj obj 分页实现函数
*/
var SunPage = function(current_page, totle_page, take_num, func_obj) {
    this.current_page = current_page;
    this.totle_page = totle_page;
    this.take_num = take_num;
    this.func_obj = func_obj;
    this.page_html = "";
    this.init();
}

SunPage.prototype = {
    constructor : SunPage,
    init : function() {
        var start = this.current_page - this.take_num < 2 ? 2 : this.current_page - this.take_num, //起始索引
            _end_patch = start - (this.current_page - this.take_num), //右侧补码
            _end = this.current_page + this.take_num + _end_patch, //计算结束索引
            end = _end < this.totle_page ? _end : this.totle_page - 1, //实际结束索引
            _start_patch = _end -  end; //左侧补码
        if (_start_patch > 0 && _end_patch == 0) { //如果有左侧补码,并且右侧补码为0,进行左侧侧补码
            start -= _start_patch;
            start = start < 2 ? 2 : start;
        }
        this.func_obj.previous.call(this); //上一页
        this.func_obj.common.call(this, 1); //第一页
        if (start == 3) {
            this.func_obj.common.call(this, 2); //开始索引为三,第二页直接显示
        } else if(start > 3) {
            this.func_obj.ellipsis.call(this); //开始索引大于三,显示省略号
        }
        for (var i = start; i <= end; i++) {
            this.func_obj.common.call(this, i); //从索引开始到结束
        }
        if (end < this.totle_page - 2) {
            this.func_obj.ellipsis.call(this); //结束索引为总页码减二,则显示总页码减一的页码
        } else if(end == this.totle_page - 2) {
            this.func_obj.common.call(this, this.totle_page - 1); //
        }
        this.func_obj.common.call(this, this.totle_page);
        this.func_obj.next.call(this);
    },
    toString :function() {
        return this.page_html;
    }
}

嘿嘿,灵活也要付出代价的,就是调用的时候会复杂些。下面是调用方式:

var sunpage = new SunPage(6, 20, 2, {
    previous : function() {
        if(this.current_page == 1) {
            this.page_html += ‘<li class="k"><span>上一页</span></li>‘;
        } else {
            this.page_html += ‘<li class="k"><a href="?page=‘ + (this.current_page - 1) + ‘">上一页</a></li>‘;
        }
    },
    next : function() {
        if(this.current_page == this.totle_page) {
            this.page_html += ‘<li class="k"><span>下一页</span></li>‘;
        } else {
            this.page_html += ‘<li class="k"><a href="?page=‘ + (this.current_page + 1) + ‘">下一页</a></li>‘;
        }
    },
    ellipsis : function() {
        this.page_html += ‘<li class="ellipsis">...</li>‘;
    },
    common :function(num){
        if(num == this.current_page) {
            this.page_html += ‘<li><span>‘ + num + ‘</span></li>‘;
        } else {
            this.page_html += ‘<li><a href="?page=‘ + num + ‘">‘ + num + ‘</a></li>‘;
        }
    }
});
document.write(sunpage.toString());

很多地方都没做校验的,有问题后再修改吧。目前测试没问题。

时间: 2024-11-09 00:55:58

刚写的一个js分页类,未优化的相关文章

一个重构的js分页类

// JavaScript Document /**//** * js分页类 * @param iAbsolute 每页显示记录数 * @param sTableId 分页表格属性ID值,为String * @param sTBodyId 分页表格TBODY的属性ID值,为String,此项为要分页的主体内容 * @Version 1.0.0 * @author 辛现宝 2007-01-15 created * var __variable__; private * function __met

刚整了一个数据库操作类,但是可以用吗?

今天闲来无事,把以前自己搞的一个数据库操作类重新整理了一下,把命名规范了一下,位置和功能重新规划了一下. 源代码下载:http://files.cnblogs.com/xiaoshuai1992/xsFrameWork.SqlServer.zip 请先看图片和介绍 DbOperate文件夹 DbAccess类:核心类,运用Ado.net 对数据库进行操作. DbInParameter :传入DbAccess的参数,如参数,sql语句,sp名称,sp是执行还是返回数据. DbOutParamete

去年方百度首页播放器写的一个js代码,先记录一下,不支持火狐了,改天用autio改改

播放器内核使用的是 object 或embed 刚刚测试了下,最新的火狐不支持了,IE 360还能用,改天换成audio来做吧 这里先记录下来 支持下一曲,暂停,开始 使用方法很简单: 该代码很简单,使用js实现,使用方法很简单 1.引入css:<link href="css/StyleSheet.css" rel="stylesheet" type="text/css" />2.引入js:<script src="j

我写的一个ExcelHelper通用类,可用于读取或生成数据

读取或生成EXCEL数据的方法有很多,一般常见的有: 1.通过OFFICE EXCEL组件,优点:读取与生成EXCEL文件方便,缺点:服务器上必须安装OFFICE软件,且进程无法及时释放 2.通过第三方组件(比如:NPOI),优点:无需安装OFFICE软件,缺点:需要引入第三方组件,当然这个还是比较强的 3.通过把EXCEL当成数据库,连接后运用SQL语句读取,写入的话就自行拼接成HTML表格,优点:无需另外的组件,缺点:需要会SQL及拼接HTML表格较麻烦: 三种方法我都有用过,若开发BS网站

非常不错的一个JS分页效果代码

这里分享一个不错的js分页代码. 代码中cpage是页面计数,应为全局变量,可以随处调用它: totalpage是总页数. 与asp分页代码很类似,也是先取得记录总数,然后实现分页,基本的分页思路与原理还是相通的,感兴趣的朋友做个参考吧. 例子,js分页效果代码. <!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-t

php 自己写的好看的分页类

自己写的一个分页类 ,不是很完整,个别没有做验证,但可以使用,分页效果见文章底部.除了链接数据库的代码没有粘贴上来,其他的都粘贴了.供学习使用- 1 <?php 2 /** 3 * Created by PhpStorm. 4 * User: Caoxt 5 * Date: 15-7-3 6 * Time: 上午10:03 7 */ 8 class page { 9 public $pageSize; //每页显示的文章条数 10 public $showPage; //页数条显示的条数 11

一个通用分页类

1.功能 这个通用分页类实现的功能是输入页数(第几页)和每页的数目,就能获得相应的数据. 2.实现原理 分页的实现通常分为两种,一种是先把数据全查询出来再分页,一种是需要多少查询多少,这里使用第二种,所以就需要先实现在dao层能够查询一定范围内的数据,这里就实现通过id作为键值,查询一定范围内的数据的功能 dao层需要实现一个返回id在一个范围内的数据,那就在dao层的接口中添加一个这个方法: List<User> selectByRange(@Param("low") I

entity framework 6 我写了一个公用数据类

public class BaseDAL { string strConn = ""; public BaseDAL(string connString) { strConn = connString; } #region 通用增删改查 #region 非原始sql语句方式 /// <summary> /// 新增 /// </summary> /// <param name="entity">实体</param> /

自己写的一个Js小插件

这是效果图.上面一个过滤标签.下面弹出框,选择日,周,月.我的用途主要是报表查询的时候根据这3种类型来查询数据用的. 这里分享下代码. Js代码 (function ($) { $.extend($.fn, { DtFilter: function (setting) { var container = this.html('<span type="text" class="filterDiv"><i class="fa fa-filte