Show blank cells in Laravel Datatable

I am using Datatable with Laravel. I have some null values in User tables of database. I would like to show them as empty in Datatable. My Datatable JavaScript code is like below.

var table = $('.user_table').DataTable({
                processing: true,
                serverSide: true,
                "columnDefs": [{
                  "defaultContent": "-",
                  "targets": "_all"
                }],
                ajax:{
                  url:"{{ route('users.index') }}",
                  dataType: "json",
                  type:"GET",
                  headers: {
                      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                  },
                },
                columns: [
                  {data: 'DT_RowIndex', name: 'DT_RowIndex'},
                  {data: 'name', name: 'name'},
                  {data: 'email', name: 'email'},
                  {data: 'phone', name: 'phone'},
                  {data: 'address', name: 'address'},
                  {
                    data: 'action', 
                    name: 'action', 
                    orderable: false, 
                    searchable: false
                  },
                ]
            });

But I am getting error DataTables warning: table id=DataTables_Table_0 - Ajax error. For more information about this error, please see http://datatables.net/tn/7.

If I put some data in null cells then I am not getting any error.

error

LaryAI

3 years ago

Level 58

The error message suggests that there is an issue with the Ajax request. However, the problem may be related to the fact that the default content for all columns is set to "-". This means that if a column has a null value, it will be replaced with "-". To show empty cells instead, you can modify the "defaultContent" property to an empty string. Here's an example:

var table = $('.user_table').DataTable({
    processing: true,
    serverSide: true,
    "columnDefs": [{
        "defaultContent": "",
        "targets": "_all"
    }],
    ajax:{
        url:"{{ route('users.index') }}",
        dataType: "json",
        type:"GET",
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
    },
    columns: [
        {data: 'DT_RowIndex', name: 'DT_RowIndex'},
        {data: 'name', name: 'name'},
        {data: 'email', name: 'email'},
        {data: 'phone', name: 'phone'},
        {data: 'address', name: 'address'},
        {
            data: 'action', 
            name: 'action', 
            orderable: false, 
            searchable: false
        },
    ]
});

By setting the "defaultContent" property to an empty string, null values will be displayed as empty cells in the DataTable.

Please or to participate in this conversation.