How to deal with null values in JQuery DataTable when using ajax

Question

I'm getting the following error when my page tries to load a DataTable:

DataTables warning: table id=table1 - Requested unknown parameter '0' for row 0, column 0. For more information about this error, please see http://datatables.net/tn/4

The table loading works fine when I use a dummy data set of random values, but the data I would like to display has many null values, and this may be why the problem arises. I would like to know how best to set the DataTable settings such that null values are recognized and displayed as an empty string.

I tried adding a render function to solve the issue (adapted from an example described in the comments on datatables oficial forum ), but it's not currently working, and I'm not sure how best to implement it, or if it would be better to use another method altogether.

jQuery:

function setupData() {
    $(document).ready(function () {
        $('#table1').dataTable({
            "dom": 'B<clear>frtip',
            "buttons": [
                'copy', 'csv', 'excel', 'pdf', 'print'
            ],
            "lengthMenu": [[25, 50, 100, -1], [25, 50, 100, "All"]],
            "scrollX": true,
            "scrollY": true,
            "ajax": {
                "url": "/index_get_data",
                "dataType": "json",
                "dataSrc": "data",
                "contentType": "application/json"
            },
            responsive: true
        });
    });
}
$(window).on("load", setupData);

html:

<table contenteditable='true' id="table1" class="tableBody dataTable table-striped table-bordered nowrap display" style="width:100%" >
    <thead>
        <tr>
            {%  for item in cols %}
                <th>{{ item }}</th>
            {% endfor %}
        </tr>
    </thead>
</table>

A render function that I added to the dataTable declaration, but I couldn't get this to work:

"render": function jsRenderCOL(data, type, row, meta) {
    var dataRender;
    if (data == null) {
        dataRender = "";
    }
    return dataRender;
}

There are over 130 columns (this can be variable), and the data is updated daily, with many columns potentially containing null data. I'd like to find a method to display the data within the dataTable where the columns don't have to be declared explicitly within the dataTable function. Thanks for any help you can provide.

Answer 1

You dont have to worry about ajax data use this code

  $('.dataTable').dataTable({ destroy: true, paging: true, searching: true, sort: true, "ajax": { url: '{{ url('users/datatable')}}', type: 'POST', headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' }, 'data':{} }, "columns": [ {data: 'id'}, {data: 'name'}, {data: 'email'}, {data: 'membership_no'}, {data: 'is_active'}, {data: 'varsity_session'}, {data: 'due_amount'}, {data: 'paid_amount'}, {data: 'created_at'}, {data: 'last_transaction_date'}, {data: 'action'}, ], "columnDefs": [ {"bSortable": false, "targets": [1, 6]}, {"searchable": false, "targets": [4, 6]} ], lengthMenu: [[10, 50, 100, -1], [10, 50, 100, "All"]], pageLength: 10, "dom": 'Blfrtip', buttons: [ { extend: 'copy', text: 'copy', className: 'btn btn-primary', exportOptions: { columns: 'th:not(:last-child)' } }, { extend: 'csv', text: 'csv', className: 'btn btn-warning', exportOptions: { columns: 'th:not(:last-child)' } }, { extend: 'excel', text: 'excel', className: 'btn btn-danger', exportOptions: { columns: 'th:not(:last-child)' } }, { extend: 'pdf', text: 'pdf', className: 'btn btn-success', exportOptions: { columns: 'th:not(:last-child)' } }, { extend: 'print', text: 'print', className: 'btn btn-btn-info', exportOptions: { columns: 'th:not(:last-child)' } } ] }); }); 

Answer 2

You could try to set the defaultContent on initialisation for each and every column to be an empty string ie

$('#table1').dataTable( {
  "columnDefs": [ {
      "targets": (pass a variable in here that you have calculated based on the number of columns to render) 
      "defaultContent": ""
    } ]
} );

and for the targets attribute pass in a variable that defines the indexes of the columns.