Display warning if records null Datatables AJAX - dataSrc

Display warning if records null Datatables AJAX - dataSrc

sealgeeksealgeek Posts: 6Questions: 1Answers: 0
edited April 2021 in Free community support

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?

This question has accepted answers - jump to:

Answers

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

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

    Colin

  • sealgeeksealgeek Posts: 6Questions: 1Answers: 0

    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

  • allanallan Posts: 61,433Questions: 1Answers: 10,049 Site admin
    Answer ✓

    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

  • sealgeeksealgeek Posts: 6Questions: 1Answers: 0

    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

  • sealgeeksealgeek Posts: 6Questions: 1Answers: 0

    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
    }

  • allanallan Posts: 61,433Questions: 1Answers: 10,049 Site admin
    Answer ✓

    "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

  • sealgeeksealgeek Posts: 6Questions: 1Answers: 0
    edited April 2021

    Okay finally solved this case :smile: . 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.

This discussion has been closed.