改写Jquery的一个分页插件

最新推荐文章于 2024-10-02 17:15:49 发布

w2512149

最新推荐文章于 2024-10-02 17:15:49 发布

阅读量549

点赞数

分类专栏： Jquery技术文章标签： jquery function border html url class

Jquery技术专栏收录该内容

2 篇文章 0 订阅

订阅专栏

最近网上看到一个JQuery的一个分页插件，个人感觉，插件这些东西，用起来不一定附和自己的风格，所以就在这个插件基础上改写了一下，按照自己兴趣做了一下修改；修改后的插件（严格说不规范的插件），使用起来会比较简单，只需要几步就可以完成整个分页操作：

1、导入jquery.js文件和分页插件文件；
2、页面中必须有一个<div class="mypagination"> </div> 作为存放分页控件的层。同时又一个层用于作为呈现，这个div的id可以

随便取，不过为了不会与别的页面控件id一样，可以尽量取有意义的id值；
3、在ready方法中添加代码，Paging(handleUrl, showField, showNameField, containerID, PageSize, ItemSize)来初始化页面;
其中：
handleUrl：处理分页数据的url，可以带参数。
showField：显示的字段，写*号表示所有字段都显示，各个字段间用逗号，分开。如：showField="id,name,department";
showNameField：显示的每个字段头的名称，在显示所有字段的情况下，这个头只显示字段名；格式与showField对应，如：

showNameField="id,名称,部门";
containerID：呈现数据的div的id值
PageSize：初始化每页显示大小
ItemSize：初始化每页显示控件页码的数量。

该控件handlerUrl的处理后返回是json对象数据，格式如下：
{'RecordCount':'1000','Data':[{'id':'111','name':'bill'},{'id':'123','name':'biao'}]}

数据库访问层可以使用存储过程返回数据集，并返回记录数，以便构造json数据时候可以设置RecordCount。

效果如下：

插件代码：jquery.pagination.js

+ expand sourceview plaincopy to clipboardprint?
var _PageSize = 10;   //每页显示数量
var _ItemSize = 10; //按键数量
var _CurrentPage = 1;
var _RecordCount = 0;
var _ShowField = "";
var _ShowNameField = "";
var _ContainerID = "";
var _HandlerUrl = "";

Paging = function(handleUrl, showField, showNameField, containerID, pageSize, itemSize) {
    var flag = true;
    if (showField != "*" && showField != "" && showNameField != "*" && showNameField != "") {
        if (showField.split(",").length != showNameField.split(",").length) {
            flag = false;
            alert("参数不正确");
        }
    }
    if (flag == true) {
        _PageSize = pageSize;
        _ItemSize = itemSize;
        _ShowField = showField;
        _ShowNameField = showNameField;
        _ContainerID = containerID;
        _HandlerUrl = handleUrl;
        GetData();
    }
};

GetUrl = function() {
    var pi = parseInt(_CurrentPage) - 1;
    var url = "";
    var arg = "pi=" + pi + "&ps=" + _PageSize;

    if (_HandlerUrl.indexOf("?") != undefined && _HandlerUrl.indexOf("?") > 0)
        url = _HandlerUrl + "&" + arg;
    else
        url = _HandlerUrl + "?" + arg;
    return url;
}

GetData = function() {
    $("#" + _ContainerID).css("text-align", "center").html("<img src="images/wait.gif" mce_src="images/wait.gif" alt='' />");
    var url = GetUrl();
    $.ajax({
        type: "get",
        url: url,
        dataType: "json",
        success: function(data) { GetDataSuccess(data); }, //成功时候调用另外一个函数
        error: function(XMLHttpRequest, textStatus, errorThrown) { alert(XMLHttpRequest.responseText); }
    });
}

GetDataSuccess = function(retData) {
    _RecordCount = retData.RecordCount;
    var data = retData.Data;
    if (data.length > 0) {
        if (showField == "" || showField == "*") {
            ShowAllInPage(data);
        } else {
            ShowFieldInPage(data);
        }
    }
    $("div[class='mypagination']").pagination(_RecordCount, _CurrentPage, {
        pageSize: _PageSize,
        itemSize: _ItemSize,
        callback: function(page) {
            //alert("选中第 " + page + " 页");
            //return true;
            _CurrentPage = page;
            GetData();
            return true;
        }
    });

    //alert(eval("data[0].aa"));
    //alert(RecordCount);
};

ShowAllInPage = function(data) {
    _ShowField = "";
    _ShowNameField = "";
    for (var key in data[0]) { //获取属性名
        _ShowField += key + ",";
        _ShowNameField += key + ",";
    }
    if (_ShowField != "") {
        _ShowField = _ShowField.substr(0, _ShowField.length - 1);
        _ShowNameField = _ShowNameField.substr(0, _ShowNameField.length - 1);
    }
    ShowFieldInPage(data);   //调用显示field函数
    /*
    for (var i in data) {
    for (var key in data[i]) {
    //alert(key + ':' + data[i][key]);
    }
    }
    */
}

ShowFieldInPage = function(data) {
    var fieldArray = _ShowField.split(","); //转换成数组
    var nameArray = _ShowNameField.split(",");
    //alert(fieldArray[0]);
    var filld = "";
    var value = "";
    var html = "";
    html += "<table cellpadding='0' cellspacing='1' border='0' width='100%'>";
    html += "<tr class='listTitleClass'>";
    for (var n in nameArray) {
        html += "<td>" + nameArray[n] + "</td>";
        //alert(fieldArray[f]);
    }
    html += "</tr>";
    for (var i in data) {
        html += "<tr class='listDataClass'>";
        for (var f in fieldArray) {
            value = eval("data[" + i + "]." + fieldArray[f]);
            if (value == undefined)
                value = "数据出错了";
            html += "<td>" + value + "</td>";

        }
        html += "</tr>";
    }
    html += "</table>";
    //alert(html);
    $("#" + _ContainerID).html(html);

    $("#" + _ContainerID).find("table").find("tr.listDataClass:odd").each(function() {
        $(this).addClass("trodd");
        //alert("dd");
    });
}

$.fn.pagination = function(totalProperty, currPage, opts) {
    opts = $.extend({
        pageSize: 10,
        itemSize: 10,
        callback: function() {
        }
    }, opts || {});

    var pages = new Array();
    var synchronization = function(page) {
        for (var i = 0; i < pages.length; i++) {
            var tmp = pages[i];
            tmp.synchronization(page);
        }
    }

    return this.each(function() {
        function numPages() {
            return Math.ceil(totalProperty / opts.pageSize);
        }

        function selectPage(page) {
            return function() {
                currPage = page;
                if (page < 1 || page > numPages()) {
                } else {
                    var rs = opts.callback(page);
                    if (rs) {
                        synchronization(currPage);
                    }
                }
            }
        }

        function createItems(itemSize, beginNum, pageNums) {
            //alert(itemSize);
            //alert(beginNum);
            //alert(pageNums);
            var html = '';
            var num = 1;
            var size = itemSize;
            if (beginNum + itemSize > pageNums) {
                size = pageNums - beginNum + 1;
            }
            for (var i = 0; i < size; i++) {
                num = beginNum + i;
                if (num == currPage) {
                    html += '<li><span>' + num + '</span></li>';
                } else {
                    html += '<li><a>' + num + '</a></li>';
                }
            }
            return html;
        }

        function countBeginNum(pageNums, currPage) {
            if (pageNums <= opts.itemSize) {
                return 1;
            } else if (currPage > opts.itemSize / 2) {
                var beginNum = currPage - parseInt( opts.itemSize / 2);   //防止奇数时候出现小数点页码；去除小数点取整
                if (beginNum + opts.itemSize > pageNums) {
                    beginNum = pageNums - opts.itemSize + 1;
                    if (beginNum < 1)
                        beginNum = 1;
                }
                return beginNum;
            }
            return 1;
        }

        function render() {
            var pageNums = numPages();
            var itemsHtml = '';
            var beginNum = countBeginNum(pageNums, currPage);
            if (pageNums > 0) {
                itemsHtml = createItems(opts.itemSize, beginNum, pageNums);
            }
            var html = '<div class="pagination">'
                          + '<li class="page-frist"></li>'
                          + '<li class="page-prev"></li>'
                          + itemsHtml
                          + '<li class="page-next"></li>'
                          + '<li class="page-last"></li>'
                          + '<li>   共' + pageNums + '页 ' + totalProperty + '条记录</li>'
                          + '</div>';

            panel.empty();
            panel.append(html);
            $('li.page-frist', panel)
                .bind('click', selectPage(1));
            $('li.page-prev', panel)
                .bind('click', selectPage(currPage - 1));
            $('li.page-next', panel)
                .bind('click', selectPage(currPage + 1));
            $('li.page-last', panel)
                .bind('click', selectPage(numPages()));

            $('a', panel).each(
                function() {
                    var obj = $(this);
                    var value = parseInt(obj.text());
                    obj.bind('click', selectPage(value));
                });
        }

        var panel = $(this);
        panel.synchronization = function(page) {
            currPage = page;
            render();
        }
        render();
        pages[pages.length] = panel;
    });
}
var _PageSize = 10;   //每页显示数量
var _ItemSize = 10; //按键数量
var _CurrentPage = 1;
var _RecordCount = 0;
var _ShowField = "";
var _ShowNameField = "";
var _ContainerID = "";
var _HandlerUrl = "";

Paging = function(handleUrl, showField, showNameField, containerID, pageSize, itemSize) {
    var flag = true;
    if (showField != "*" && showField != "" && showNameField != "*" && showNameField != "") {
        if (showField.split(",").length != showNameField.split(",").length) {
            flag = false;
            alert("参数不正确");
        }
    }
    if (flag == true) {
        _PageSize = pageSize;
        _ItemSize = itemSize;
        _ShowField = showField;
        _ShowNameField = showNameField;
        _ContainerID = containerID;
        _HandlerUrl = handleUrl;
        GetData();
    }
};

GetUrl = function() {
    var pi = parseInt(_CurrentPage) - 1;
    var url = "";
    var arg = "pi=" + pi + "&ps=" + _PageSize;

    if (_HandlerUrl.indexOf("?") != undefined && _HandlerUrl.indexOf("?") > 0)
        url = _HandlerUrl + "&" + arg;
    else
        url = _HandlerUrl + "?" + arg;
    return url;
}

GetData = function() {
    $("#" + _ContainerID).css("text-align", "center").html("<img src="images/wait.gif" mce_src="images/wait.gif" alt='' />");
    var url = GetUrl();
    $.ajax({
        type: "get",
        url: url,
        dataType: "json",
        success: function(data) { GetDataSuccess(data); }, //成功时候调用另外一个函数
        error: function(XMLHttpRequest, textStatus, errorThrown) { alert(XMLHttpRequest.responseText); }
    });
}

GetDataSuccess = function(retData) {
    _RecordCount = retData.RecordCount;
    var data = retData.Data;
    if (data.length > 0) {
        if (showField == "" || showField == "*") {
            ShowAllInPage(data);
        } else {
            ShowFieldInPage(data);
        }
    }
    $("div[class='mypagination']").pagination(_RecordCount, _CurrentPage, {
        pageSize: _PageSize,
        itemSize: _ItemSize,
        callback: function(page) {
            //alert("选中第 " + page + " 页");
            //return true;
            _CurrentPage = page;
            GetData();
            return true;
        }
    });

//alert(eval("data[0].aa"));
//alert(RecordCount);
};

ShowAllInPage = function(data) {
    _ShowField = "";
    _ShowNameField = "";
    for (var key in data[0]) { //获取属性名
        _ShowField += key + ",";
        _ShowNameField += key + ",";
    }
    if (_ShowField != "") {
        _ShowField = _ShowField.substr(0, _ShowField.length - 1);
        _ShowNameField = _ShowNameField.substr(0, _ShowNameField.length - 1);
    }
    ShowFieldInPage(data);   //调用显示field函数
    /*
    for (var i in data) {
    for (var key in data[i]) {
    //alert(key + ':' + data[i][key]);
    }
    }
    */
}

ShowFieldInPage = function(data) {
    var fieldArray = _ShowField.split(","); //转换成数组
    var nameArray = _ShowNameField.split(",");
    //alert(fieldArray[0]);
    var filld = "";
    var value = "";
    var html = "";
    html += "<table cellpadding='0' cellspacing='1' border='0' width='100%'>";
    html += "<tr class='listTitleClass'>";
    for (var n in nameArray) {
        html += "<td>" + nameArray[n] + "</td>";
        //alert(fieldArray[f]);
    }
    html += "</tr>";
    for (var i in data) {
        html += "<tr class='listDataClass'>";
        for (var f in fieldArray) {
            value = eval("data[" + i + "]." + fieldArray[f]);
            if (value == undefined)
                value = "数据出错了";
            html += "<td>" + value + "</td>";

        }
        html += "</tr>";
    }
    html += "</table>";
    //alert(html);
    $("#" + _ContainerID).html(html);

    $("#" + _ContainerID).find("table").find("tr.listDataClass:odd").each(function() {
        $(this).addClass("trodd");
        //alert("dd");
    });
}

$.fn.pagination = function(totalProperty, currPage, opts) {
    opts = $.extend({
        pageSize: 10,
        itemSize: 10,
        callback: function() {
        }
    }, opts || {});

    var pages = new Array();
    var synchronization = function(page) {
        for (var i = 0; i < pages.length; i++) {
            var tmp = pages[i];
            tmp.synchronization(page);
        }
    }

    return this.each(function() {
        function numPages() {
            return Math.ceil(totalProperty / opts.pageSize);
        }

        function render() {
            var pageNums = numPages();
            var itemsHtml = '';
            var beginNum = countBeginNum(pageNums, currPage);
            if (pageNums > 0) {
                itemsHtml = createItems(opts.itemSize, beginNum, pageNums);
            }
            var html = '<div class="pagination">'
                 + '<li class="page-frist"></li>'
        + '<li class="page-prev"></li>'
        + itemsHtml
        + '<li class="page-next"></li>'
        + '<li class="page-last"></li>'
        + '<li>   共' + pageNums + '页 ' + totalProperty + '条记录</li>'
        + '</div>';

            panel.empty();
            panel.append(html);
            $('li.page-frist', panel)
    .bind('click', selectPage(1));
            $('li.page-prev', panel)
    .bind('click', selectPage(currPage - 1));
            $('li.page-next', panel)
    .bind('click', selectPage(currPage + 1));
            $('li.page-last', panel)
    .bind('click', selectPage(numPages()));

            $('a', panel).each(
    function() {
        var obj = $(this);
        var value = parseInt(obj.text());
        obj.bind('click', selectPage(value));
    });
        }

        var panel = $(this);
        panel.synchronization = function(page) {
            currPage = page;
            render();
        }
        render();
        pages[pages.length] = panel;
    });
}

测试页面：demo.htm

+ expand sourceview plaincopy to clipboardprint?
<!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>
    <title></title>
    <mce:style></mce:style><style mce_bogus="1">        body
        {
            font-family: Verdana,Tahoma;
            font-size: 12px;
        }
        .pagination
        {
            text-align:center;
        }
        .pagination li
        {
            padding: 0;
            float: left;
            margin-right: 2px;
            display: block;
            cursor: pointer;
        }
        .pagination span
        {
            display: block;
            padding: 2px 5px 2px 5px;
            background: #FFFFCC;
            font-weight: bold;
            border: 1px solid #CCC;
            color: #7B7B7B;
            cursor: text;
        }
        .pagination a
        {
            display: block;
            text-decoration: none;
            margin: 0px;
            color: #0066CC;
            padding: 2px 5px 2px 5px;
            border: 1px solid #0099FF;
        }
        .pagination a:link, a:visited
        {
            border: 1px solid #CCCCCC;
        }
        .pagination a:hover
        {
            border: 1px solid #0099FF;
            background: #CCFFFF;
        }
        .pagination .page-frist
        {
            background: url(images/page-first.gif) no-repeat;
            width: 13px;
            height: 16px;
        }
        .pagination .page-prev
        {
            background: url(images/page-prev.gif) no-repeat;
            width: 13px;
            height: 16px;
        }
        .pagination .page-last
        {
            background: url(images/page-last.gif) no-repeat;
            width: 13px;
            height: 16px;
        }
        .pagination .page-next
        {
            background: url(images/page-next.gif) no-repeat;
            width: 13px;
            height: 16px;
        }
        .listTitleClass
        {
            background-color: Gray;
            line-height: 20px;
            font-weight: bold;
            font-size: 14px;
            text-align: center;
        }
        .listDataClass
        {
            line-height: 20px;
        }
        .treven
        {
            background-color: Silver;
        }
        .trodd
        {
            background-color: Silver;
        }
        .mypagination
        {
            margin-top:10px;
            padding:4px;
            height:20px;
            border:1px solid blue;
            background-image:url(images/tb-bg.gif);
        }
    </style>

    <mce:script type="text/javascript" src="js/jquery-1.3.2.js" mce_src="js/jquery-1.3.2.js"></mce:script>

    <mce:script type="text/javascript" src="jquery.pagination.js" mce_src="jquery.pagination.js"></mce:script>

    <mce:script type="text/javascript"></mce:script>

</head>
<body>
    <div id="divContentList">
    </div>
    <div class="mypagination"> </div>
</body>
</html>
<!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>
    <title></title>
    <mce:style></mce:style><style mce_bogus="1">        body
        {
            font-family: Verdana,Tahoma;
            font-size: 12px;
        }
        .pagination
        {
        text-align:center;
        }
        .pagination li
        {
            padding: 0;
            float: left;
            margin-right: 2px;
            display: block;
            cursor: pointer;
        }
        .pagination span
        {
            display: block;
            padding: 2px 5px 2px 5px;
            background: #FFFFCC;
            font-weight: bold;
            border: 1px solid #CCC;
            color: #7B7B7B;
            cursor: text;
        }
        .pagination a
        {
            display: block;
            text-decoration: none;
            margin: 0px;
            color: #0066CC;
            padding: 2px 5px 2px 5px;
            border: 1px solid #0099FF;
        }
        .pagination a:link, a:visited
        {
            border: 1px solid #CCCCCC;
        }
        .pagination a:hover
        {
            border: 1px solid #0099FF;
            background: #CCFFFF;
        }
        .pagination .page-frist
        {
            background: url(images/page-first.gif) no-repeat;
            width: 13px;
            height: 16px;
        }
        .pagination .page-prev
        {
            background: url(images/page-prev.gif) no-repeat;
            width: 13px;
            height: 16px;
        }
        .pagination .page-last
        {
            background: url(images/page-last.gif) no-repeat;
            width: 13px;
            height: 16px;
        }
        .pagination .page-next
        {
            background: url(images/page-next.gif) no-repeat;
            width: 13px;
            height: 16px;
        }
        .listTitleClass
        {
            background-color: Gray;
            line-height: 20px;
            font-weight: bold;
            font-size: 14px;
            text-align: center;
        }
        .listDataClass
        {
            line-height: 20px;
        }
        .treven
        {
            background-color: Silver;
        }
        .trodd
        {
            background-color: Silver;
        }
        .mypagination
        {
        margin-top:10px;
        padding:4px;
        height:20px;
         border:1px solid blue;
         background-image:url(images/tb-bg.gif);
        }
    </style>

<mce:script type="text/javascript" src="js/jquery-1.3.2.js" mce_src="js/jquery-1.3.2.js"></mce:script>

<mce:script type="text/javascript" src="jquery.pagination.js" mce_src="jquery.pagination.js"></mce:script>

<mce:script type="text/javascript"></mce:script>

</head>
<body>
    <div id="divContentList">
    </div>
    <div class="mypagination"> </div>
</body>
</html>