When I update the data with AJAX, Child rows it fails

feng xia

Everything was normal at first

Child rows code

var table = $('#ple').DataTable();
function format ( d ) {
        // `d` is the original data object for the row
        var order_table = "<div class= \"row\"><div class=\"col-10\">"+d+"</div></div>";
        // order();
        return order_table
    }
$('#ple tbody').on('click', 'td', function () {
            var tr = $(this).closest('tr');
            var row = table.row( tr );
            alert('ok'+row.data()[0])
            $.ajax({
                url:'/queryseller/queryproducts',
                type: 'POST',
                data:{
                    date:row.data()[0],
                    csrfmiddlewaretoken:$('[name=csrfmiddlewaretoken]').val(),
                },
                success:function(res){
                    if ( row.child.isShown() ) {
                        row.child.hide();
                        tr.removeClass('shown');
                    }
                    else {
                        row.child( format(res) ).show();
                        tr.addClass('shown');
                    }
                }
            });
        });
    })

ajax code

    $("#Button").click(function () { 
            $.ajax({
                url:'/queryseller/queryseller',
                type: 'POST',
                data:{
                    date:$("#test1-1").val(),
                    csrfmiddlewaretoken:$('[name=csrfmiddlewaretoken]').val(),
                },
                success:function(res){
                    $("#ple").DataTable().destroy();
                    $("#ple").DataTable({
                        data:res.data,

                });

                }
            })

The child code is disabled when the button is clicked to get the data

kthorngren

Why are you destroying the Datatable? There is no need to if all you are doing is updating the table data. Use clear() followed by rows.add() to reload the data. For example:

            success:function(res){
                $("#ple").DataTable().clear();
                $("#ple").DataTable().rows.add( res.data ).draw();

It sounds like destroying the Dataable is removing the event handler.

Kevin

feng xia

hi,kthorngren,Thank you for your answer, it solved my problem