Datatable jquery 没有显示数据

Question

我正在使用 Jquery 数据 table 来显示我的数据，这些数据来自 ajax 调用和 json 文件。我正在使用两个 table，第一个 (#list1) 显示来自 sql 的数据，第二个 (#list2) 在我单击第一个 [= 中的其中一行时被填充27=]（点击事件）。我在重新加载数据时苦苦挣扎，我使用 clear() 和 draw() 重新加载 table，但是在使用这个之后，第二个 table (#list2) 停止显示信息，只有当你去点击它会出现数据。我想这就是我重新加载 table 的方式，但没有其他方法对我有用。

这是我的 jquery 代码：

$(document).ready(
                function()
                {

                 $('#list1').DataTable(
                  {
      
                   dom: 'lfrtipB', //elementos del DOM y orden 
                   buttons: ['csv', 'excel', 'pdf', 'print']

                   });
                 $('#list2').DataTable(
                    {
                    responsive: true,
                    searching: false,
                                        
                    });
  
                    $("#list1 tr").click(
                            function ()
                            {
                                var cod = ($(this).find("td:first").text());
                                $.ajax({
                                url: 'https://www.urlblabla.php',
                                data: {
                                    action: 'usuario',
                                    idfiltro: cod
                                        },
                                    type :'post',
                                    success: function(sql) 
                                    {   
                                        var t= $('#list2').DataTable().clear().draw();
                                        $.each(JSON.parse(sql), function(idx, opt)
                                        {
                                            t.row.add([ opt.1, opt.2,opt.3,opt.4]).draw(); //this was my mistake I add the draw() method
                                        }); 
                                    }//endsuccess
                                }); //endajax
                            }//end function
                    );//end click
                }
            );//fin document ready

我尝试使用 reload() 函数，但浏览器提示我找不到函数错误

这是我的 html 代码（非常简单）

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="css/jquery-ui-1.10.2.custom.min.css" rel="stylesheet" type="text/css"/>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous"/>
    <link href="libreriasWS/dataTables.bootstrap5.min.css"rel="stylesheet" type="text/css"/>
    <link href="libreriasWS/jquery.dataTables.min.css"rel="stylesheet" type="text/css"/>
    <link href="libreriasWS/datatable_style.css"rel="stylesheet" type="text/css"/>
    <link href="libreriasWS/buttons.dataTables.min.css"rel="stylesheet" type="text/css"/>
                
    <script type="text/javascript" src="jquery-3.5.1.js"></script>
    <script type="text/javascript" src="libreriasWS/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="libreriasWS/dataTables.buttons.min.js"></script>
    <script type="text/javascript" src="libreriasWS/dataTables.bootstrap5.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
</head>

<body>
    <center>    
        <div id="content" class="container">

                    <div class="datatable-inner table-responsive ps ps--active-x">
                    <h4>Users</h4>
                    <table id="list1" class="table datatable-table hover">
                        <thead class="datatable-header">
                            <tr>
                                <th>ID</th>
                                <th>name</th>
                                <th>Line</th>
                            </tr>
                        </thead>
                        <tbody>
                            
                            <?php   
                                $cli = $soapClient->getData("","array_data","");
                                $result_array = json_decode($cli);
                                    
                                for ($i=0; $i < count($result_array); $i++) 
                                { 
                                    print '<tr>';
                                    print '<td>'.$data_array[$i]->{'Id'} .'</td>';
                                    print '<td>'.$data_array[$i]->{'name'} .'</td>';
                                    print '<td>'.$data_array[$i]->{'line'} .'</td>';
                                    print '</tr>';
                                }//finfor
                            ?>
                        </tbody>
                    </table>
                    </div>
                    
                

                            <div class="datatable-inner table-responsive ps ps--active-x">
                                <h6>Users</h6>
                                <table id="list2" class="table datatable-table hover">
                                    <thead class="datatable-header">
                                        <tr>
                                        <th>ID</th>
                                        <th>Descripcion</th>
                                        <th>MAC</th>
                                        <th>Cliente</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                    <br/>



            </div> <!--Fin Tab Content-->
        </div> <!--Fin Tab Content contaniner-->
    </center>



</body>

Answer 1

如果您在单击第一个 table 中的不同行时尝试清除并重新填充第二个数据表，则需要在初始化中使用 'destroy: true'。您也可以在 DataTable 初始化中添加一个 Ajax 调用。

最好在单独的函数中初始化第二个 table，然后将 table 1 中的变量作为参数传递，例如

$(document).ready(function () {
$("#list1 tr").click( function () {
    var cod = ($(this).find("td:first").text());

    SecondTableInitialise(cod);
});
});


function SecondTableInitialise(cod) {
    $("#table2").DataTable({
        "ajax": {
            "url": "methodURL" + cod,
            "dataSrc": "tableSource"
        },
        "columns": [
            { "data": "Column1Data" },
            { "data": "Column2Data" },
            { "data": "Column3Data" }
        ],
        "destroy": true
    });
}

Datatable jquery 没有显示数据

Datatable jquery does not show data

html

ajax

datatable

json

bootstrap-4