javascript - 通过 id 加载特定页面时数据表不起作用

Question

我的页面包含这张图片中的数据表

我有一个问题，一旦我激活或停用我的员工，数据表搜索和排序就会消失。我认为我的错误在加载部分。使用 div id 加载特定页面的正确方法是什么？

这是激活或停用我的员工在这里时的输出

因为我所做的是在我的 base_url+"adminpage/userpage"中，它是用户和员工的一页。我刚刚做的是，当我按下查看员工时，它将隐藏用户并显示同一链接中的员工页面。

我的代码在这里

$(document).ready(function(){
$("#user-page").show();
$("#viewstaff").on("click",function(){
$("#user-page").hide();
$('#staff-page').show();
});
$("#viewuser").on("click",function(){
$("#staff-page").hide();
$("#user-page").show();
});})

激活代码在这里

function activate_staff(id){

        swal({
  title: 'Are you sure?',
  text: "You want to activate this user?",
  type: 'info',
  showCancelButton: true,
  confirmButtonColor: '#3085d6',
  cancelButtonColor: '#d33',
  confirmButtonText: 'Yes, Deactivate it!'
}).then(function() {
    $.ajax({
        url : base_url+"adminpage/staff_deactivate/"+id,
        type: "POST",
        success: function(data){
           $('#dataTables-example1').DataTable();

            var result = JSON.parse(data);

            if(result===1){

              swal({
                title: 'Deactivate Success',
                // text: "will remove within 1 sec",
                type: 'success',
                timer: 1500,
                showConfirmButton: false
              }).done()
                window.setTimeout(function(){ 
                 $("#wrapper-staff").load(base_url+"adminpage/useraccount #wrapper-staff > *");

                 } ,1500)
            }
        },
        error: function (jqXHR, textStatus, errorThrown){
            swal("Oops...", "Something went wrong :(", "error");
        }
    });
})}

停用在这里

function deactivate_staff(id){
    swal({
  title: 'Are you sure?',
  text: "You want to deactivate this user?",
  type: 'info',
  showCancelButton: true,
  confirmButtonColor: '#3085d6',
  cancelButtonColor: '#d33',
  confirmButtonText: 'Yes, Activate it!'
}).then(function() {

    $.ajax({
        url : base_url+"adminpage/staff_activate/"+id,
        data: $(this).serialize(),
        type: "POST",


        success: function(data){

            var result = JSON.parse(data);

            if(result===1){

              swal({
                title: 'Activated Success',
                // text: "will remove within 1 sec",
                type: 'success',
                timer: 1500,
                showConfirmButton: false
              }).done()
                window.setTimeout(function(){


                  $("#wrapper-staff").load(base_url+"adminpage/useraccount #wrapper-staff > *");

                 } ,1500)


            }
        },
        error: function (jqXHR, textStatus, errorThrown){
            swal("Oops...", "Something went wrong :(", "error");
        }
    });
})    }

Answer 1

您必须像这样将 DataTable 更改为服务器端 example .之后，您可以像这样在每一行添加按钮:

table = $('#dataTables-example').DataTable({ 
    "serverSide": true, //Feature control DataTables' server-side processing mode. 

    // Load data for the table's content from an Ajax source 
    "ajax": { 
        "url": "<?php echo site_url('serversidedt/ajax_dt')?>", 
        "type": "POST" 
    }, 

    "columns": [ 
        {data: "fname"}, 
        {data: "lname"}, 
        {data: "email"}, 
        {data: "status"}, 
        {data: myButton, searchable: false, orderable: false} 
    ] 

}); 

function myButton(data, type, dataToSet) { 
    if(dataToSet.status == 1){ 
       return "<button class='btn btn-primary'>Active</button>"; 
    }else{ 
       return "<button class='btn btn-primary'>Desactive</button>"; 
    } 
};

你只需要像这样刷新你的数据表:

table.ajax.reload( null, false )

希望对您有所帮助。