Reload table server/side

Canyavall

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.

ignignokt

If your ajax is successful after editing, deleting, or adding data, you could just put this in the success rather than passing back all of the json data.

table.ajax.url("modules/main/act_ges_users.php?action=table").load();

I think this also should work: table.ajax.url().load(); if I am reading the documentation correctly.