Edgar Ong Edgar Ong - 1 month ago 7
Javascript Question

Datatables not working when loading specific page though id

i have my page complete with datatables which in this picture enter image description here

i have a problem once i activate or deactivate my staff the datatables search and sort will be disappeared. i think my error is in the load part. what is the proper way in loading a specific page with div id?

this is the output when activate or deactivate my staff is hereenter image description here

coz what i did is in my base_url+"adminpage/userpage" it is one page for the user and staff. i just did is when i press view staff it will hide the user and will show the staff page which in the same link.

which my code there is here

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


my code in activate is here

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


and for deactivate is here

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

You have to change your DataTable to server-side like this example. After that you can add your buttons on each row like this :

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

And you just have to refresh your DataTable like this :

table.ajax.reload( null, false )

Hope it help.