CODEWITHSUNDEEP
javascriptphpjqueryajaxdatatables
Christoph C.
Christoph C.

Reputation: 938

dataTable - Reload table after form submit

I already read a lot here but I can´t find a working solution! I have a datatable and inside one column there is an edit button. If a user clicks on the edit button a modal appears and user can change an entry from a datatable. Once the form is submitted, the changes are done inside the database.

Now I would like to automatically refresh my table withour doing a page reload. How can I achieve that? What do I have to call inside my success message?

Here is my code:

index.php:

if ($savetodo=="true") {
    $content=array("descr"=>$descr);
    updateToDoInfo($id,$content);

}

AJAX submit:

                <script>
                    $(function() {
                        $('#form_edittodo').on(\"submit\", function(event) {
                            event.preventDefault();

                            $.ajax({
                                url: 'index.php',
                                type: 'post',
                                data: $(this).serialize(),
                                beforeSend: function(){
                                        $('#loading').show();
                                    },
                                    complete: function(){
                                        $('#loading').hide();
                                    },
                                success: function() {
                                   // What should I enter here?
                            });
                        });
                    });
                </script>

datatable:

    <script>
    $(document).ready(function() {
        $('#todolist12').DataTable();
    } );
    </script>

Would be great if someone can help me out.

Upvotes: 0

Views: 5713

Answers (2)

Adam
Adam

Reputation: 2666

You need to update the cell using the dataTables data() method.

For example, you might want the success function to look something like this:

success: function() { 
    $('#todolist12').DataTable().cells("#idOfChangedCell").data("Update to cell").
}

For the change to actually appear on your webpage, however, you also need to invoke the dataTables draw() method:

$('#todolist12').DataTable().draw();

Upvotes: 1

Mark Evaul
Mark Evaul

Reputation: 653

you could do a location.reload() to reload the page.

If you don't want to reload the page, then you need to make your table loadable over ajax. To be really slick, you would be able to load a single row.

You could also return the new row as the response from your save request and just update the table with the new markup.

Or you could use javascript templates to render the data on the client and return the record as json.

You have a lot of options, but it's up to you as the dev to determine the right solution. There isn't a single line or several lines that will solve your issue other than location.reload(). It all depends on how your app is written now, or how you modify it to do what you want it to do.

Upvotes: 0

Related Questions