Server-side processing with client side filtering

karpad16

I would like to draw data from a database using a global search and server-side processing.

Once data is drawn, I want users to be able to hide/show rows using filters on the client side. But no new data is drawn when filtering.

New data is only drawn when the global search is done. Can this even be done?

Thank you!
I've managed to create a select dropdown with unique values on the client side every time a draw is performed.

<p>
      <input type="text" class="global_filter" id="global_filter">
       <button id="mySearchButton">Search</button>
    </p>

<script>

function NameSearch() {
    $('#example').DataTable().search(
    $('#global_filter').val()       
    ).draw();
               }    

function PopFilters() {
var select =  $('<select id="country"><option value=""></option></select>');
var col0 = $('#example').DataTable().column(0);
$(col0.footer()).empty();
select.appendTo($('#example').DataTable().column(0).footer());

               $('#example').DataTable().column(0).data().unique().sort().each(function(d,j ) {
                    select.append( '<option value="'+d+'">'+d+'</option>' )
               });
           }
$(document).ready(function() {
    $('#example').DataTable( {
        "serverSide": true,
        "searching": true,
        "deferLoading": 0,
        "deferRender": true,
        "ajax": "php/server_processing2.php",
        "paging":   false,
        "ordering": false,
        "info": true,
         dom: 'it',
        "drawCallback": function( settings ) {
                    PopFilters(); 
                     }
    } );
 
    $('#mySearchButton').on('keyup click', function () {
        NameSearch();
    } );

var col0 = $('#example').DataTable().column(0).footer();
    $(col0).on('change', function () {
                      var result =  $.fn.dataTable.util.escapeRegex($('#country').val()) ;
                                 return alert(result);
                              } );
               } );

 </script>

kthorngren

By definition Server Side Processing means that all sorting, searching and paging functions are performed by the server. Even if it were possible to use client side filtering it would only affect the data at the client, which is the page being displayed. It is not possible to use client side filtering with server side processing enabled.

You can use column().search() to use server side filtering. This example should help:
https://datatables.net/examples/api/multi_filter_select.html

Kevin

karpad16

Thanks Kevin. Can I hide/show rows in the displayed table using the results already drawn (without performing another draw)?

kthorngren

There is nothing built into Daatatables to do this. I suppose you could use jQuery methods or something to hide the tr elements. Datatables has no knowledge of tables that are manipulated directly so the behavior of Datatables might not seem right. But with server side processing there probably isn;t much to go wrong since sort, searching and paging will update the Datatable.

Kevin