The server returns json, which includes 2 segments of data, and the 2 segments are loaded in 2 table

feng xia

<script >
    $(document).ready(function() {
    $.ajax({
            url:'/queryseller/queryseller',
            type: 'POST',
            data:{
                date:currtime,
                csrfmiddlewaretoken:$('[name=csrfmiddlewaretoken]').val(),
            },
            success:function(res){
                tableformat(res.data)
                brandseller(res.data2);

            },
        }); …………

tableformat and brandseller code

function tableformat(data){
        $('#ple').DataTable({  
             data: data,
            "dom": '<"top"flp>t<"bottom"i><"clear">',
            "columns":[
                { "width": "10%" },
                { "width": "15%" },
                null,
                { "width": "10%" },
                { "searchable": false },
            ],
……

Here are perfect, but I want to load the Child rows in the page, here it does not work, I test is caused by the order of javascript loading, JSON data has not been loaded on the implementation of var table = $ ('#ple').DataTable ();, resulting in the first table (ple) failed to load, the second table is normal, the If I do not execute var table = $('#ple').DataTable();. The Child rows can't load

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');
                                    }
                                }
                            });
                        });
                    })

Is there any way to load the JSON data returned by the server in 2 tables that can be used Child rows

kthorngren

If I understand the problem correctly:

You can move line 1 (var table = $('#ple').DataTable();) of the child code into the event handler, insert between line8 and 9.

or

You can make the variable table a global variable then on line 1 just have table = $('#ple').DataTable();.

Kevin

feng xia

I've tried all your methods, and I've tried writing Child rows as a function, but it doesn't work either.

feng xia

I found a solution, first generate new DataTable, then AJAX and then

 $("#ple").DataTable().clear();
    $("#ple").DataTable().rows.add( res.data ).draw();