嘗試更改JQuery插件文件中的參數

Question

我有一個JQuery插件正在用作項目的一部分。 該文件位於我的解決方案文件夾的根目錄下的一個名為“ jquery.tablePagination.js”的文件下，我想在不對數據進行硬編碼的情況下更改文件中的某些參數。

腳本如下。

(function ($) {

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

我希望能夠更改以下設置：RowsPerPage和OptionforRows。

我試圖將腳本中的代碼直接復制並粘貼到我已經擁有的其他Jquery / JavaScript旁邊的.aspx文件中，但是當我執行此操作時插件不會運行。

可以從后面的代碼寫入文件的設置部分嗎？ 如果文件可以從某個隱藏字段中讀取設置，但我也無法在.aspx上運行它來執行此操作，那么它也將起作用。 我不確定如何解決此問題。

Answer 1

通過首先復制腳本並將其粘貼到我的.aspx文件中，我最終解決了此問題。 我最初是在文檔准備功能內部復制代碼：

   $(document).ready(function) 

一旦完成此操作，就很容易從后面的代碼中傳遞一個變量用作所需的設置。

rowsPerPage: <%=PageRowAmount%>,

對於后面的代碼，我添加了以下內容：

Public PageRowAmount As Integer = 10

並在page_load中添加了

Page.DataBind()

解決了！