asp.net mvc ajax分页 CPager(秒杀杨涛ajax分页) 封装之前

音乐数据分页展示
本文介绍了一种使用JavaScript实现的音乐数据分页展示方法,包括数据加载、表格生成及翻页控制等功能。通过Ajax获取数据,并动态生成表格内容与翻页组件。
document.addEventListener("DOMContentLoaded", function () { new CPager().start(); }, false);
(function () {
    var MP3 = function () {
        this.Id = null;
        this.Singer_Name = null;
        this.Singer_Sex = null;
        this.Singer_Type = null;
        this.Song_Name = null;
        this.Song_Id = null;
        this.Lyrics = null;
        this.Time = null;
    };//Model
    window._this = null;
    window.CPager = function () {
        this.Table_HeaderName = ["编号", "歌手", "性别", "分类", "音乐名称", "片段标识", "片段歌词", "时间(s)"];
        this.list = [];
        this.as = [];
        this.asflag = [];
        this.index = [];
        this.msg = "";
        this.datacount = 0;
        this.pagecount = 0;
        //参数
        this.TableName = "MP3";
        this.PageIndex = 1;
        this.PageSize = 20;
        this.Table_ClassName = "tb1 position2";
        this.ParentDiv_ClassName = "parent_div position2";
        this.ControllerName = "Home";
        this.ActionName = "Ajax_Cline";
        this.FPNL_ClassName = "fpnl";
        this.General_ClassName = "co";
        this.Disabled_ClassName = "disabled";
        this.Active_ClassName = "active";
        this._url = "/Home/Ajax_DataCount";
        this.url = "/Home/Ajax_Cline";

        //构造字符串
        this.TableString = "";
        this.PageControlString = "";
    };
    CPager.prototype = {
        start: function () {
            this.create_msg();
            _this = this;
            AJAX(this._url, "post", "TableName=" + this.TableName, this.get_DataCount, false);
            AJAX(this.url, "post", this.msg, this.ajaxcallback, false);
        },
        create_msg: function () {
            this.msg = "TableName=" + this.TableName + "&PageIndex=" + this.PageIndex + "&PageSize=" + this.PageSize;
        },
        get_DataCount: function (data) {
            _this.datacount = data;
            _this.pagecount = _this.datacount % _this.PageSize == 0 ? _this.datacount / _this.PageSize : _this.datacount / _this.PageSize + 1;
        },
        ajaxcallback: function (data) {
            var s = data;
            _this.list = CLine2List(MP3, s);
            _this.create_TableString();
            _this.create_PageControlString();
            document.body.innerHTML = _this.TableString + _this.PageControlString;
            _this.as = FPGC($$("div")[0]);
            _this.get_asflag();
            _this.bing_event();
        },
        create_TableString: function () {
            this.TableString += "<table class=\"" + this.Table_ClassName + "\">";
            this.TableString += "<tr>";
            for (var i = 0; i < this.Table_HeaderName.length; i++) {
                this.TableString += "<td>" + this.Table_HeaderName[i] + "</td>";
            }
            this.TableString += "</tr>";
            for (var i = 0; i < this.list.length; i++) {
                this.TableString += "<tr>";
                this.TableString += "<td>" + this.list[i].Id + "</td>";
                this.TableString += "<td>" + this.list[i].Singer_Name + "</td>";
                this.TableString += "<td>" + this.list[i].Singer_Sex + "</td>";
                this.TableString += "<td>" + this.list[i].Singer_Type + "</td>";
                this.TableString += "<td>" + this.list[i].Song_Name + "</td>";
                this.TableString += "<td>" + this.list[i].Song_Id + "</td>";
                this.TableString += "<td><a href=\"#\">查看</a></td>";
                this.TableString += "<td>" + this.list[i].Time + "</td>";
                this.TableString += "</tr>";
            }
            this.TableString += "</table>";
            this.list = [];
        },
        create_PageControlString: function () {
            this.PageControlString += "<div class=\"" + this.ParentDiv_ClassName + "\">";
            if (this.pagecount <= 10) {
                if (this.PageIndex == 1) {
                    this.PageControlString += "<a class=\"" + this.FPNL_ClassName + " " + this.Disabled_ClassName + "\">首页</a>";
                    this.PageControlString += "<a class=\"" + this.FPNL_ClassName + " " + this.Disabled_ClassName + "\">上页</a>";
                }
                else {
                    this.PageControlString += "<a href=\"javascript:;\" class=\"" + this.FPNL_ClassName + "\">首页</a>";
                    this.PageControlString += "<a href=\"javascript:;\" class=\"" + this.FPNL_ClassName + "\">上页</a>";
                }
                for (var i = 1; i <= this.pagecount; i++) {
                    if (i == this.PageIndex) {
                        this.PageControlString += "<a href=\"javascript:;\" class=\"" + this.General_ClassName + " " + this.Active_ClassName + "\">" + i + "</a>";
                        continue;
                    }
                    this.PageControlString += "<a href=\"javascript:;\" class=\"" + this.General_ClassName + "\">" + i + "</a>";
                }
                if (this.PageIndex == this.pagecount) {
                    this.PageControlString += "<a class=\"" + this.FPNL_ClassName + " " + this.Disabled_ClassName + "\">下页</a>";
                    this.PageControlString += "<a class=\"" + this.FPNL_ClassName + " " + this.Disabled_ClassName + "\">尾页</a>";
                }
                else {
                    this.PageControlString += "<a href=\"javascript:;\" class=\"" + this.FPNL_ClassName + "\">下页</a>";
                    this.PageControlString += "<a href=\"javascript:;\" class=\"" + this.FPNL_ClassName + "\">尾页</a>";
                }
            }
            else {
                if (this.PageIndex <= 6) {
                    if (this.PageIndex == 1) {
                        this.PageControlString += "<a class=\"" + this.FPNL_ClassName + " " + this.Disabled_ClassName + "\">首页</a>";
                        this.PageControlString += "<a class=\"" + this.FPNL_ClassName + " " + this.Disabled_ClassName + "\">上页</a>";
                    }
                    else {
                        this.PageControlString += "<a href=\"javascript:;\" class=\"" + this.FPNL_ClassName + "\">首页</a>";
                        this.PageControlString += "<a href=\"javascript:;\" class=\"" + this.FPNL_ClassName + "\">上页</a>";
                    }
                    for (var i = 1; i <= 10; i++) {
                        if (i == this.PageIndex)
                            this.PageControlString += "<a href=\"javascript:;\" class=\"" + this.General_ClassName + " " + this.Active_ClassName + "\">" + i + "</a>";
                        else
                            this.PageControlString += "<a href=\"javascript:;\" class=\"" + this.General_ClassName + "\">" + i + "</a>";
                    }
                    this.PageControlString += "<a href=\"javascript:;\" class=\"" + this.General_ClassName + "\">...</a>";
                    this.PageControlString += "<a href=\"javascript:;\" class=\"" + this.FPNL_ClassName + "\">下页</a>";
                    this.PageControlString += "<a href=\"javascript:;\" class=\"" + this.FPNL_ClassName + "\">尾页</a>";
                }
                else {
                    if (this.PageIndex < this.pagecount - 4) {
                        this.PageControlString += "<a href=\"javascript:;\" class=\"" + this.FPNL_ClassName + "\">首页</a>";
                        this.PageControlString += "<a href=\"javascript:;\" class=\"" + this.FPNL_ClassName + "\">上页</a>";
                        this.PageControlString += "<a href=\"javascript:;\" class=\"" + this.General_ClassName + "\">...</a>";
                        for (var i = this.PageIndex - 5; i <= this.PageIndex + 4; i++) {
                            if (i == this.PageIndex) {
                                this.PageControlString += "<a href=\"javascript:;\" class=\"" + this.General_ClassName + " " + this.Active_ClassName + "\">" + i + "</a>";
                                continue;
                            }
                            this.PageControlString += "<a href=\"javascript:;\" class=\"" + this.General_ClassName + "\">" + i + "</a>";
                        }
                        this.PageControlString += "<a href=\"javascript:;\" class=\"" + this.General_ClassName + "\">...</a>";
                        this.PageControlString += "<a href=\"javascript:;\" class=\"" + this.FPNL_ClassName + "\">下页</a>";
                        this.PageControlString += "<a href=\"javascript:;\" class=\"" + this.FPNL_ClassName + "\">尾页</a>";
                    }
                    else {
                        this.PageControlString += "<a href=\"javascript:;\" class=\"" + this.FPNL_ClassName + "\">首页</a>";
                        this.PageControlString += "<a href=\"javascript:;\" class=\"" + this.FPNL_ClassName + "\">上页</a>";
                        this.PageControlString += "<a href=\"javascript:;\" class=\"" + this.General_ClassName + "\">...</a>";
                        for (var i = this.pagecount - 9; i <= this.pagecount; i++) {
                            if (i == this.PageIndex) {
                                this.PageControlString += "<a href=\"javascript:;\" class=\"" + this.General_ClassName + " " + this.Active_ClassName + "\">" + i + "</a>";
                                continue;
                            }
                            this.PageControlString += "<a href=\"javascript:;\" class=\"" + this.General_ClassName + "\">" + i + "</a>";
                        }
                        if (this.PageIndex == this.pagecount) {
                            this.PageControlString += "<a class=\"" + this.FPNL_ClassName + " " + this.Disabled_ClassName + "\">下页</a>";
                            this.PageControlString += "<a class=\"" + this.FPNL_ClassName + " " + this.Disabled_ClassName + "\">尾页</a>";
                        }
                        else {
                            this.PageControlString += "<a href=\javascript:;\" class=\"" + this.FPNL_ClassName + "\">下页</a>";
                            this.PageControlString += "<a href=\"javascript:;\" class=\"" + this.FPNL_ClassName + "\">尾页</a>";
                        }
                    }
                }
            }
            this.PageControlString += "</div>";
        },
        get_asflag: function () {
            this.asflag = [];
            if (this.pagecount <= 10) {
                if (this.PageIndex == 1) {
                    this.asflag = [0, 0, 0];
                    for (var i = 2; i <= this.pagecount;i++){
                            this.asflag.push(i);
                    }
                    this.asflag.push(2, this.pagecount);
                }
                else if (this.PageIndex == this.pagecount) {
                    this.asflag = [1, this.PageIndex - 1];
                    for (var i = 1; i < this.pagecount; i++) {
                            this.asflag.push(i);
                    }
                    this.asflag.push(0,0,0);
                }
                else {
                    this.asflag = [1, this.PageIndex - 1, 1];
                    for (var i = 2; i < this.pagecount; i++) {
                        if (i == this.PageIndex) {
                            this.asflag.push(0);
                        } else {
                            this.asflag.push(i);
                        }
                    }
                    this.asflag.push(this.pagecount, this.PageIndex + 1, this.pagecount);
                }
            }
            else {
                if (this.PageIndex <= 6) {
                    if (this.PageIndex == 1) {
                        this.asflag = [0, 0, 0, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 2, this.pagecount];
                    }
                    else {
                        this.asflag = [1, this.PageIndex - 1, 1];
                        for (var i = 2; i <= 6; i++) {
                            if (i == this.PageIndex) {
                                this.asflag.push(0);
                            } else {
                                this.asflag.push(i);
                            }
                        }
                        this.asflag.push(7, 8, 9, 10, 11, this.PageIndex + 1, this.pagecount);
                    }
                }
                else {
                    if (this.PageIndex < this.pagecount - 4) {
                        this.asflag = [
                            1,
                            this.PageIndex - 1,
                            this.PageIndex - 6,
                            this.PageIndex - 5,
                            this.PageIndex - 4,
                            this.PageIndex - 3,
                            this.PageIndex - 2,
                            this.PageIndex - 1,
                            0,
                            this.PageIndex + 1,
                            this.PageIndex + 2,
                            this.PageIndex + 3,
                            this.PageIndex + 4,
                            this.PageIndex + 5,
                            this.PageIndex + 1,
                            this.pagecount
                        ];
                    }
                    else {
                        this.asflag = [
                            1,
                            this.PageIndex - 1,
                            this.pagecount - 10,
                            this.pagecount - 9,
                            this.pagecount - 8,
                            this.pagecount - 7,
                            this.pagecount - 6,
                            this.pagecount - 5,
                        ];
                        for (var i = this.pagecount - 4; i <= this.pagecount; i++) {
                            if (i == this.PageIndex) {
                                this.asflag.push(0);
                            } else {
                                this.asflag.push(i);
                            }
                        }
                        if (this.PageIndex == this.pagecount) {
                            this.asflag.push(0, 0);
                        }
                        else {
                            this.asflag.push(this.PageIndex + 1, this.pagecount);
                        }
                    }
                }
            }
        },
        bing_event: function () {
                for (var i = 0; i <= this.as.length - 1; i++) {
                    if (this.asflag[i] != 0) {
                        this.as[i].onclick = function () {
                            _this.list = [];
                            for (var i = 0; i < _this.as.length; i++) {
                                if (this == _this.as[i])
                                    _this.PageIndex = _this.asflag[i];
                            }
                            _this.as = [];
                            _this.asflag = [];
                            _this.msg = "";
                            _this.TableString = "";
                            _this.PageControlString = "";
                            document.body.innerHTML = "";
                            _this.create_msg();
                            AJAX(_this.url, "post", _this.msg, _this.ajaxcallback, false);
                        };
                    }
                }
        },
    };
}());

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值