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?

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
}

Answers

  • 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.

    Kevin

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

    Kevin

Sign In or Register to comment.