Column search not working in responsive view

m10n

I'm creating a table with fixed-header column search that ideally works as well on mobile as it does desktop. The problems are that on a mobile view 1. clicking in a search box either freezes the browser or, if it allows text input, does not render any results as it does on desktop view and 2. makes the search boxes visible for all columns in the row, despite the responsive row-collapse working properly, which messes up the rest of the mobile UI.

I haven't had success playing with things like responsive.recalc(), but I'm also not very good with js/jquery. A screenshot of the mobile view is attached. Here is a live example: m10n.github.io/talenttracker/ and a jsfiddle: https://jsfiddle.net/m10n/dw1wxeoo/1/ (the datatables live page is down)

Here is my code:

    $(document).ready( function () { 
    $('#tracker thead tr:eq(1) th').each( function () {
      var title = $('#tracker thead tr:eq(0) th').eq( $(this).index() ).text();
      $(this).html( '<input type="text" class="form-control" placeholder="Search" />' );
    } ); 

    var table = $('#tracker').DataTable({
      orderCellsTop: true,
      fixedHeader: true,
      responsive: true,
      "paging": false
    });

    table.columns().every(function (index) {
      $('#tracker thead tr:eq(1) th:eq(' + index + ') input').on('keyup change', function () {
        table.column($(this).parent().index() + ':visible')
        .search(this.value)
        .draw();
      });
    });
  });

Thank you in advance. I'd happily purchase a support package but this is my only problem and it seems like something that should just work.

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

Hi,

Thanks for the link. There appears to be a few issues that was causing it not to work:

1. Unfortunately, at the moment Responsive does not support "complex" headers (i.e. more than one row).
2. The Javascript loading order wasn't working - jQuery was being loaded last for example
3. The HTML is not valid - there is a tbody being closed by t a thead. There are also two opening tbody tags - multiple tbody elements are not supported by DataTables at this time I'm afraid.
4. The table needs width="100%" or style="width:100%" to be able to reflow correctly
5. Don't use a Bootstrap table-responsive container. It just overflows and means DataTables' own Responsive won't work.

This is a modification that appears to work on mobile - however, as I say, it doesn't support multiple header rows, so the functionality isn't identical I'm afraid.

Allan

DevilMKS182022

The search works fine for all the columns but for a certain column it isn't working, where none of the columns have been disabled. I have 9 columns the search works for all except for one that column contains only string and have not been disabled. could you please help rectify.

allan

Please post a link to a page showing the issue.

Allan