Django Ajax Datatable Loses Sort and Pagination

Django Ajax Datatable Loses Sort and Pagination

thedarkringthedarkring Posts: 8Questions: 1Answers: 0
edited January 2018 in Free community support

I am updating my datatable like this:

var mytable = $("#my-table").dataTable({
        stateSave: true
});

var saveForm = function () {
        var form = $(this);
            $.ajax({
                url: form.attr("action"),
                data: form.serialize(),
                type: form.attr("method"),
                dataType: 'json',
                success: function (data) {
                    if (data.form_is_valid) {
                        $("#my-table tbody").html(data.html_mytable);
                        $("#modal-my").modal("hide");  
                    }
                    else {
                        $("#modal-my .modal-content").html(data.html_form);
                    }
                }
            });
            return false;
    };

The problem is that after the saveForm function executes. The page displays all the rows of the datatable, it also loses the sort settings. If I click the sort column or filter, the datatable will look correctly again. I realize the I am appending html to the table and datatable doesn't understand. What is the easiest workaround for this?

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    The best option is to use Datatables API's to add the data. You can use clear() to clear the table, if desired then use rows.add() to add the rows to the table.

    However if that is not an easy option then you can use something like rows().invalidate() to have Datatables update its cache.

    Kevin

  • thedarkringthedarkring Posts: 8Questions: 1Answers: 0

    Any chance you can show me what the easier option would look like in my code above?

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    Try this:

                        if (data.form_is_valid) {
                            $("#my-table tbody").html(data.html_mytable);
                            $("#modal-my").modal("hide"); 
                            $("#my-table").DataTable().rows().invalidate();
                        }
    

    Kevin

  • thedarkringthedarkring Posts: 8Questions: 1Answers: 0

    The results are the same. The table still reflects the changes. But it loses its previous sort and it also displays all the rows.

  • thedarkringthedarkring Posts: 8Questions: 1Answers: 0

    This works to display the page I was on, but the data is not updated.

    if (data.form_is_valid) {
        $("#my-table tbody").html(data.html_mytable);
        $("#modal-my").modal("hide");
        $("#my-table").DataTable().rows().invalidate().draw(false);
    }
    

    I tried this with the same result.

    if (data.form_is_valid) {
        $("#my-table tbody").html(data.html_mytable);
        $("#modal-my").modal("hide");
        $("#my-table").DataTable().rows().invalidate('dom').draw(false);
    }
    
  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736
    edited January 2018

    Sorry I forgot to include draw() to redraw the table. If you want the table to stay on the same page you can use `.draw(false):

    if (data.form_is_valid) {
        $("#my-table tbody").html(data.html_mytable);
        $("#modal-my").modal("hide");
        $("#my-table").DataTable().rows().invalidate().draw();
    }
    

    Kevin

  • thedarkringthedarkring Posts: 8Questions: 1Answers: 0

    Please see my above comment.

  • thedarkringthedarkring Posts: 8Questions: 1Answers: 0
    edited January 2018

    The data is not reflecting as updated when I do a draw. With or without the 'dom'. I should also note that I am using client side processing, not server side.

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736
    Answer ✓

    I tried it in the below example and realized that when you replace the tbody html you are also removing anything Datatables may have added. In my example I use destroy() before adding the html the reinitialize a new Datatable.

    http://live.datatables.net/tehuzeto/1/edit

    Click the button Update Data to see it in action.

    Kevin

  • thedarkringthedarkring Posts: 8Questions: 1Answers: 0

    OMG thank you! I am 99% the way there. It still loses the page you were on and the sort settings. But it's no longer displaying all the rows.

  • thedarkringthedarkring Posts: 8Questions: 1Answers: 0

    You are really the best!!!!!!!! Thanks for your help. I have it working now and here is the final code:

    if (data.form_is_valid) {
         var info = $('#my-table').DataTable().page.info();
         var order = $('#my-table').DataTable().order();
        $('#ip-table').DataTable().destroy();
        $("#my-table tbody").html(data.html_mytable);
        $("#modal-my").modal("hide");
        $('#my-table').DataTable()
               .page.len( info.length )
               .page( info.page )
               .order( order[0][0] )
               .draw(false);
    }
    
This discussion has been closed.