jquery分页按钮不起作用

我有一个表单。当我点击提交按钮时，我创建了一个包含表单元素的对象。然后我将这些对象推送到一个数组中。在我用这个数组创建一个html表之后。你可以看到我有一个分页功能。我每5个项目和分页按钮创建一个页面。但是当我点击分页按钮时，它什么都不做。我怎么解决这个问题？jquery分页按钮不起作用

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>

来源

2017-02-21 Furkan

使用'.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>

来源

2017-02-21 08:05:14

它的作品谢谢你。还有一个问题。正如你可以看到分页按钮是有序降序。我怎样才能使它上升。像1,2,3 ..不是3,2,1 ... – Furkan

我已经更新了你需要的回答，以反转for循环从pageNumFin开始，并在1 –

处结束，你可以使用css也使用这种风格的'display ：直列弯曲; flex-direction：column-reverse;' –

可以链不同的来电，以确保您的新事件是好的对象：

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

我只是想与你的例子，它的工作原理。

来源

2017-02-21 08:13:31 Reivaak

jquery分页按钮不起作用

回答

相关问题