Reload table server/side
Reload table server/side
First of all, thxnk you for this incredible tool that I'm enjoying to use!
Now, I'd like to expose my problem...
I have a datatable that is working fine, it's server side and I have the problem to reload the table after calling server side to add new rows or edit some of them, the problem must be something small I think, something I can't see... When I press on an icon that works as link in the datatables rows I can edit or delete or change a column called "status", the change is done in server-side and the database changes but, the table doesn't change.
The ajax return is correct, it returns me a new json array with the correct data, but I can't reload the table...
Here is the code, only js one, if you need server-side just tell me but, as I said, the data returned is correct.
ges_users.php
// ** Check page content
$(document).ready(function() {
// ** Init Datatables
//table = $('#main_table').DataTable();
table = $('#main_table').DataTable({
"processing": true,
"serverSide": true,
"ajax": {
"url": "modules/main/act_ges_users.php?action=table",
"type": "POST",
"data": function(d) {}
},
"columnDefs": [{
"targets": [0],
"visible": false,
"searchable": false
}, {
"width": "40px",
"sClass": "classDataTable",
"targets": 5
}, {
"width": "40px",
"sClass": "classDataTable",
"targets": 6
}, {
"width": "40px",
"sClass": "classDataTable",
"targets": 7
}]
});
// ** Validations
$('#create_form').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
email: {
validators: {
remote: {
message: 'Email repetido',
url: 'core/php/validate.php'
}
}
}
}
});
// Select row in table and assign action_id
select_and_assign(table);
// Delete user ajax call
$('#delete_form').submit(function(event) {
modal_submit_ajax("modules/main/act_ges_users.php", "#delete_form", "#delete", table);
});
// Change status user ajax call
$('#change_status_form').submit(function(event) {
modal_submit_ajax("modules/main/act_ges_users.php", "#change_status_form", "#cstatus", table);
});
});
pixie.js
// Main id for actions
var action_id = 0;
// ** Select row and assign id
function select_and_assign(table) {
table.on('click', 'tr', function() {
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
} else {
table.$('tr.selected').removeClass('selected');
$(this).addClass('selected');
action_id = table.cell('.selected', 0).data();
// Prepare form data to be sent
var delete_id = document.getElementById("delete_id");
var edit_id = document.getElementById("edit_id");
var cstat_id = document.getElementById("cstat_id");
delete_id.value = action_id;
if (delete_id != null) {
delete_id.value = action_id;
}
if (edit_id != null) {
edit_id.value = action_id;
}
if (cstat_id != null) {
cstat_id.value = action_id;
}
}
});
}
// Basic modal - submit form relation
function modal_submit_ajax(url, form, modal, table) {
var ajax_imput = false;
ajax_imput = submit_ajax(url, form);
$(modal).modal('hide');
if (ajax_imput == true && modal == "#delete") {
table.row('.selected').remove().draw(false);
} else if (ajax_imput == true && modal == "#cstatus") {
table.clear();
table.ajax.reload();
table.draw();
}
}
// Submit form with ajax (delete, create, change status)
function submit_ajax(url, form) {
var output = false;
var datastring = $(form).serialize();
jQuery.ajax({
type: "POST",
url: url,
async: false,
dataType: 'json',
data: datastring,
success: function(data) {
if (data['action'] == "succes") {
show_error_ok_dialog("ok_dialog", data['msg']);
output = true;
} else {
show_error_ok_dialog("error_dialog", data['msg']);
}
},
error: function(data) {
show_error_ok_dialog("error_dialog", "OMG Javascript!!");
}
})
event.preventDefault(); // Prevent the form from submitting via the browser.
return output;
}
Thanks for your help and excuse my english, it's not really good.