Display warning if records null Datatables AJAX - dataSrc

Question

let dataSeta = {"error": true,"message": "Data Pengiriman tidak ditemukan","data": null};

let pengiriman = $('#pengiriman-data').DataTable({
        responsive: true,
        data: dataSeta,
        columnDefs: [{
            searchable: false,
            orderable: false,
            targets: 0
        }],
        columns: [{
            data: "id_mon",
            defaultContent: ''
        }, {
            data: "kodejalan",
            defaultContent: ''
        }, {
            data: "nopol",
            defaultContent: ''
        }, {
            data: "supir",
            defaultContent: ''
        }, {
            data: "pelanggan",
            defaultContent: ''
        }, {
            data: "start",
            defaultContent: ''
        }, {
            data: "end",
            defaultContent: ''
        }, {
            data: "status",
            defaultContent: ''
        }, {
            data: "tanggal",
            defaultContent: ''
        }, {
            data: "action",
            defaultContent: ''
        }],
        "lengthChange": true,
        "lengthMenu": [[5, 10, 25, 50, 100], [5, 10, 25, 50, 100]],
        "paging":   true,
        "ordering": true,
        "info": true
      });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.24/js/dataTables.bootstrap4.min.js"></script>
<table loading="lazy" id="pengiriman-data" class="table table-bordered table-striped">
<thead>
  <tr>
    <th>ID</th>
    <th>Surat Jalan</th>
    <th>Mobil</th>
    <th>Supir</th>
    <th>Pelanggan</th>
    <th>Start</th>
    <th>End</th>
    <th>Status</th>
    <th>Tanggal</th>
    <th width="160">Aksi</th>
  </tr>
</thead>
</table>

I have code, the problem if records null display warning "DataTables warning: table id=pengiriman-data - true" datatables

let pengiriman = $('#pengiriman-data').DataTable({
        responsive: true,
        ajax: {
            "url":readUrl,
            "dataSrc": 'data'
        },
        columnDefs: [{
            searchable: false,
            orderable: false,
            targets: 0
        }],
        columns: [{
            data: "id_mon",
            defaultContent: ''
        }, {
            data: "kodejalan",
            defaultContent: ''
        }, {
            data: "nopol",
            defaultContent: ''
        }, {
            data: "supir",
            defaultContent: ''
        }, {
            data: "pelanggan",
            defaultContent: ''
        }, {
            data: "start",
            defaultContent: ''
        }, {
            data: "end",
            defaultContent: ''
        }, {
            data: "status",
            defaultContent: ''
        }, {
            data: "tanggal",
            defaultContent: ''
        }, {
            data: "action",
            defaultContent: ''
        }],
        "lengthChange": true,
        "lengthMenu": [[5, 10, 25, 50, 100], [5, 10, 25, 50, 100]],
        "paging":   true,
        "ordering": true,
        "info": true
      });

JSON Record Data :

{
    "error": false,
    "message": "Data Pengiriman",
    "data": [
        {
            "id_mon": "6",
            "kodejalan": "SJ00004\/03\/21",
            "nopol": "",
            "supir": "Dodong Karim",
            "pelanggan": "PT. Zoruka Sharp",
            "start": "",
            "end": "<button type=\"button\" class=\"btn btn-sm btn-success btn-flat\" onclick=\"return dataMap(6)\">Show<\/button>",
            "status": "<span class=\"badge badge-info\">Created<\/span>",
            "tanggal": "2021-04-01 20:12:14",
            "action": "bbb"
        },
        {
            "id_mon": "7",
            "kodejalan": "SJ00005\/03\/21",
            "nopol": "",
            "supir": "Dadang Kipas",
            "pelanggan": "PT. Zaruko Store",
            "start": "",
            "end": "<button type=\"button\" class=\"btn btn-sm btn-success btn-flat\" onclick=\"return dataMap(7)\">Show<\/button>",
            "status": "<span class=\"badge badge-info\">Created<\/span>",
            "tanggal": "2021-04-01 20:12:14",
            "action": "aaa"
        }
    ]
}

JSON Record NULL Data :

{
    "error": true,
    "message": "Data Pengiriman tidak ditemukan",
    "data": null
}

I am not able to recreate your issue (I do not get any warnings). Can you provide a minimal reproducible example - for example, in a Fiddle, or similar? My code uses slightly different JSON - but the structures are the same as yours. — andrewjames
Very minor point: searcable: false should be searchable: false. — andrewjames
@andrewjames i already change code to defaultContent still warning in my laptop — Denny Septian

Denny Septian Denny Septian · Accepted Answer · 2021-04-02T10:55:21

Okay finally this case solved :) I change JSON Result error to errData

{
    "errData": true,
    "message": "Data Pengiriman tidak ditemukan",
    "data": null
}

And JS Code with :

let pengiriman = $('#pengiriman-data').DataTable({
        responsive: true,
        ajax: {
            "url":readUrl,
            "dataSrc": function(data){
                if(data.data == null){
                    return [];
                } else {
                    return data.data;
                }
            }
        },
        columnDefs: [{
            searchable: false,
            orderable: false,
            targets: 0
        }],
        columns: [{
            defaultContent: '',
            data: 'id_mon'
        }, {
            defaultContent: '',
            data: 'kodejalan'
        }, {
            defaultContent: '',
            data: 'nopol'
        }, {
            defaultContent: '',
            data: 'supir'
        }, {
            defaultContent: '',
            data: 'pelanggan'
        }, {
            defaultContent: '',
            data: 'start'
        }, {
            defaultContent: '',
            data: 'end'
        }, {
            defaultContent: '',
            data: 'status'
        }, {
            defaultContent: '',
            data: 'tanggal'
        }, {
            defaultContent: '',
            data: 'action'
        }],
        "lengthChange": true,
        "lengthMenu": [[5, 10, 25, 50, 100], [5, 10, 25, 50, 100]],
        "paging":   true,
        "ordering": true,
        "info": true
      });

Read : My Question solved in this forum

Display warning if records null Datatables AJAX - dataSrc

1 Answers