jquery实现pager控件示例

前端技术 2023/09/02 JavaScript

js：

复制代码 代码如下:

$.fn.extend({ JPager: function (cfg, pageIndex, pageSize) {
    if (cfg && pageIndex > 0 && pageSize>0) {
        var token = \"#\" + this.attr(\"id\");
        this.empty();
        var pageFirst = function () {
            $(token).JPager(cfg, 1, pageSize);
        };

        var pagePre = function () {
            $(token).JPager(cfg, pageIndex - 1, pageSize);
        };

        var pageLast = function () {
            $(token).JPager(cfg, parseInt($(\"#_tot\").val()), pageSize);
        };

        var pageNext = function () {
            $(token).JPager(cfg, pageIndex + 1, pageSize);
        };

        var pageNumber = function () {
            $(token).JPager(cfg, parseInt($(this).text()), pageSize);
        };

        var pageGo = function () {
            var index = parseInt($(\"#_pos\").val());
            var total = parseInt($(\"#_tot\").val());
            if (index) {
                if (index > total) {
                    $(token).JPager(cfg, total, pageSize);
                }
                else if (index < 1) {
                    $(token).JPager(cfg, 1, pageSize);
                }
                else {
                    $(token).JPager(cfg, index, pageSize);
                }
            }
        };
        var checkGoNumber = function () {
            if (!Number(this.value)) {
                this.value = \"\";
            }
            else {
                this.value = Number(this.value);
            }
        };
        var initCustomer = function (recordCount) {
            if (cfg.customer) {
                if (cfg.customer.template) {
                    var t = cfg.customer.template;
                    t = t.replace(/\\%total\\%/gi, Math.ceil(recordCount / pageSize)).replace(/\\%current\\%/gi, pageIndex).replace(/\\%recordCount\\%/gi, recordCount).replace(/\\%pageSize\\%/gi, pageSize);
                    if (cfg.customer.position == \"right\") {
                        $(\"#_right\").after(t);
                    }
                    else {
                        $(\"#_left\").before(t);
                    }
                }
            }
        };

        var changeState = function (total) {
            if (pageIndex == 1) {
                $(\"#_first\").attr(\"class\", \"unable\");
                $(\"#_pre\").attr(\"class\", \"unable\");
            }
            else {
                $(\"#_first\").bind(\"click\", pageFirst).attr(\"class\", \"number\");
                $(\"#_pre\").bind(\"click\", pagePre).attr(\"class\", \"number\");
            }
            if (pageIndex == total) {
                $(\"#_last\").attr(\"class\", \"unable\");
                $(\"#_next\").attr(\"class\", \"unable\");
            }
            else {
                $(\"#_last\").bind(\"click\", pageLast).attr(\"class\", \"number\");
                $(\"#_next\").bind(\"click\", pageNext).attr(\"class\", \"number\");
            }
        };
        var initNumber = function (total, count, current) {
            if (total > 0 && count > 0) {
                if (current < 1) {
                    current = 1;
                }
                if (current > total) {
                    current = total;
                }
                var endIndex = total;
                var startIndex = 1;
                var temp = current + Math.floor(count / 2);
                if (temp < total) {
                    if (temp < count) {
                        endIndex = count;
                    }
                    else {
                        startIndex = temp - count + 1;
                        endIndex = temp;
                    }
                }
                else {
                    if (total > count) {
                        startIndex = total - count + 1;
                    }
                }
                $(\"#_number\").empty();
                for (var i = startIndex; i <= endIndex; i++) {
                    var html = $(\"<span></span>\").text(i).bind(\"click\", pageNumber);
                    if (i == current) {
                        $(\"#_number\").append(html.attr(\"class\", \"selected\"));
                    }
                    else {
                        $(\"#_number\").append(html.attr(\"class\", \"number\"));
                    }
                }
            }
        };

        var initPager = function (data) {
            if ($.isArray(data.SearchResult) && data.RecordCount > 0) {
                $(token).append(\"<span id=\'_left\'><span id=\'_first\' class=\'spcial\'>首页</span> <span id=\'_pre\' class=\'spcial\'>上一页</span></span> <span id=\'_number\'></span><span id=\'_go\'><input id=\'_pos\' type=\'text\'/><input id=\'_to\' type=\'button\' value=\'GO\'/></span> <span id=\'_right\'><span id=\'_next\' class=\'spcial\'>下一页</span> <span id=\'_last\' class=\'spcial\'>末页</span></span><input id=\'_tot\' type=\'hidden\'/>\");
                var total = Math.ceil(data.RecordCount / pageSize);
                $(\"#_tot\").val(total);
                $(\"#_pos\").bind(\"blur\", checkGoNumber);
                $(\"#_to\").bind(\"click\", pageGo);

                changeState(total);
                if (cfg.showNumber && cfg.count > 0) {
                    initNumber(total, cfg.count, pageIndex);
                }
                initCustomer(data.RecordCount);
            }
        };

        if (cfg.action) {
            if (cfg.action.url && cfg.action.data) {
                var d = cfg.action.data.substr(0, cfg.action.data.lastIndexOf(\"}\")) + \',\"pageIndex\":\' + pageIndex + \',\"pageSize\":\' + pageSize + \"}\";
                if (cfg.action.callback && $.isFunction(cfg.action.callback)) {
                    $.ajax({
                        type: \"post\",
                        url: cfg.action.url,
                        dataType: \"json\",
                        contentType: \"text/json\",
                        data: d,
                        success: function (data) {
                            initPager(data.d);
                            cfg.action.callback(data.d);
                        }
                    });
                }
                else {
                    $.ajax({
                        type: \"post\",
                        url: cfg.action.url,
                        dataType: \"json\",
                        contentType: \"text/json\",
                        data: d,
                        success: function (data) {
                            initPager(data.d);
                        }
                    });
                }
            }
        }
    }
}
});

css：

复制代码 代码如下:

#_pos {
    width: 40px;
}
.unable
{
    color: #BCC0BB;
}
.number
{
    margin: 2px;
    color:#0000FF;
    text-decoration:underline;
}
.selected
{
    margin: 2px;
    color: #FF0000;
    font-weight: bold;
}

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>
    <link href=\"CSS/JPager.css\" rel=\"stylesheet\" type=\"text/css\" />
    <script src=\"JS/jquery.min.js\" type=\"text/javascript\"></script>
    <script src=\"JExtension/JPager.js\" type=\"text/javascript\"></script>
    <script type=\"text/javascript\">
        $(function () {         
            $(\"#pager\").JPager({ customer:{template:\"%cuRRent%\"},count: 10, action: { url: \"Service/JService.svc/GetPersons\", data: \'{\"name\":\"zhoulq\"}\'}, showNumber: true },1,5);
        });       
    </script>
</head>
<body>
<table>
</table>
<div id=\"pager\"></div>
</body>
</html>

　　
wcf：
复制代码 代码如下:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Activation;
using System.ServiceModel.Web;

namespace JPlugin
{
    [ServiceContract]
    [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
    public class JService
    {
        [OperationContract]
        [WebInvoke]
        public PageObject<Person> GetPersons(string name,int pageIndex,int paseSize)
        {
            return new PageObject<Person>(){RecordCount = 23,SearchResult = new List<Person>(){new Person(){Name=\"zhpulq\",Age = 28},new Person(){Name = \"zhouxy\",Age = 24}}};
        }
    }


    public class PageObject<T>
    {
        public int RecordCount { get; set; }
        public List<T> SearchResult { get; set; }
    }
}

本文地址：https://www.stayed.cn/item/4825

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案