数据表未在页面加载时加载数据

Question

我正在使用数据table:

 $(document).ready(function() {


             $('#orderListTable').DataTable({
                 serverSide: true,
                 processing:true,

                 responsive: true,
                 "scrollX": true,
                 "pagingType": "full_numbers",
                 "drawCallback": function( settings ) {

                 },
                 ajax: {

                     url: siteUrl+'/allorder',
                     type: 'GET',
                 },

                 "lengthMenu": [
                     [10, 25, 50, -1],
                     [10, 25, 50, "All"]
                 ],

                 language: {
                     search: "_INPUT_",
                     searchPlaceholder: "Search records",
                     sProcessing: "<img src='image/loader.gif'>"
                 },

                 columns: [
                     { data: "id" },
                     { data: "order_number" },
                     { data: "customer_name" },
                     { data: "customer_mobile_1" },
                     { data: "customer_mobile_2" },
                     { data: "order_date" },
                     { data: "delivery_date" },
                     { data: "order_amount" },
                     { data: "action" }
                 ]

             })
         });

我有关注 table

<table id="orderListTables" class="display nowrap"  width="100%">
                            <thead>
                            <tr class="">
                                <th>Id</th>
                                <th>Order Number</th>
                                <th>Customer Name</th>
                                <th>Customer Number</th>
                                <th>Order Date </th>
                                <th>Delivery Date</th>
                                <th>Order Amount</th>

                                <th class="disabled-sorting ">Actions</th>
                            </tr>
                            </thead>

                            <tbody>



                            </tbody>
                        </table>

我正在使用以下库

<script src="https://cdn.datatables.net/1.10.17/js/jquery.dataTables.min.js"></script>

当我加载页面数据时不显示。如果我尝试 select 过滤值或搜索，那么即使对于静态 table 响应式 true 作品但不是 ajax 调用，数据也会加载。如果我有大列，即使滚动 x 也不起作用。

我什至注意到加载页面数据table 不会调用 ajax url 谁能帮我解决这个问题？

更新

{
"draw": 0,
"recordsTotal": 3,
"recordsFiltered": 3,
"data": [
{
"id": "1",
"order_number": "1312412",
"customer_name": "sdgsd",
"customer_mobile_1": "3532523",
"customer_mobile_2": "32523",
"order_date": "25/06/2018",
"delivery_date": "25/06/2018",
"order_amount": "32532",

"action": "<td class=\"td-actions text-right\">\n                                                       \n                                                        <button type=\"button\" rel=\"tooltip\" class=\"btn btn-success btn-sm editBranch\"\n                                                        onclick=\"editOrder(1)\" id=\"editBranch\">\n                                                            <i class=\"material-icons\">edit</i>\n                                                        </button>\n                                                        <button type=\"button\" rel=\"tooltip\" class=\"btn btn-danger btn-sm\" onclick=\"deleteOrder(1)\">\n                                                            <i class=\"material-icons\">close</i>\n                                                        </button>\n                                                    </td>"
},

我正在使用 yraja laravel 数据table

Answer 1

您的 HTML / Javascript 有错别字。

您使用 ID orderListTables 定义了一个 table（注意最后的 s），但是在 [=11= 上调用了 DataTables ].

AJAX调用问题可能是DataTables好像不喜欢你的action属性。如果我单击某个列，将显示一个错误提示，指向：https://datatables.net/manual/tech-notes/4

我只是用你提供的代码和JSON来模拟问题。

数据表未在页面加载时加载数据

datatable not loading data on page load

datatable

jquery

materialize

twitter-bootstrap

laravel