How should I deal with nuIl values in DataTable when using ajax and flask?

SGiou

I'm getting the following error when my page tries to load a DataTable DataTables warning: table id=MarineObsTable - 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 I think this is where the problem arises.

My jquery is:

<script>
    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 );
</script>

I tried adding a render function to solve the issue (adapted from an example described in the comments on http://datatables.net/tn/4), 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:

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

My 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>

The output from the debugger is:

Data source:    Ajax
Processing mode:    Client-side
Draws:  2
Columns:    137
Rows - total:   48
Rows - after search:    48
Display start:  0
Display length: 25

There are 137 columns, and the data is updated daily, with any column potentially containing null data. I'd like to find a method where the columns don't have to be declared within the dataTable function.

I'd appreciate any help with getting this working.

colin

Hi @SGiou ,

You could try setting columns.defaultContent. If that doesn't help, we're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

SGiou

Thanks Colin. I tried the above answer, but I couldn't get it to work in my case. I ended up setting all the null values to an empty string in the json data string before passing it to the datatable via ajax, and that worked. I think it was probably due to my lack of experience with datatables that I wasn't able to implement the columns.defaultContent method well.