1
votes

I am using Yajra's DataTables server side processing. I can see the JSON data but the table is not being populated.

I managed to get DataTables working with client side processing, but as I will eventually have > 50,000 rows of data, I decided to try and implement server side processing by downloading Yajra's DataTables for Laravel 5.8.

When I call my route, I see the data in a JSON format, but I am not seeing the table at all. It says "draw: 0", so I guess there is an issue with drawing the table?

I have tried various solutions mentioned on stack overflow and the official DataTables website, however none seem to work for me. E.g.
- DataTables json is not processed (in Laravel)
- jQuery Datatables - Table not populated for Ajax response
- https://datatables.net/forums/discussion/45444/populate-table-body-with-ajax

The JSON data that I see when I call my route is as follows:


{
  "draw": 0,
  "recordsTotal": 3,
  "recordsFiltered": 3,
  "data": [

    {
      "id": "1",
      "customerNr": "98764",
      "orderNr": "23478",
      "pallet_id": "66788",
      "status_id": "2",
      "created_by": "Sara",
      "created_at": "04 Jul 2019",
      "updated_at": "2019-07-09 07:23:20"
    },
    {
      "id": "2",
      "customerNr": "99999",
      "orderNr": "22222",
      "pallet_id": "22335",
      "status_id": "1",
      "created_by": "Sophie",
      "created_at": "04 Jul 2019",
      "updated_at": "2019-07-04 08:26:28"
    },
    {
      "id": "3",
      "customerNr": "54657",
      "orderNr": "89856",
      "pallet_id": "11228",
      "status_id": "1",
      "created_by": "Markus",
      "created_at": "08 Jul 2019",
      "updated_at": "2019-07-08 06:59:42"
    },

  ],
  "input": []
}

Here are the relevant files from my Laravel project:

web.php:

Route::get('returned-shipment', ['uses'=>'ReturnedShipmentController@index', 'as'=>'returned-shipment.index']);

ReturnedShipmentController:

public function index(
{
   return DataTables::of(ReturnedShipment::all())->make();
}

index.blade.php:

<div class="row">
    <div id="tbl" class="col-sm-12">
        <table id="overview" class="cell-border display">

            <thead class="tbl-top">
            <tr>
                <th>Retourennummer</th>
                <th>Auftragsnummer</th>
                <th>Datum</th>
                <th>Zustand</th>
            </tr>
            </thead>

            <tfoot class="tbl-bottom">
            <tr>
                <th>Retourennummer</th>
                <th>Auftragsnummer</th>
                <th>Datum</th>
                <th>Zustand</th>
            </tr>
            </tfoot>
        </table>
    </div>
</div>

<script>
    $(document).ready(function () {
        var startingStatus = 'angelegt';
        var table = $('#overview').DataTable({
            "processing": true,
            "serverSide": true,
            "ajax": "{{ route('returned-shipment.index') }}",
            "columns": [
                {data: 'id'},
                {data: 'orderNr'},
                {data: 'created_at'},
                {data: 'status_id'}
            ],
            "search": {
                "search": "angelegt"
            },
            "dom": "<'row'<'col-sm-4'l><'col-sm-8'f>>" +
                "<'row'<'col-sm-12'tr>>" +
                "<'row'<'col-sm-6'i><'col-sm-6'p>>",
            "paging": true,
            "info": true,
            "searching": true,
            "autoWidth": true,
            "language": {
                "paginate": {
                    "previous": "Vorherige Seite",
                    "next": "Nächste Seite"
                },
                "search": "Suche:",
                "info": "Zeige _START_ - _END_ von insgesamt _TOTAL_ Einträgen",
                "lengthMenu": 'Einträge pro Seite' + '<br>' +
                    '<select class="custom-select mr-sm-2" id="inlineFormCustomSelect">' +
                    '<option selected value="10">10</option>' +
                    '<option value="20">20</option>' +
                    '<option value="30">30</option>' +
                    '<option value="40">40</option>' +
                    '<option value="50">50</option>' +
                    '<option value="-1">Alle</option>' +
                    '</select>'
            },
            initComplete: function () {
                /**
                 * Drop-down filter is created for the 4th column "status" in the header and populates it with
                 * the different status values
                 */
                this.api().columns([3]).every(function () {
                    var column = this;
                    var select = $('<select><option value="">alle</option></select>')
                        .appendTo($(column.header()))
                        .on('change', function () {
                            var val = $.fn.dataTable.util.escapeRegex(
                                $(this).val()
                            );

                            column
                                .search(val ? '^' + val + '$' : '', true, false)
                                .draw();
                        });

                    /**
                     * When clicking on drop-down next to status, the sorting function is not activated
                     */
                    $(select).click(function (e) {
                        e.stopPropagation();
                    });

                    /**
                     * Once an option in the drop-down next to status has been selected, you can read the text in
                     * the drop-down
                     */
                    column.data().unique().sort().each(function (d, j) {
                        if (startingStatus === d) {
                            select.append('<option SELECTED value="' + d + '">' + d + '</option>')
                        } else {
                            select.append('<option value="' + d + '">' + d + '</option>')
                        }
                    });

                    /**
                     * When drop-down is clicked on, search field is cleared. Otherwise search field must be
                     * manually cleared before using the drop-down.
                     */
                    $(select).on('click', function () {
                        table.search(" ").draw();
                    });
                });
            }
        });
    });
</script>

I am expecting to see the table being populated with the data.

If I need to provide any more code or explain something further, please don't hesitate to ask. I am quite new to Laravel and DataTables, so I would greatly appreciate your help.

Thanks in advance! :)

1
Try to provide a minimal code. Try for making use of code snippets if possible.Deepak A
There could be some error in the javascript. Try having a look at the Console in Developer Tools.linuxartisan
@ObitoUchiha Thank you for your feedback. I provided code which I thought was necessary to see. I guess I can reduce the JSON output and maybe cut some of my Javascript out, but I thought that all of the JS was relevant, as something further down could have been causing the problem.Elle
Could you verify the script runs the call to fetch the information? You are using a route in "ajax": "{{ route('returned-shipment.index') }}", but according to the documentation you should use a url-string or a string in a url option of an object: editor.datatables.net/reference/option/ajaxAltShiftZero
@DempseyvanWissen I changed it to "url": "returned-shipment", "type: "GET" within ajax and I still see the same page with the JSON data. I did just check the console however and received the following error: Content Security Policy: The page's settings blocked the loading of a resource at https:returns.jdoe.blah.test/favicon.ico (defauolt-src). Can this have anything to do with it? Why is it suddenly mentioning this icon now? I haven't changed anything regarding this.Elle

1 Answers

0
votes

I have checked your current code and checked your JSON. Your JSON file seems to be invalid.


{
  "draw": 0,
  "recordsTotal": 3,
  "recordsFiltered": 3,
  "data": [

    {
      "id": "1",
      "customerNr": "98764",
      "orderNr": "23478",
      "pallet_id": "66788",
      "status_id": "2",
      "created_by": "Sara",
      "created_at": "04 Jul 2019",
      "updated_at": "2019-07-09 07:23:20"
    },
    {
      "id": "2",
      "customerNr": "99999",
      "orderNr": "22222",
      "pallet_id": "22335",
      "status_id": "1",
      "created_by": "Sophie",
      "created_at": "04 Jul 2019",
      "updated_at": "2019-07-04 08:26:28"
    },
    {
      "id": "3",
      "customerNr": "54657",
      "orderNr": "89856",
      "pallet_id": "11228",
      "status_id": "1",
      "created_by": "Markus",
      "created_at": "08 Jul 2019",
      "updated_at": "2019-07-08 06:59:42"
    }
  ],
  "input": []
}

This is the correct format. The comma after the last object in your data array needs to be removed. Can you confirm this solves your issue? I got datatables working without this comma.