switching from serverside processing to client side processing fails

switching from serverside processing to client side processing fails

fenrirfenrir Posts: 2Questions: 1Answers: 0

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:

I have a problem switching back to client side processing for proper sorting and searching.
setting serverSide: true, --> works as expected, but datatable cannot be sorted or searched
setting serverSide: false, --> the data does not get displayed at all with error:
Showing 0 to 0 of 0 entries (filtered from 126 total entries)
So somehow, it knows 126 entries are returned

q1, how can I see the result of the ajax call in a console.log?
q2, in client side: should the json returned exactly match the columns instead of returning all data (also used elsewhere) as now?


<table id="samples_table" class="table table-striped table-bordered table-sm" style="width:100%" >
                        <th data-data="visit.visit_date" data-name="visit.visit_date">date collected</th>


function getSamples(){

        var url = "{% url 'api:sample-find' %}";
        data = $("#findSampleForm").serialize();
        data = data + '&format=datatables';

        url = url+ "?" + data;
        $.fn.dataTable.ext.errMode = 'none';
        var samples_table = $('#samples_table').DataTable();
        sample_table = $('#samples_table')
            .on( 'error.dt', function ( e, settings, techNote, message ) {

                message = `<div id="errorbox" class="alert alert-warning alert-dismissible fade show" role="alert">
                    <p>Query did not return qualified samples</p>
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
            .DataTable( {
                dataSrc: 'data',
                processing: true,
                serverSide: true,
                stateSave: true,
                scrollY: '200px',
                scrollCollapse: true,
                paging: false,
                    { target: 5,
                columns: [ 
                select: {
                    items :'row'
            }).column( 5 ).visible( false );;



ajax response (only need a subset of this response, any sensitive info xxxed out):

  "data": [
      "sample_id": xxxx,
      "derivation": null,
      "visit": {
        "visit_id": xxxx,
        "patient": {
          "patient_id": xxxx,
          "gender": null,
          "birth": null,
          "death": null,
          "symptom_onset": null,
          "multiply_infected": null,
          "vv_uid": xxxx,
          "date_added": "xxxx",
          "location": null
        "visit_date": "xxxx",
        "visit_number": "1",
        "vv_uid": xxxx,
        "date_entered": "xxxx",
        "external_visit_id": null,
        "is_deleted": false
      "patient": "xxxx",
      "tissue_type": {
        "tissue_type_id": xxxx,
        "name": "xxxx"
      "notes": {
        "body": null,
        "time_created": null,
        "sample": null,
        "scientist": null
      "received_date": null,
      "name": "xxxx",
      "vv_uid": xxxx,
      "date_added": "xxxx",
      "is_deleted": false,
      "date_collected": null,
      "sample_type": null,
      "additive": null
   ............... //deleted other rows
  "recordsFiltered": 126,
  "recordsTotal": 126,
  "draw": 1


  • kthorngrenkthorngren Posts: 19,945Questions: 26Answers: 4,701
    edited March 2023

    Looks like everything should be working. I suspect the problem is with stateSave being enabled and the last search term is being restored resulting in 0 rows showing. Do you have something in the global search input? If so clear it. You could ignore the search term with stateLoadParams. See the example in the docs.


  • fenrirfenrir Posts: 2Questions: 1Answers: 0

    @kthorngren it works if I switch off searching.
    After some searching on the 'searching' problem I found that if I add these two lines after the samples_table initiation, it works as expected:

    $.fn.dataTableExt.afnFiltering.length = 0;
  • kthorngrenkthorngren Posts: 19,945Questions: 26Answers: 4,701
    edited March 2023

    Ok. But why not use this as it works with stateSave?

    $('#example').dataTable( {
      "stateSave": true,
      "stateLoadParams": function (settings, data) {
        data.search.search = "";
    } );

    This removes the saved filter and will probably make more sense when you are debugging the page at a later time.


Sign In or Register to comment.