将 JQuery 脚本应用于特定的网格视图

Apply a JQuery Script to specific grid views

本文关键字:网格 视图 JQuery 脚本 应用于      更新时间:2023-09-26

我正在努力将 JQuery 脚本应用于页面上的某些网格视图,问题是当前脚本应用于页面上的每个网格视图,我需要以某种方式指定它应用的网格。

我使用的脚本如下。作者:瑞安·齐尔克。

$.fn.tablePagination = function (settings) {
    var defaults = {
        firstArrow: (new Image()).src = "./images/first.gif",
        prevArrow: (new Image()).src = "./images/prev.gif",
        lastArrow: (new Image()).src = "./images/last.gif",
        nextArrow: (new Image()).src = "./images/next.gif",
        rowsPerPage: 5,
        currPage: 1,
        optionsForRows: [5, 10],
        ignoreRows: []
    };
    settings = $.extend(defaults, settings);
    return this.each(function () {
        var table = $(this)[0];
        var totalPagesId = '#' + table.id + '+#tablePagination #tablePagination_totalPages';
        var currPageId = '#' + table.id + '+#tablePagination #tablePagination_currPage';
        var rowsPerPageId = '#' + table.id + '+#tablePagination #tablePagination_rowsPerPage';
        var firstPageId = '#' + table.id + '+#tablePagination #tablePagination_firstPage';
        var prevPageId = '#' + table.id + '+#tablePagination #tablePagination_prevPage';
        var nextPageId = '#' + table.id + '+#tablePagination #tablePagination_nextPage';
        var lastPageId = '#' + table.id + '+#tablePagination #tablePagination_lastPage';
        var possibleTableRows = $.makeArray($('tbody tr', table));
        var tableRows = $.grep(possibleTableRows, function (value, index) {
            return ($.inArray(value, defaults.ignoreRows) == -1);
        }, false)
        var numRows = tableRows.length
        var totalPages = resetTotalPages();
        var currPageNumber = (defaults.currPage > totalPages) ? 1 : defaults.currPage;
        if ($.inArray(defaults.rowsPerPage, defaults.optionsForRows) == -1)
            defaults.optionsForRows.push(defaults.rowsPerPage);

        function hideOtherPages(pageNum) {
            if (pageNum == 0 || pageNum > totalPages)
                return;
            var startIndex = (pageNum - 1) * defaults.rowsPerPage;
            var endIndex = (startIndex + defaults.rowsPerPage - 1);
            $(tableRows).show();
            for (var i = 0; i < tableRows.length; i++) {
                if (i < startIndex || i > endIndex) {
                    $(tableRows[i]).hide()
                }
            }
        }
        function resetTotalPages() {
            var preTotalPages = Math.round(numRows / defaults.rowsPerPage);
            var totalPages = (preTotalPages * defaults.rowsPerPage < numRows) ? preTotalPages + 1 : preTotalPages;
            if ($(totalPagesId).length > 0)
                $(totalPagesId).html(totalPages);
            return totalPages;
        }
        function resetCurrentPage(currPageNum) {
            if (currPageNum < 1 || currPageNum > totalPages)
                return;
            currPageNumber = currPageNum;
            hideOtherPages(currPageNumber);
            $(currPageId).val(currPageNumber)
        }
        function resetPerPageValues() {
            var isRowsPerPageMatched = false;
            var optsPerPage = defaults.optionsForRows;
            optsPerPage.sort();
            var perPageDropdown = $(rowsPerPageId)[0];
            perPageDropdown.length = 0;
            for (var i = 0; i < optsPerPage.length; i++) {
                if (optsPerPage[i] == defaults.rowsPerPage) {
                    perPageDropdown.options[i] = new Option(optsPerPage[i], optsPerPage[i], true, true);
                    isRowsPerPageMatched = true;
                }
                else {
                    perPageDropdown.options[i] = new Option(optsPerPage[i], optsPerPage[i]);
                }
            }
            if (!isRowsPerPageMatched) {
                defaults.optionsForRows == optsPerPage[0];
            }
        }
        function createPaginationElements() {
            var htmlBuffer = [];
            htmlBuffer.push("<div id='tablePagination'>");
            htmlBuffer.push("<span id='tablePagination_perPage'>");
            htmlBuffer.push("<select id='tablePagination_rowsPerPage'><option value='5'>5</option></select>");
            htmlBuffer.push("per page");
            htmlBuffer.push("</span>");
            htmlBuffer.push("<span id='tablePagination_paginater'>");
            htmlBuffer.push("<img id='tablePagination_firstPage' src='" + defaults.firstArrow + "'>");
            htmlBuffer.push("<img id='tablePagination_prevPage' src='" + defaults.prevArrow + "'>");
            htmlBuffer.push("Page");
            htmlBuffer.push("<input id='tablePagination_currPage' type='input' value='" + currPageNumber + "' size='1'>");
            htmlBuffer.push("of <span id='tablePagination_totalPages'>" + totalPages + "</span>");
            htmlBuffer.push("<img id='tablePagination_nextPage' src='" + defaults.nextArrow + "'>");
            htmlBuffer.push("<img id='tablePagination_lastPage' src='" + defaults.lastArrow + "'>");
            htmlBuffer.push("</span>");
            htmlBuffer.push("</div>");
            return htmlBuffer.join("").toString();
        }
        if ($(totalPagesId).length == 0) {
            $(this).after(createPaginationElements());
        }
        else {
            $('#tablePagination_currPage').val(currPageNumber);
        }
        resetPerPageValues();
        hideOtherPages(currPageNumber);
        $(firstPageId).bind('click', function (e) {
            resetCurrentPage(1)
        });
        $(prevPageId).bind('click', function (e) {
            resetCurrentPage(currPageNumber - 1)
        });
        $(nextPageId).bind('click', function (e) {
            resetCurrentPage(currPageNumber + 1)
        });
        $(lastPageId).bind('click', function (e) {
            resetCurrentPage(totalPages)
        });
        $(currPageId).bind('change', function (e) {
            resetCurrentPage(this.value)
        });
        $(rowsPerPageId).bind('change', function (e) {
            defaults.rowsPerPage = parseInt(this.value, 10);
            totalPages = resetTotalPages();
            resetCurrentPage(1)
        });
    })
};

})(jQuery);

该脚本在客户端启用,具有以下功能:

       $('table').tablePagination({});

它还具有一些CSS,如下所示:

      #testTable { 
        width : 300px;
        margin-left: auto; 
        margin-right: auto; 
      }
       #tablePagination { 
        background-color:  Transparent; 
        font-size: 0.8em; 
        padding: 0px 5px; 
        height: 20px
      }
      #tablePagination_paginater { 
        margin-left: auto; 
        margin-right: auto;
      }
      #tablePagination img { 
        padding: 0px 2px; 
      }
      #tablePagination_perPage { 
        float: left; 
      }
      #tablePagination_paginater { 
        float: right; 
      }

我已经尝试了一些方法将此脚本应用于某个网格视图:

将客户端脚本更改为:

    $('#GridviewName').tablePagination({});

此外,我还尝试对脚本文件本身进行一些更改,以尝试使其按如下方式工作

        var possibleTableRows = $.makeArray($('.pagingclass tbody tr', table));

在这里,我尝试指定一个类,然后将该CSS类添加到网格视图中,以便将脚本仅应用于该网格视图,但是它不起作用。

我不完全确定我该如何做到这一点,或者是否有可能。任何帮助将不胜感激。

您应该使用网格视图的 ID

$('#<%=GridViewID.ClientID%>').tablePagination({});

使用$('table').tablePagination({});时,您将定位页面上的所有表。 如果查看从 gridview 控件呈现的 HTML,您会发现它类似于您在控件中指定的 ID,但并不相同。 这就是为什么您需要使用客户端 ID 指定而不是类似 $('#GridViewID').tablePagination({});