记录一个自己常用的JS 分页 + 渲染脚本

最新推荐文章于 2025-05-19 02:24:27 发布

原创最新推荐文章于 2025-05-19 02:24:27 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#class #function #脚本 #div

Jacascript 同时被 3 个专栏收录

15 篇文章

订阅专栏

ASP.NET.AJAX

12 篇文章

订阅专栏

Jquery

11 篇文章

订阅专栏

本文介绍了一个用于生成分页插件的JavaScript方法，该方法可根据数据总量、每页显示数量及当前页码等参数动态生成分页链接，并提供页面选择控件。此插件适用于Web应用程序中列表数据的分页展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

    /*API对象*/
    var API = AMPlatForm.Union.Offline.GiftCardPlatform.Card;

    /*生成分页插件 辅助方法*/
    API._BuiderPageExt = function (_callName) {
      _callName($('#pagebottomctrl option:selected').val());
    };

    /*生成分页插件*/
    API.BuiderPage = function (_dataCount, _showLength, _pageindex, _callName, _PgaeIDs, _PagerCtrls) {
        var PagerIDs = (_PgaeIDs == undefined ? "#Pagenation,.pagination-mini" : _PgaeIDs);
        var PagerCtrls = (_PagerCtrls == undefined ? "#PagenationCtrl,.PagenationCtrl" : _PagerCtrls);
        var _pageCount = _dataCount % _showLength == 0 ? _dataCount / _showLength : parseInt(_dataCount / _showLength) + 1;
        if (_pageCount < 1) { $(PagerIDs).empty(); return; }
        var showLinkCount = 1;
        var PageStr = new Array(), PageCtrlStr = new Array();
        PageStr.push("<ul>");
        if (_pageindex == 1) { PageStr.push('<li class="disabled"><a href="javascript:void(0)">首页</a></li>'); }
        else { PageStr.push("<li><a href=\"javascript:void(0)\" onclick=\"" + _callName + "(1);\">首页</a></li>"); }
        if (_pageindex - 1 < 1) { PageStr.push('<li class="disabled"><a href="javascript:void(0)">< 上一页</a></li>'); }
        else { PageStr.push("<li><a href=\"javascript:void(0)\" onclick=\"" + _callName + "(" + (_pageindex - 1) + ");\">< 上一页</a></li>"); }
        for (var i = 1; i <= _pageCount; i++) {
            if (i == _pageindex) {
                PageStr.push('<li class="active"><a href="javascript:void(0)">' + i + '</a></li>');
            }
            else if (
            (i > _pageindex && i <= _pageindex + showLinkCount) ||
            (i < _pageindex && i >= _pageindex - showLinkCount)) {
                PageStr.push("<li><a href=\"javascript:void(0)\" onclick=\"" + _callName + "(" + i + ");\">" + i + "</a></li>");
            }
            if (i == _pageindex) {
                PageCtrlStr.push("<option value='" + i + "' selected='selected'>" + i + "</option>");
            }
            else {
                PageCtrlStr.push("<option value='" + i + "'>" + i + "</option>");
            }
        }
        if (_pageindex + 1 > _pageCount) { PageStr.push('<li class="disabled"><a href="#">下一页 ></a></li>'); }
        else { PageStr.push("<li><a href=\"javascript:void(0)\" onclick=\"" + _callName + "(" + (_pageindex + 1) + ");\">下一页 ></a></li>"); }
        if (_pageindex == _pageCount) { PageStr.push('<li class="disabled"><a href="#">尾页</a></li>'); }
        else { PageStr.push("<li><a href=\"javascript:void(0)\" onclick=\"" + _callName + "(" + _pageCount + ");\">尾页</a></li>"); }
        PageStr.push("</ul>");
        $(PagerIDs).html(PageStr.join(""));
        var ctrl = '<select id="pagebottomctrl" onchange="API._BuiderPageExt(' + _callName + ')">' + PageCtrlStr.join("") + '</select>';
        if (PagerCtrls != "") {
            $(PagerCtrls).html("共" + _dataCount + "条数据，当前第" + ctrl + "/" + _pageCount + "页。");
        }
    }