How to reload data table when closing a modal?

Question

How to reload data table when closing a modal?

Navigation

#1 by (2 votes)
#2 by (0 votes)
#3 by (0 votes)

2

I use datatable to list some data brought from a database which I have a button to edit, that when I press it shows me a modal window, which I look for the form that was just updated that table is updated without having to reload the page ..
try in the DONE perform again ajax to list the data but I duplicate them. What alternative can exist so that as soon as you update that data, you do not have to press f5 and use window.location in javascript?

THAT'S HOW THE DATA IS READY IN THE DATATABLE

 table_students= $('#table').DataTable({             

                        "columnDefs": [
                            {
                                "targets": [ 0 ],
                                "visible": false,
                                "searchable": false
                            },                  
                        ],

                    });

    $.ajax({
                    url: 'list_students',
                    type: 'POST',
                })
            .done(function(response)
            {
                var answer= $.parseJSON(response);

                for (var i = answer.length - 1; i >= 0; i--) 
                {
                    var rowNode = table_students
                    .row.add([
                                answer[i].stu_id,
                                answer[i].stu_nombre,
                                answer[i].stu_apellido,
                                answer[i].stu_correo,
                                '<center><button type="button" name="updatestudent" id="updatestudent" class="btn btn-warning"></button>',                              
                            ])                     
                        .draw()
                    .node();
                }
            })
            .fail(function() {
                console.log("error");
            });

THIS IS HOW I UPDATE

 $("#updatestudent").submit(function() 
            {
                event.preventDefault();
                var data = $(this).serializeArray();

                $.ajax({
                    url: 'data_updatestudent',
                    type: 'POST',
                    data: data,
                })
                .done(function(response) {
                    var answer= $.parseJSON(response);
                    if(answer)
                    {
                        $('#ModalUpdate').modal('hide');
                         alert("datos actualizados");

                    }
                    else
                    {
                        alert("error");
                    }

                })
                .fail(function() {
                    console.log("error");
                })          
            });

I would appreciate the interest.

javascript jquery html datatables

asked by JDavid 14.02.2017 в 23:48

source

3 answers

How to center up to 200 characters of text when printing in php Save a key in the NDK

score 2 · Answer 1

You did not include the code with which you are instantiating your DataTable, but assuming you are loading the data with an ajax call:

var table = $('#example').DataTable( {
    ajax: "/table.php?id=1"
});

The refreshment is triggered with:

table.ajax.reload();

The reload method accepts two optional parameters. The first is a callback function that will be executed when the reload is completed. The second, a Boolean that specifies whether when refreshing returns you to the first page or keeps you on the page where you are standing (per page I mean the navigation of the table, not the browser).

For your use case, I imagine you would want to do

table.ajax.reload(null,false);

This call should be done together with the concealment of the modal.

Reference: ajax.reload ()

score 0 · Answer 2

<script type="text/javascript">
var table;
$(document).ready(function () {
    table = $("#table").DataTable({
        'ajax': {
            'type': 'GET',
            'url': 'url',//Url del archivo que recibe tus datos
            'data': {'id': ''}//Solo si solicitas un dato en especifico
        },
        'columns': [
            {"data": ""}//Tu Informacion que vas a plasmar en tu tabla
        ]
    });
});
$("#updatestudent").submit(function() 
{
        event.preventDefault();
        var data = $(this).serializeArray();

        $.ajax({
            url: 'data_updatestudent',
            type: 'POST',
            data: data,
        })
        .done(function(response) {
            var answer= $.parseJSON(response);
            if(answer)
            {
                $('#ModalUpdate').modal('hide');
                 alert("datos actualizados");
                 table.ajax.reload();//Podrias colocarlo dentro del success o done para recargar la tabla
            }
            else
            {
                alert("error");
            }

        })
        .fail(function() {
            console.log("error");
        })          
});
</script>

You could try this code, I've already done it and it works pretty well, obviously adapted to yours.

score 0 · Answer 3

A quick solution is that when saving the data execute the load method of DataTable or execute it after closing the modal. For example:

$("#idModal").on('hidden.bs.modal', function() {
        DataTableCargaDatos();
    });

this causes any method to be executed when closing the modal. I hope you serve