ServerSide data will not render in DataTables

n_vandyck

Hey,

First of all, congrats on this project, it's really awesome. But since i am only starting with it, I tend to get stuck a lot. Usually I find a solution, but this time I've been cracking my head on it for the last few days. So here's my Question:

I'm trying to do a serverSide request with a java backend. When i do the request everything is fine, except there is no data in my table. Even the recordsTotal and recordsFilterd are shown, but not the data. It seems that DataTables can't find it somehow. Can someone help me to find what i'm doing wrong?

Here is my HTML:

<table cellpadding="0" cellspacing="0" border="0"
                        class="table table-striped table-bordered" id="table-list">
                        <thead>
                            <tr>
                                <th>IdNo</th>
                                <th>Id type</th>
                                <th>from date</th>
                                <th>status</th>
                            </tr>
                        </thead>
                        <tfoot>
                            <tr>
                                <th>idNo</th>
                                <th>idType</th>
                                <th>from date</th>
                                <th>status</th>
                            </tr>
                        </tfoot>
                        </tbody>
                    </table>

here's my JS:

$(document).ready(function() {
    
    bTable = $('#table-list').dataTable({
        "dom" : "TClfrti<'pull-right'p>",
        "paging" : true,
        "pagingType" : "full_numbers",
        "pageLength" : 10,
        "serverSide" : true,
        "processing" : true,
        "ajax" : {
            "url" : parentUrl + url_list,
            "type" : "POST",
            "dataSrc" : "",
            "dataType" : "json",
            "contentType" : "application/json",
            "data" : function(data, callback, settings) {
                data = JSON.stringify(data);
                return data;
            }
        },
        "deferRender" : true,
        "columns" : [ {
            "name" : "idNo",
            "data" : "idNo"
        }, {
            "name" : "idType",
            "data" : "idType"
        }, {
            "name" : "fromDate",
            "data" : "fromDate"
        }, {
            "name" : "status",
            "data" : "status",
            "render" : {
                "display" : function(data, type, full, meta) {
                    var txtStatus;
                    switch (data.aaData.status) {
                    case 0:
                        txtStatus = "update";
                        break;
                    case 1:
                        txtStatus = "delete";
                        break;
                    case 2:
                        txtStatus = "new";
                        break;
                    default:
                        txtStatus = data.data.status;
                        break;
                    }
                    return txtStatus;
                }

            }
        } ],
        "language" : {
            "lengthMenu" : "_MENU_ records per page"
        }
    }).columnFilter({
        aoColumns : [ {
            type : "text"
        }, {
            type : "select",
            values : [ 'NFC', 'BARCODE', 'QRCODE' ]
        }, {
            type : "text"
        }, {
            type : "select",
            values : [ 'Update', 'Delete', 'New' ]
        } ]
    });

    /* functions */

});

And these are my JSON:

going to server:

{"draw":1,"columns":[{"data":"idNo","name":"","searchable":true,"orderable":true,"search":{"value":"","regex":false}},{"data":"idType","name":"","searchable":true,"orderable":true,"search":{"value":"","regex":false}},{"data":"fromDate","name":"","searchable":true,"orderable":true,"search":{"value":"","regex":false}},{"data":"status","name":"","searchable":true,"orderable":true,"search":{"value":"","regex":false}}],"order":[{"column":0,"dir":"asc"}],"start":0,"length":10,"search":{"value":"","regex":false}}

coming from server

{"draw":1,"recordsTotal":2,"recordsFiltered":2,"data":[{"idNo":"1","idType":1,"fromDate":14122014,"status":2},{"idNo":"2","idType":1,"fromDate":15122014,"status":2}]}

So i try to follow the documentation on the site, but for this problem i couldn't find anything.

Also is it possible to make DataTables do a POST all the time?

Maybe someone here who can help me, it will be much appreciated.

Greetings

ps. it's not possible to give a link.

n_vandyck

I found a solution: I used the hungarian notation in JS and my data is rendered. (still using 1.10.4)

the only problem i still have is,
I'm using POST to get my data, this works but only for the initial load. Not when clicking on paging buttons or filtering, here it always sends a GET request. Even though i have "sServerMethod" : "POST".

anybody know why?

greets