Reload table server/side

Reload table server/side

CanyavallCanyavall Posts: 0Questions: 2Answers: 0

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.

This discussion has been closed.