javascript - 将 JQuery 脚本应用于特定的 GridView

Question

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

我使用的脚本如下。作者:Ryan Zielke。

$.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; 
      }

我已经尝试了一些方法来将此脚本应用于特定的 GridView :

将客户端脚本更改为:

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

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

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

在这里，我尝试指定一个类，然后将该 CSS 类添加到 gridview，以便将脚本仅应用于那个 gridview，但它不起作用。

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

Answer 1

你应该使用gridview的ID

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

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