Display warning if records null Datatables AJAX - dataSrc

sealgeek

I have Code

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

I try validation data null in dataSrc cant solved this case. Maybe some validation?

colin

It would be worth look at columns.render, and doing something there for null,

Colin

sealgeek

I try with render()

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

Suggest problem my new code

allan

You want to use columns.defaultContent to tell DataTables what to display instead of null. That can be as simple as an empty string - e.g.:

{
  data: 'action',
  defaultContent: ''
}

Allan

sealgeek

Still warning with defaultContent

let pengiriman = $('#pengiriman-data').DataTable({
        responsive: true,
        ajax: {
            "url":readUrl,
            "dataSrc": 'data'
        },
        columnDefs: [{
            searcable: 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
      });

Screenshot

sealgeek

This my JSON Result

NOT NULL
{
"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"
}
]
}

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

allan

"error": true,

Either remove or change that. DataTables will “see” the error property in the JSON returned from the server and display it, assuming that it is a message to show to the end user about the data. If you don’t want it to do that automatically, don’t have an error property in the returned JSON.

Allan

sealgeek

Okay finally solved this case . Thank you helping this case

Finally Code

    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
          });

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.