datatable not loading data on page load

Question

I am using datatable:

 $(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" }
                 ]

             })
         });

and I have following 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>

and I am using following library

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

when I load page data wont display. If I try to select filter value or search then data will load even for static table responsive true works but not ajax call. Even scroll x is not working if I have large columns.

I even noticed on load page datatable wont call ajax url Can any one help me how I can fix this issue?

Update

{
"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>"
},

i am using yraja laravel datatable

Answer 1

There is a typo in your HTML / Javascript.

You define a table with the ID orderListTables (notice the s at the end), but DataTables is being called on orderListTable.

The AJAX call problem may be that DataTables does not seem to like your action property. If I click on a column, an alert shows an error, pointing to: https://datatables.net/manual/tech-notes/4

I just used the code and JSON you provided to simulate the problem.