现在位置首页 / 项目实战 /正文

Javascript 使用回调函数的自定义分页插件--自带样式

作者: IT小兵 | 2014年3月14日| 热度:℃ | 评论: |参与:

今天分享一个javascript写的自定义的分页样式。用到Javascript 的回调函数。自带样式。

demo压缩包下载:

http://pan.baidu.com/s/1bnszH5X

内容介绍:

test.html:是测试页面。调用js

使用了jquery包。

样式:

<style>
        /* CSS Document */
        * {
            margin: 0;
            padding: 0;
            color: #000;
            font-size: 14px;
            font-weight: 300;
        }
        body {
            background: #fff;
            overflow: hidden;
            font-family: Arial, sans-serif;
            font-size: 12px;
        }
        fieldset, img {
            border: none;
        }
        table {
            border-collapse: 0;
            border-spacing: 0;
            border: 0;
        }
            table td {
                border-bottom: 1px solid #ddd;
            }
        li {
            list-style: none;
        }
        a {
            text-decoration: none;
        }
            a img {
                font-size: 0;
                vertical-align: middle;
            }
            a:hover {
                text-decoration: none;
            }
        strong {
            font-weight: bold;
        }
        table img {
            vertical-align: middle;
        } 
        /* begin page */
        .page {
            width: 865px;
            margin: 10px auto;
            height: 37px;
            overflow: hidden;
        }
            .page li {
                float: left;
                width: 37px;
                height: 37px;
                margin-right: 5px;
                color: #555;
                text-align: center;
                line-height: 33px;
                font-family: Arial, Helvetica, sans-serif;
                background: url(images/page_bg.jpg) no-repeat;
            }
                .page li a {
                    color: #7f7f7f;
                    font-weight: bold;
                }
                .page li img {
                    vertical-align: middle;
                }
                .page li:hover {
                    background: url(images/page_bg_on.jpg) no-repeat;
                    color: #fff;
                }
                    .page li:hover a {
                        color: #fff;
                    }
                .page li.page_last {
                    background: none;
                }
                .page li.page_ic {
                    background: none;
                    width: 100px;
                    color: #b2b2b2;
                }
                    .page li.page_ic:hover {
                        color: #b2b2b2;
                    }
        .page_ic input {
            width: 42px;
            height: 37px;
            background: url(images/page_ic_bg.jpg) no-repeat;
        }
        .page li.page_on {
            background: url(images/page_bg_on.jpg) no-repeat;
            color: #fff;
            border: none;
        }
            .page li.page_on a {
                color: #fff;
            }
        .page_ic input {
            width: 42px;
            height: 37px;
            line-height: 37px;
            border: none;
            text-indent: 5px;
        }
        .page li.page_number {
            background: none;
            color: #777;
            width: 250px;
            text-align: left;
        }
    </style>

javascript:

var pIndex = 1 //当前页面索引
var pSize = 10; //每页条数
var linkCount = 10; //显示的分页链接个数
//Go 按钮
function getPageListGO(_totalPageCount,callback) {
    var goIndex = $("#txtPageGo").val();
    if (isNaN(goIndex) == false) {
        if (parseInt(goIndex) > parseInt(_totalPageCount)) {
            goIndex = _totalPageCount;
        }
        $("#txtPageGo").val(goIndex);
        GetDateExtension(goIndex, callback);
    }
    else {
        alert("请输入整数");
    }
}
/* 分页控件 getPageListGO(int)、ListPager(data) 在 Common.js 中 */
//数字 跳转
function GetDateExtension(_pIndex, getdatacallback) {
      
     pIndex = _pIndex; //当前第几页
     (getdatacallback && typeof (getdatacallback) === "function") && getdatacallback();
     ListPager(_pIndex, pSize, 123232, 10, getdatacallback);
    
}
//计算分页的显示
function ListPager(PageIndex,PageSize, TotalCount, TotalPageCount, getdatacallback) {
     
    if (typeof (linkCount) == 'undefined' || parseInt(linkCount) == false 
    || linkCount < 0) linkCount = 10; //default=10
 
    if (typeof (PageIndex) == 'undefined' || parseInt(PageIndex) == false
     || PageIndex < 0) {
        pIndex=1;
    }
    else {
        pIndex = PageIndex;
    }
    if (typeof (PageSize) == 'undefined' || parseInt(PageSize) == false || PageSize < 0) {
        pSize=10;
    }
    else {
        pSize = PageSize;
    }
   
    var totalCount = TotalCount; //总记录数
    var totalPageCount = TotalPageCount; //总分页数
    var prev = parseInt(pIndex) - 1 < 1 ? 1 : parseInt(pIndex) - 1;
    var next = parseInt(pIndex) + 1 > totalPageCount ? totalPageCount : parseInt(pIndex) + 1;
    var toStr = "<li class=\"page_off\" onclick=\"GetDateExtension('" + prev.toString() + "',"
     + getdatacallback + ")\" ><img src=\"/images/page_left.png\" /></li>";
    var begin10 = parseInt((pIndex - 1) / linkCount) * linkCount + 1;
    var end10 = totalPageCount;
    if (totalPageCount - linkCount > begin10) end10 = begin10 + linkCount;
    for (var i = begin10 ; i <= end10 ; i++) {
        if (i < end10 || i == totalPageCount) {
            if (pIndex == i) {
                toStr += "<li class=\"page_on\" >" + i.toString() + "</li>";
            } else {
                toStr += "<li class=\"page_off\" onclick=\"GetDateExtension('" + i + "'," 
                + getdatacallback + ")\" >" + i.toString() + "</li>";
            }
        }
        else {
            toStr += "<li class=\"page_off\" onclick=\"GetDateExtension('" + i + "'," 
            + getdatacallback + ")\" >…</li>";
        }
    }
    toStr += "<li class=\"page_off\" onclick=\"GetDateExtension('" + next.toString() + "','" 
    + getdatacallback + "')\" ><img src=\"/images/page_right.png\" /></li>";
    toStr += "<li class=\"page_ic\">跳到:<input name=\"\" type=\"text\" id=\"txtPageGo\" value=\"" 
    + pIndex + "\" /></li>";
    
    toStr += "<li class=\"page_last page_off \"><img src=\"/images/page_go.jpg\" onclick=\"getPageListGO('"
     + totalPageCount + "'," + getdatacallback + ")\" /></li>";
    toStr += "<li class=\"page_number\"><span id=\"spanPageMessage\">共" + totalCount + "条/分" + totalPageCount
     + "页/每页" + pSize + "条</span></li>";
    $("#ListPager").html(toStr);
}


调用方式:

 <script>
     function GetData() {
         alert('获取数据');
     }
     $(document).ready(function (e) {
         ListPager(1, 12, 123232, 123232, GetData);
     });
    
 </script>

回调函数知识:

在javascript中回调函数非常重要,它们几乎无处不在。像其他更加传统的编程语言都有回调函数概念,

但是非常奇怪的是,完完整整谈论回调函数的在线教程比较少,倒是有一堆关于call()和apply()函数的,

或者有一些简短的关于callback的使用示例。

  函数也是对象

  想弄明白回调函数,首先的清楚地明白函数的规则。在javascript中,函数是比较奇怪的,

但它确确实实是对象。确切地说,函数是用Function()构造函数创建的Function对象。

Function对象包含一个字符串,字符串包含函数的javascript代码。假如你是从C语言或者java语言转过来的,

这也许看起来很奇怪,代码怎么可能是字符串?但是对于javascript来说,这很平常。数据和代码之间的区别是很模糊的。

回调函数示例:

/**
 * 回调函数测试方法
 * 
 * @param callback
 *            被回调的方法
 */
function testCallback(callback) {
	alert('come in!');
	callback();
}
/**
 * 被回调的函数
 */
function a() {
	alert('a');
}
/**
 * 开始测试方法
 */
function start() {
	testCallback(a);
}


转发注明:IT分享 http://www.suchso.com 

点击阅读本文所属分类的更多文章: 项目实战 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

抢天猫双11红包
推荐使用阿里云服务器
echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询