Jquery 分页按钮不起作用答案

【问题标题】：Jquery pagination buttons are not workingJquery 分页按钮不起作用
【发布时间】：2017-02-21 16:15:38
【问题描述】：

我有一个表格。当我单击提交按钮时，我创建了一个带有表单元素的对象。然后我将这些对象推送到一个数组中。在我用这个数组创建一个 html 表之后。如您所见，我有一个分页功能。我每 5 个项目和分页按钮创建一个页面。但是当我单击分页按钮时，它什么也不做。我该如何解决这个问题？

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>

【问题讨论】：

标签： javascript jquery arrays pagination

【解决方案1】：

您可以链接不同的调用以确保您的新事件在正确的对象上：

$('<button type="button" id="pageId-' + t + '" class="paging">' + t + '</button>')
   .insertAfter('#table')
   .click(function () {
        var id = $(this).attr('id');
        var ind = id.split('-');
        var pageNum = ind[1];
        alert(pageNum);
        showTable(pageNum);
    });;

我刚刚尝试了您的示例，它有效。

【讨论】：

【解决方案2】：

在监听点击事件时使用'.paging' 而不是'#pageId-' + t。

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 (pageNumFin > 1) {
        $(".paging").remove();
        for (t=pageNumFin; t>0; t--){
            $('<button type="button" id="pageId-' + t + '" class="paging">' + t + '</button>').insertAfter('#table');
        }
   

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

}

<!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>

    </body>
</html>

【讨论】：

它有效，谢谢。还有一个问题。如您所见，分页按钮按降序排列。我怎样才能让它上升。像 1,2,3.. 不是 3,2,1...
我已经更新了你需要反转for循环以从pageNumFin开始并在1结束的答案
你也可以使用 css 恢复这种风格display:inline-flex; flex-direction:column-reverse;
最后一个问题。我该怎么做这个数组呢