Fatal编程技术网
  • javascript/
  • Javascript Jquery分页按钮不工作

Javascript Jquery分页按钮不工作

javascript jquery arrays pagination

Javascript Jquery分页按钮不工作,javascript,jquery,arrays,pagination,Javascript,Jquery,Arrays,Pagination,我有一张表格。当我单击Submit按钮时，我创建了一个包含表单元素的对象。然后我把这些对象推到一个数组中。使用此数组创建html表之后。正如您所看到的，我有一个分页函数。我每5个项目和分页按钮创建一个页面。但当我点击分页按钮时，它什么也不做。我怎样才能解决这个问题 main.js： var obj = { }; var data, i; var personArray = []; var pageNum = 1; var objPerPage = 5; $("#submitButton").c

我有一张表格。当我单击Submit按钮时，我创建了一个包含表单元素的对象。然后我把这些对象推到一个数组中。使用此数组创建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);

}

var obj={}；
var数据，i；
var personArray=[]；
var pageNum=1；
var objPerPage=5；
$（“#提交按钮”）。单击（函数（）{
addObject（）；
可显示（pageNum）；
分页（pageNum）；
重置表格（“”）；
});
函数addObject（）{
var obj={}；
数据=$（'#personForm'）。序列化数组（）；
对于（i=0；i-1）{
个人阵列拼接（delInd，1）；
}
可显示（pageNum）；
分页（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>


个人记录
姓名：
姓：
TC:
生日：
蒂姆·基勒
名称
姓
总费用
生日
在收听click事件时，使用
'.paging'
而不是
'#pageId-'+t

var obj={}；
var数据，i；
var personArray=[]；
var pageNum=1；
var objPerPage=5；
$（“#提交按钮”）。单击（函数（）{
addObject（）；
可显示（pageNum）；
分页（pageNum）；
重置表格（“”）；
});
函数addObject（）{
var obj={}；
数据=$（'#personForm'）。序列化数组（）；
对于（i=0；i1）{
$（“.paging”）.remove（）；
对于（t=pageNumFin；t>0；t--）{
$（''+t+''）。在（'#表'）之后插入；
}
$（'.paging'）。单击（函数（）{
var id=$（this.attr（'id'）；
var ind=id.split（'-'）；
var pageNum=ind[1]；
警报（pageNum）；
可显示（pageNum）；
});
}
}
功能显示表（第页）{
var指数=personArray.length；
var start=（第1页）*objPerPage；
var finish=开始+对象页；
如果（完成>索引）{
完成=索引；
}否则{
完成=开始+对象页；
}
$（'.personRow'）.remove（）；
对于（k=开始；k-1）{
个人阵列拼接（delInd，1）；
}
可显示（pageNum）；
分页（pageNum）；
}

个人记录
姓名：
姓：
TC:
生日：
蒂姆·基勒
名称
姓
总费用
生日
您可以链接不同的调用，以确保新事件位于良好对象上：

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

$（''+t+''）
.insertAfter（“#表”）
。单击（函数（）{
var id=$（this.attr（'id'）；
var ind=id.split（'-'）；
var pageNum=ind[1]；
警报（pageNum）；
可显示（pageNum）；
});;
我刚刚试过你的例子，效果很好。

谢谢。还有一个问题。正如你所看到的，分页按钮是按降序排列的。我如何使它升序。像1,2,3..而不是3,2,1…我知道了