Always "No Matching Found" with serverSide Enabled using custom data

Lambda

Hi everyone,
I've tried to enable serverSide with my current code, but I ran into some problems.
By now, whatever I do, my table always ends up with "No Matching found".

Here is the minimal code:

<div>
    <table id="testTable" class="display" style="width:100%">
        <thead>
        <tr>
            <th>ID</th>
        </tr>
        </thead>
    </table>
</div>

let DT;
function createRows(json){
    let content= json["data"];
    for(let jsonEntryInd in content) {
        let jsonEntry = content[jsonEntryInd];
        DT.row.add(jsonEntry);
    }
    DT.draw();
}

$(document).ready( function () {
    DT = $('#testTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: "api/rest/XXX/",
            dataSrc: function (json) {
                let content= json["data"];
                for (let i = 0; i < content.length; i++) {
                    json["data"][i] = {"id" : json["data"][i]["pk"]}; // We will assume that this is useful
                }
                return json;
            },
        },
        columns: [
            {data:"id"}
        ],
        initComplete: function (settings, json) {
            createRows(json); // As I transform the original data at line 20, I need to add the row manually
        },
    });
} );

Assuming the AJAX query returns :

{"recordsTotal":147,"recordsFiltered":147,"data":[
  {"pk":7},{"pk":8},{"pk":9},{"pk":13},{"pk":14},{"pk":23},{"pk":24},{"pk":25},{"pk":28},{"pk":31}
],"draw":1}

Notice that the code work as expected by disabling serverSide.

I guess that by enabling it, it triggers some filters displaying the "No matching records found".
If I disable searching (searching: false), the table will display as expected. But the results will dissapear after another filter occurs (sorting the column for instance).

I am a bit confused by why this message appear, why would a filer be apply with serverSide enabled ?

Thanks in advance for the help !

colin

Hi @Lambda ,

For server side processing, the protocol is discussed here, and there are examples here.

You're doing something odd by creating the rows in the initComplete function. I suspect if you remove the ajax.dataSrc block, everything will work as expected, since the returned data looks sensible.

If that doesn't work, 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

Cheers,

Colin