PHP 与 jquery 数据表与 CRUD 只能编辑可见记录

Question

我正在使用 jquery 数据表，但出现了一些问题。

我总共有 11 条记录。数据表显示数据库中的 10 条记录条目，我添加了用于编辑和删除的列

但是当我点击分页按钮时，数据表显示1条记录(记录号11)，但是编辑和删除按钮不起作用

你能帮我吗？

这是我的代码

<?php
        while($row_dosen = mysql_fetch_assoc($q_dosen)){
    ?>

    <tr>
    <td><?php echo $row_dosen['nik'];?></td>
      <td><?php echo $row_dosen['nama']; ?></td>                                                
      <td align="center"><span class="label label-success2" style="font-size:14px;">
    <?php echo $row_dosen['jurusan_nama']; ?><span><td> 

        <td align="center">                                             
            <?php echo $row_dosen['status_name']; ?>
        </td>
        <td align="center">                                             
            <?php echo $row_dosen['email']; ?>
        </td>
        <td align="center">                                             
            <?php echo $row_dosen['no_hp']; ?>
        </td>
        <td align="left">                                                   
    <?php
    //$pizza  = mysql_query("SELECT dosen.skill_id, dosen.skill_name, skill.skill_id, skill.skill_name FROM dosen, skill WHERE dosen.skill_id = skill.skill_id ",$conn);
    $pieces = explode(",", $row_dosen['skill_id']);
    $j = 1;
    for($i = 0; $i < count($pieces) ; $i++){
    //echo ''.$pieces[$i].'<br/>';
    $pizza  = mysql_query("SELECT skill_id, skill_name FROM skill WHERE skill_id = '".$pieces[$i]."'",$conn);

    while($p = mysql_fetch_assoc($pizza)){
        echo '<b>'.$j.'</b>. '.$p['skill_name'].'<br/>';    

    }
    $j++;
    }
    ?>  
    </td>
    <td align="center">
    <input type="hidden" id="<?php echo $row_dosen['nik']; ?>" name="id_dosen" value="<?php echo $row_dosen['nik']; ?>"/>
    <button id="<?php echo $row_dosen['nik']; ?>" class="btn btn-warning edtlec" type="button" data-toggle="modal" data-target="#editDosen"><i class="fa fa-gear"></i> <small>Edit</small></button>
        </td>
   <td align="center">
    <button class="btn btn-danger delbutton" type="button" id = "<?php echo $row_dosen['nik']; ?>"><i class="fa fa-times"></i> <small>Delete</small></button>
   </td>
        </tr>
   <?php
     }
    ?>

我的 JavaScript

$(document).ready(function(){        
         $("#lec_reg").click(function(){
             var nik   = $("#nik").val();
             var name   = $("#name").val();
             var jurusan     = $("#jurusan").val();
             var status   = $("#status").val();
             var email   = $("#email").val();
             var phone   = $("#phone").val()
             var skill   = $("#skill").val();            
             $.ajax({
                 type: "POST",
                 url:"inc_/regist_dosen.php",
                 data:"nik=" + nik + 
                 "&name=" + name + 
                 "&jurusan=" + jurusan + 
                 "&status=" + status + 
                 "&email=" + email + 
                 "&phone=" + phone + 
                 "&skill=" + skill,
                 success: function(data){
                 $("#loading").html('<center>Validating data... <img src="../../img/ajax-loader.gif"/></center>').show();                
                 setTimeout(function() {                        
                    $("#loading").fadeIn();
                        setTimeout(function() {
                            $("#loading").slideUp('slow');
                        },2000);                                    
                    $("#loading").html(data);
                 },1000);

                 }
             });
         }); 



$(function() {


$(".delbutton").click(function(){

//Save the link in a variable called element
var element = $(this);

//Find the id of the link that was clicked
var del_id = element.attr("id");

//Built a url to send
var info = 'id=' + del_id;
 if(confirm("Are you sure you want to delete this Lecturer ? NIK : "+del_id)){

 $.ajax({
   type: "POST",
   url: "inc_/delete_dosen",
   data: info,
   success: function(data){
                 $(".loading2").html('<center>Loading data... <img src="../../img/ajax-loader.gif"/></center>').show();              
                 setTimeout(function() {                        
                    $(".loading2").fadeIn();
                        setTimeout(function() {
                            $(".loading2").slideUp('slow');
                        },4000);                                    
                    $(".loading2").html(data);
                 },1000);

                 }
 });

 }

return false;

});

});


$(function() {


$(".edtlec").click(function(){

//Save the link in a variable called element
var element = $(this);

//Find the id of the link that was clicked
var edit_id = element.attr("id");

//Built a url to send
var info = 'id_nik=' + edit_id;

 $.ajax({
   type: "POST",
   url: "inc_/edit_dosen",
   data: info,
   success: function(data){
                 $('#editDosen').modal('show'); 
                 $("#response").html('<center>Loading data... <img src="../../img/ajax-loader.gif"/></center>').show();              
                 setTimeout(function() {                                            
                    $("#response").html(data);
                 },1000);

                 }
 });


return false;

});

});

Answer 1

最后我的脚本现在可以在第 2 页上运行了++

答案是

更改为

$( document ).on( "click", ".delbutton", function() {

由于 DataTables 从 DOM 中删除节点，因此可能不会应用事件

信用 http://datatables.net/faqs#events

感谢大家，特别是来自数据表论坛的 Allan Jardin :)