JavaScript Funktionsvariablen zur Laufzeit neu definieren

[Speedy.]

Hallo zusammen,

stehe gerade auf dem Schlauch. Für eine Table Pagination habe ich mir ein jQuery-Skript eingebunden und angepasst. Die Funktion im Skript erhält bei Aufruf wahlweise einen Parameter rowsPerPage, der als Default auf 10 steht (also Zeilen pro Seite). Nun habe ich ein <select> hinzugefügt, welches von 10 bis 100 die möglichen Zeilen pro Seite erhöhen bzw. verringern soll. Per EventListener soll also rowsPerPage überschrieben werden, sobald der User im <select> eine andere Auswahl macht.

Doch jetzt habe ich das Problem, dass ich zwar rowsPerPage neu setze, aber das keinerlei Auswirkungen auf die Tabelle hat. Ich habe mal auf Verdacht die Funktion dann neu aufgerufen, leider hat es dann die Pagination verdoppelt. Wie kann ich also zur Laufzeit den Wert neu setzen, sodass er ihn live übernimmt?

Danke

jQuery Plugin (Zeile 100 - 102 reagiert auf onchange bei dem <select>):

Spoiler

$.prototype.extend({
	'tablePagination': function(userConfigurations) {
		var defaults = {
			rowsPerPage : 10,
			topNav : false
		};

		defaults = $.extend(defaults, userConfigurations);

		return this.each(function() {
			var table = $(this)[0],		
				location = (defaults.topNav) ? "prev" : "next",
				tableRows = $.makeArray($('tbody tr', table)),
				totalPages = countNumberOfPages(tableRows.length),
				currPageNumber = 1;		  

			function hideOtherPages(pageNum) {
				var intRegex = /^\d+$/;
				if (!intRegex.test(pageNum) || pageNum < 1 || 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 countNumberOfPages(numRows) {
				var preTotalPages = Math.round(numRows / defaults.rowsPerPage);
				var totalPages = (preTotalPages * defaults.rowsPerPage < numRows) ? preTotalPages + 1 : preTotalPages;
				return totalPages;
			}

			function resetCurrentPage(currPageNum) {
				var intRegex = /^\d+$/;
				if (!intRegex.test(currPageNum) || currPageNum < 1 || currPageNum > totalPages)
					return;
				currPageNumber = currPageNum;
				hideOtherPages(currPageNumber);
				$(table)[location]().find('#current').val(currPageNumber);
			}

			function createPaginationElements() {
				var paginationHTML = "";
				paginationHTML += "<div id='table-pagination'>";
				paginationHTML += "Anzahl Spalten:";
				paginationHTML += "<select id='rows-per-page'>";
				paginationHTML += "<option value='10'>10</option>";
				paginationHTML += "<option value='20'>20</option>";
				paginationHTML += "<option value='30'>30</option>";
				paginationHTML += "<option value='40'>40</option>";
				paginationHTML += "<option value='50'>50</option>";
				paginationHTML += "<option value='60'>60</option>";
				paginationHTML += "<option value='70'>70</option>";
				paginationHTML += "<option value='80'>80</option>";
				paginationHTML += "<option value='90'>90</option>";
				paginationHTML += "<option value='100'>100</option>";
				paginationHTML += "</select>";
				paginationHTML += "<a href='#' id='first'>Anfang</a>";
				paginationHTML += "<a href='#' id='prev'>Zurück</a>";
				paginationHTML += "Seite <input type='text' id='current' value='" + currPageNumber + "' size='1'>";
				paginationHTML += "of " + totalPages;
				paginationHTML += "<a href='#' id='next'>Weiter</a>";
				paginationHTML += "<a href='#' id='last'>Ende</a>";
				paginationHTML += "</div>";
				return paginationHTML;
			}

			if (defaults.topNav) {
				$(this).before(createPaginationElements());
			} else {
				$(this).after(createPaginationElements());
			}

			hideOtherPages(currPageNumber);

			$(table)[location]().find('#first').click(function (e) {
				resetCurrentPage(1);
		  	});

		  	$(table)[location]().find('#prev').click(function (e) {
				resetCurrentPage(parseInt(currPageNumber) - 1);
		  	});

		  	$(table)[location]().find('#next').click(function (e) {
				resetCurrentPage(parseInt(currPageNumber) + 1);
		  	});

		  	$(table)[location]().find('#last').click(function (e) {
				resetCurrentPage(totalPages);
		  	});

			$(table)[location]().find('#current').on('change', function (e) {
				resetCurrentPage(this.value);
			});

			$(table)[location]().find('#rows-per-page').on('change', function (e) {
				return rowsPerPage = this.options[this.selectedIndex].value;
			});
		});
	}
});

Funktionsaufruf:

$(document).ready(function() {
    $(".table").tablePagination();
});

 

[iks-deh]

Ich würde beim ändern der Auswahl die ganze Tabelle wegwerfen und mit dem neuen rowsPerPage neu erzeugen. Ich bin mir nicht sicher ob das Plugin überhaupt dafür vorgesehen ist, diesen Wert nachträglich noch zu ändern.

 

[Daaron]

Verwerfen und neu anfangen macht schon aus einem Grund Sinn: Du hast Anfangs auf 10 stehen und bist auf Seite 3. Jetzt schaltest du auf 50 um... Welche Seite hast du jetzt?

 

[Speedy.]

Ok, danke. Habe es aber doch anders gelöst bekommen. Letztlich springt er bei Änderung der Auswahl zurück auf Seite 1. Damit kann man leben, denke ich.

Mein Hauptproblem war im Grunde, dass rowsPerPage ein Attribut von dem defaults-Objekt ist und ich das schlicht übersehen habe. Darum musste ich defaults.rowsPerPage = 20 und nicht rowsPerPage = 20 schreiben, geht ganz gut. Dann mit Hilfe der Funktionen die Tabellen neu initialisieren und ab geht's.