Question

我正在使用数据表：

 $(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 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>

当我加载页面数据时不会显示。如果我尝试选择过滤器值或搜索，那么即使对于静态表响应的真实工程，数据也将加载，但不会加载ajax调用。如果我的栏很大，即使滚动x也不起作用。

我什至在加载页面上发现datatable不会调用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数据表

Answer 1

您的HTML / Javascript中有一个错字。

您定义了ID为orderListTables的表（请注意末尾的 s ），但是在orderListTable上正在调用DataTables。

AJAX调用问题可能是DataTables似乎不喜欢您的action属性。如果我单击列，则警报将显示错误，指向：https://datatables.net/manual/tech-notes/4

我只是使用您提供的代码和JSON模拟此问题。

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

1 个答案: