Ich habe ein Formular. Wenn ich auf den Submit-Button klicke, erstelle ich ein Objekt mit Formularelementen. Und dann schiebe ich diese Objekte auf ein Array. Nachdem ich eine HTML-Tabelle mit diesem Array erstellt habe. Ich habe eine Paginierungsfunktion, wie Sie sehen können. Ich erstelle eine Seite alle 5 Elemente und Seitentasten. Aber wenn ich auf die Paginierungsschaltflächen klicke, tut das nichts. Wie kann ich dieses Problem lösen?Jquery Paginierung Tasten funktionieren nicht
main.js:
var obj = { };
var data, i;
var personArray = [];
var pageNum = 1;
var objPerPage = 5;
$("#submitButton").click(function() {
addObject();
showTable(pageNum);
pagination(pageNum);
resetForm('');
});
function addObject() {
var obj = { };
data = $('#personForm').serializeArray();
for (i = 0; i < data.length; i++) {
obj[data[i].name] = data[i].value;
}
personArray.push(obj);
}
function pagination(p) {
var personArrayLen = personArray.length;
var pageNumFin = Math.ceil(personArrayLen/objPerPage);
//if ((personArrayLen % 5) === 1) {
$(".paging").remove();
for (t=p; t<=pageNumFin; t++){
$('<button type="button" id="pageId-' + t + '" class="paging">' + t + '</button>').insertAfter('#table');
}
//}
$('#pageId-' + t).click(function() {
var id = $(this).attr('id');
var ind = id.split('-');
var pageNum = ind[1];
alert(pageNum);
showTable(pageNum);
});
}
function showTable(page) {
var index = personArray.length;
var start = (page - 1) * objPerPage;
var finish = start + objPerPage;
if (finish > index) {
finish = index;
} else {
finish = start + objPerPage;
}
$('.personRow').remove();
for (k = start; k < finish; k++) {
$("table#personTable tbody").append('<tr class="personRow"><td>' + personArray[k].firstname + '</td><td>' + personArray[k].lastname + '</td><td>' + personArray[k].tc + '</td><td>' + personArray[k].birthday + '</td><td><button class="deleteButton" id="deleteRow-' + k + '">Delete</button></td></tr>');
}
$(".deleteButton").click(function() {
var id = $(this).attr('id');
var ind = id.split('-');
var deleteIndex = ind[1];
deleteFunction(deleteIndex);
});
}
function resetForm(value) {
$("#firstname").val(value);
$("#lastname").val(value);
$("#tc").val(value);
$("#birthday").val(value);
}
function deleteFunction(delInd) {
if (delInd > -1) {
personArray.splice(delInd, 1);
}
showTable(pageNum);
pagination(pageNum);
}
index.html:
<!DOCTYPE html>
<html>
<head>
<title>Person Record</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<form id="personForm">
<div>
<label for="firstname">Name:</label>
<input type="text" id="firstname" name="firstname" value="" placeholder="İsim"/>
</div>
<div>
<label for="lastname">Surname:</label>
<input type="text" id="lastname" name="lastname" value="" placeholder="Soyisim"/>
</div>
<div>
<label for="tc">TC:</label>
<input type="tel" id="tc" name="tc" value="" placeholder="TC"/>
</div>
<div>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday" />
</div>
<div>
<input type="button" value="Kaydet" id="submitButton" />
</div>
</form>
<div id="table">
<h3>Tüm Kişiler</h3>
<table id="personTable" border="1">
<thead>
<tr>
<th> Name </th>
<th> Surname </th>
<th> TC </th>
<th> Birthday </th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
es funktioniert, danke. Noch eine Frage. Wie Sie Paginierung sehen können, sind Schaltflächen absteigend angeordnet. Wie kann ich es aufsteigen lassen? Wie 1,2,3 .. nicht 3,2,1 ... – Furkan
Ich habe die Antwort aktualisiert, die Sie brauchen, um die for-Schleife umzukehren, um von pageNumFin zu starten und endet bei 1 –
können Sie mit CSS auch mit diesem Stil anzuzeigen 'display : Inline-Flex; Flex-Richtung: Spalte-Reverse; ' –