Question

我有一张表格。当我单击“提交”按钮时，我创建了一个包含表单元素的对象。然后我将这些对象推送到一个数组。在我用这个数组创建一个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>

Answer 1

在收听点击事件时使用'.paging'代替'#pageId-' + t。

＆＃13;

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);

}

＆＃13;

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

＆＃13;

Answer 2

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

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

我只是尝试了你的例子并且它有效。

Jquery分页按钮不起作用

2 个答案: