//分页插件1
function showView(option) {
    //参数定义id,页容量,当前页,总数,页总数
    var id = option.id,
         pageSize = option.pageSize,
         currentPage = option.currentPage,
         totalCount = option.totalCount,
         pageCount = 0;
    var textHtml = "";
    if (Number(pageSize) && Number(totalCount) && Number(currentPage)) {
        pageCount = (parseInt(totalCount / pageSize)) + 1;
        textHtml = "<span class='coseSpan' value='1'><a href='javascript:;'>首页</a></span>";
        if (currentPage > 1) {
            textHtml += "<span class='coseSpan' value = '" + (parseInt(currentPage) - 1) + "'><a href='javascript:;'>上一页</a></span>";
        } else {
            textHtml += "<span class='eleSpan' value = '1'>上一页</span>";
        }
        if (currentPage < pageCount) {
            textHtml += "<span class='coseSpan' value = '" + (parseInt(currentPage) + 1) + "'><a href='javascript:;'>下一页</a></span>";
        } else {
            textHtml += "<span class='eleSpan' value = '" + (parseInt(currentPage) + 1) + "'>下一页</span>";
        }
        textHtml += "<span class = 'coseSpan' value='" + parseInt(pageCount) + "'><a href='javascript:;'>尾页</a></span>";
    } else {
        textHtml += "<span>首页</span><span>上一页</span><span>下一页</span><span>尾页</span>";
    }
    //加载页面
    $("#" + id).html(textHtml);
    //注册事件
    $("span .coseSpan").unbind("click").click(function() {
        //获取当前页
        var pageIndex = $(this).attr("value");
        if (pageIndex && Number(pageIndex)) {
            option.getPrassBar(parseInt(pageIndex), pageSize);
        }
    });
}

//分页插件2
function showPageBar(option) {
    var id = option.id,
        pageSize = option.pageSize,
        currentPage = option.currentPage,
        toltalCount = option.toltalCount;
    var textHtml = "";
    if (Number(toltalCount) && Number(pageSize) && Number(currentPage)) {
        //获取有多少页
        pageCount = parseInt(toltalCount / pageSize) + 1;
        //计算开始下标
        var startIndex = (currentPage - 1) * pageSize + 1,
        endIndex = currentPage * pageSize;
        if (endIndex < toltalCount) {
            textHtml += "显示" + startIndex + "到" + endIndex + "条记录,共" + toltalCount + "条记录&nbsp";
        } else {
            textHtml += "显示" + startIndex + "到" + toltalCount + "条记录,共" + toltalCount + "条记录&nbsp";
        }
        if (currentPage == 1) {
            textHtml += "<span class='NowcChangePage' value='1' title='首页'><<</span>&nbsp<span class='NowChangePage' value='1' title='上一页'><</span>&nbsp";
        } else {
            textHtml += "<span class='changePage' value='1' title='首页'><a href='javascrpit:void(0)'><<</a></span>&nbsp<span class='changePage' value='" + (currentPage - 1) + "' title='上一页'><a href='javascrpit:void(0)'><</a></span>&nbsp";
        }
        if (pageCount > 6) {
            if ((currentPage == 1 || currentPage == 2)) {
                for (var i = 1; i <= 3; i++) {
                    if (i == currentPage) {
                        textHtml += "<span class='changePage' value='" + i + "'>" + i + "</span>";
                    } else {
                        textHtml += "<span class='changePage' value='" + i + "'><a href='javascript:void(0)'>" + i + "</a></span>";
                    }
                }
                textHtml += "...";
                for (var n = (pageCount - 2); n <= pageCount; n++) {
                    textHtml += "<span class='changePage' value='" + n + "'><a href='javascript:void(0)'>" + n + "</a></span>";
                }
            } else {
                if ((pageCount - currentPage) > 4) {
                    for (var i = (currentPage - 1); i <= (currentPage + 1); i++) {
                        if (i == currentPage) {
                            textHtml += "<span class='changePage' value='" + i + "'>" + i + "</span>";
                        } else {
                            textHtml += "<span class='changePage' value='" + i + "'><a href='javascript:void(0)'>" + i + "</a></span>";
                        }
                    }
                    textHtml += "...";
                    for (var n = (pageCount - 2); n <= pageCount; n++) {
                        textHtml += "<span class='changePage' value='" + n + "'><a href='javascript:void(0)'>" + n + "</a></span>";
                    }
                } else {
                    //找出起始元素
                    for (var n = (pageCount - 5); n <= pageCount; n++) {
                        if (n == currentPage) {
                            textHtml += "<span class='changePage' value='" + n + "'>" + n + "</span>";
                        } else {
                            textHtml += "<span class='changePage' value='" + n + "'><a href='javascript:void(0)'>" + n + "</a></span>";
                        }
                    }
                }
            }
        } else {
            for (var i = 1; i <= parseInt(pageCount); i++) {
                if (currentPage == i) {
                    textHtml += "<span class='NowchangePage' value='" + i + "'>" + i + "</span>";
                } else {
                    textHtml += "<span class='changePage' value='" + i + "'><a href='javascrpit:void(0)'>" + i + "</a></span>";
                }
            }
        }
        if (currentPage == pageCount) {
            textHtml += "&nbsp<span class='NowcChangePage' value='1' title='下一页'>></span>&nbsp<span class='NowChangePage' value='1' title='尾页'>>></span>";
        } else {
            textHtml += "&nbsp<span class='changePage' value='" + (currentPage + 1) + "' title='下一页'><a href='javascrpit:void(0)'>></a></span>&nbsp<span class='changePage' value='" + pageCount + "' title='尾页'><a href='javascrpit:void(0)'>>></a></span>";
        }

$("#" + id).html(textHtml);
        $("span .changePage").unbind("click").click(function() {
            var currentIndex = parseInt($(this).attr("value"));
            if (Number(currentIndex)) {
                option.getPrassBar(parseInt(currentIndex), pageSize);
            }
        });
    }

}

//html代码

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="分页插件._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>无标题页</title>

<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>

<script src="js/paging.js" type="text/javascript"></script>

<script type="text/javascript">
        function loadPage(currentPage,pageSize) {
            showView({
            id: "page",
                pageSize: pageSize,
                currentPage: currentPage,
                totalCount: 0,
                getPrassBar: function(pageIndex, pageSize) {
                alert("页下标:" + pageIndex + "页容量:" + pageSize);
                    loadPage(pageIndex, pageSize);
                }
            });
        }
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input type="button" value="加载分页控件" onclick="loadPage(1,10)" /></div>
    <div>
        <span id="page"></span>
    </div>
    </form>
</body>
</html>

js分页插件的更多相关文章

  1. Bootstrap的js分页插件属性介绍

    Bootstrap Paginator是一款基于Bootstrap的js分页插件,功能很丰富,个人觉得这款插件已经无可挑剔了.它提供了一系列的参数用来支持用户的定 制,提供了公共的方法可随时获得插件状 ...

  2. 一款基于Bootstrap的js分页插件bootstrap-paginator使用实例

    Bootstrap Paginator是一款基于Bootstrap的js分页插件,功能很丰富.它提供了一系列的参数用来支持用户的定制,提供了公共的方法可随时获得插件状态的改变,以及事件来监听用户的动作 ...

  3. Jquery.Page.js 分页插件的使用

    1.简单直接贴代码 需要引用以下样式和脚本 <link href="~/Scripts/Page/pager.css" rel="stylesheet" ...

  4. JQuery.Page.js分页插件的使用

    1.简单直接贴代码 需要引用以下样式和脚本 <link href="~/Scripts/Page/pager.css" rel="stylesheet" ...

  5. twbsPagination.js分页插件

    分页插件在使用时注意,如果页面中存在其他异步加载的数据,在运行分页方法第一次后,页面上的分页样式与分页中的data数据就是第一次的数据,如果异步加载重新在页面上录入数据,并希望分页继续在新的数据上实现 ...

  6. Js分页插件,支持页面跳转

    这里先给出API: 你只需要提供一个对象涉及以下几项属性,你来设置属性值,通过jq对象链式调用page()以参数形式来加载这个对象,按照参数要求会自动生成分页功能, 参数中pageEvent是可以让你 ...

  7. js 分页插件(jQuery)

    参考:http://www.jb51.net/article/117191.htm 侵删 css 部分 @charset "utf=8"; *{ box-sizing: borde ...

  8. jquery.pagination.js分页插件的使用

    Pagination的相关参数: Pagination使用的核心代码:         //回调函数         function pageselectCallback(page_index, j ...

  9. 一个比较轻巧好用的js分页插件,可ajax可url

    var pageNav = pageNav || {}; pageNav.fn = null; pageNav.pre = "pre"; pageNav.next = " ...

随机推荐

  1. 10、Java并发性和多线程-线程安全与不可变性

    以下内容转自http://ifeve.com/thread-safety-and-immutability/: 当多个线程同时访问同一个资源,并且其中的一个或者多个线程对这个资源进行了写操作,才会产生 ...

  2. 例说linux内核与应用数据通信系列

    [版权声明:尊重原创.转载请保留出处:blog.csdn.net/shallnet.文章仅供学习交流,请勿用于商业用途] 本系列通过源代码演示样例解说linux内核态与用户态数据通信的各种方式: 例说 ...

  3. Python3基础(二) 基本数据类型

    Python中的变量不需要声明.每个变量在使用前都必须赋值,变量赋值以后该变量才会被创建.在Python中,变量就是变量,它没有类型,我们所说的"类型"是变量所指的内存中对象的类型 ...

  4. Matlab得到二值图像中最大连通区域

    有时候要将二值化图像中最大的连通域保存下来.以下函数提供了一种方法: %function [img]=maxLianTongYu(I):求图像中最大的连通域 %输入:I 输入图像 %输出:img 仅包 ...

  5. oc const 关键字 对指针的理解

    /* int const *p; *p是常量, p是变量 const int *p; *p是常量, p是变量 int * const p; *p是变量, p是常量 const int * const ...

  6. Android之Activity之间传递对象

    在非常多时候,我们须要在Activity之间传递对象,比方当你点击了某列表的item,须要传递给下一个Activity该对象,那我们须要该怎么做呢? Android支持两种传递对象的方式.一种是bun ...

  7. 怎样设置mysql远程訪问

     Mysql默认是不能够通过远程机器訪问的,通过以下的配置能够开启远程訪问 在MySQL Server端: 运行mysql 命令进入mysql 命令模式, mysql> use mysql; ...

  8. mysql 常用查询语句记录

    SELECT DISTINCT CONCAT('User: ''',USER,'''@''',HOST,''';') AS QUERY FROM mysql.user; GRANT USAGE ON ...

  9. YTU 2760: 字符串---首字母变大写

    2760: 字符串---首字母变大写 时间限制: 1 Sec  内存限制: 128 MB 提交: 343  解决: 136 题目描述 输入一行英文句子,将每个单词的第一个字母改成大写字母. 输入 一个 ...

  10. bzoj 3312 No Change

    题目大意: 到商场购物,他的钱包里有K个硬币 想按顺序买 N个物品,第i个物品需要花费c(i)块钱 在依次进行的购买N个物品的过程中,可以随时停下来付款,每次付款只用一个硬币 支付购买的内容是从上一次 ...