How do we get multi-column filtering and multi-column sorting order working together

aCoradatatbl

Hi
Ive tried to do this first in 2015 and having just returned to datatables find its still not working as expected. It appears that when clicking filter boxes at the top of each column it triggers the column sorting. From my uploaded files you can see i have used two table head rows; one for the filter text boxes and the other for the standard table headers.

This i thought would solve things but i still have the same issue only now filtering is ignored. Using a single header row puts us back to square one; clicking a filter box sorts the column ...doh!! changing the order of the header rows does creates the same issue. Ive given the header row with the filter input boxes an id so we can target them in the js - it all seems good but just doesn't work. We tried the, 'orderCellsTop' set to true and false and remove it altogether, nothing seems to help.

The way we originally tried (with a single header row) the text boxes replace the header titles and the title text becomes the textbox placeholder text -although not ideal we cant even get this to solve the issue - clicking the text box ALWAYS 'sorts' the column. Our client does NOT want this to happen!! Is my code right or am i missing something here. Vv frustrating ... feel like ive been at this issue without a break SINCE 2015!

See image here:

Code:

HTML
----
                  
  <table id="OfficePropertyOverview" class="table table-striped row-border order-column nowrap" cellspacing="0" width="100%">
        <thead>
        <tr id="filterboxrow">
            <th>ID</th>
            <th>Landlord</th>       
            <th>Manager</th>                    
            <th>Tenant</th>
        </tr>
        <tr>
            <th>ID</th>
            <th>Landlord</th>       
            <th>Manager</th>                    
            <th>Tenant</th>
        </tr>
        </thead>
        <tbody>
        
            ( removed for brevity )
            
        </tbody>
        <tfoot>
            <tr>
                <th>ID</th>
                <th>Landlord</th>       
                <th>Manager</th>                    
                <th>Tenant</th>
            </tr>
        </tfoot>
  </table>
                      
                      
Js /JQuery
----------
    // Init Plugin : Bootstrap Datatables :
    var dTblOverview = $('#OfficePropertyOverview').DataTable(
    {
          'paging'         : true,
          'lengthChange'   : true,
          'searching'      : true,
          'ordering'       : true,
          'info'           : true,
          'autoWidth'      : true,
          'orderCellsTop'  : false,
          
          'columnDefs'     : [
                {
                    "targets"    : [ 0 ],
                    "visible"    : false,
                    "searchable" : false
                },
                {
                    "targets"   : [ 1 ],
                    "visible"   : false
                }
          ]
      
    });
    
    
    

    // Add Multi-Column Filtering To DBOverview Datatable
    $('#OfficePropertyOverview thead tr#filterboxrow th').each(function (){

            var title = $('#OfficePropertyOverview thead tr#filterboxrow th').eq( $(this).index() ).text();
            
            $(this).html('<input type="text" class="form-control" placeholder="filter by ' + title + '" />')
                   .css('padding-left','4px');
    });

    



    
    // Apply the search :
    dTblOverview.columns().eq(0).each(function(colIdx)
    {
          $('input', dTblOverview.column(colIdx).header()).on('keyup change', function()
          {
              dTblOverview
                .column( $(this).parent().index()+':visible' )
                .search( this.value )
                .draw();        
          });
    });

colin

Hi @aCoradatatbl ,

I just knocked out this example, loosely based on your one, where there's the two headers, with the top row being the input cells. These cells allow multi-column searching, without affecting the multi-column ordering.

If I understand correctly, that's what you were trying to do. If I'm missing something, please let me know.

Cheers,

Colin

aCoradatatbl

Thanks @Colin just looking back at my old threads and saw this reply so sorry for v.v late response but sorted now.

Cheers
Ant