switching from serverside processing to client side processing fails

fenrir

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?

HTML

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

javascript

function getSamples(){

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

        url = url+ "?" + data;
        console.log(url);
        $.fn.dataTable.ext.errMode = 'none';
        var samples_table = $('#samples_table').DataTable();
        samples_table.destroy();
        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>
                </button>
                </div>`;
                $('#errorbox').remove();
                $('#samples_table').prepend(message);
                console.log(this);
                             
            })
            .DataTable( {
                ajax:url,
                dataSrc: 'data',
                processing: true,
                serverSide: true,
                stateSave: true,
                scrollY: '200px',
                scrollCollapse: true,
                paging: false,
                searching:true,
                columnDefs:[
                    { target: 5,
                      visible:false
                    }
                ],    
                columns: [ 
                    {data:'patient'},    
                    {data:'name'},
                    {data:'visit.visit_date'},
                    {data:'tissue_type.name'},
                    {data:'notes.body'},
                    {data:'sample_id'},
                ],
                
                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
}

kthorngren

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.

Kevin

fenrir

@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;
samples_table.fnDraw();

kthorngren

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.

Kevin