Individual search boxes

rubaoooo

Hello everyone!!!

I'm new here on the forum and here is the first place I registered as a user, so sorry for anything not done right at that time.

I have a question in individual search boxes. I was able, following the code below, to create and search for each column of my datatable, creating the individual search box:

initComplete: function () {
   var a = $('<tr class="filter"></tr>').appendTo($('#documentoTable thead'));

   this.api().columns().every(function () {
      var that = this;
      var e;

      e = $('<input type="text" class="form-control form-control-sm form-filter m-input" data-col-index="' + this.index() + '"/>')
         .keyup(function (ev) {
            if (that.search() !== this.value) {
               that.search(this.value, true).draw();
            }
      });

      $(e).appendTo($("<th>").appendTo(a));
});

However, due to the number of fields in my datatable, some columns went to the child row and the search boxes of these columns keep appearing in the datatable header. Since my datatable is responsive, I can't simply select which columns could fail to place the search boxes.

I've searched in many ways and nowhere got a way to know which column is like child row.

Could you help me with this question?

Thank you very much.
Rubens

ComGreed

I really can't recommend using responsive in conjunction with individual search boxes. I had the same issues + a few more when I used it on mobile devices. In the end I decided on disabling responsive and use scrollX instead. In my case it didn't make that much of a difference.

allan

Here is a little example of how to do it in the header: http://live.datatables.net/luziwafo/2/edit .

The key thing here is to be able to get the input element in event handler. You can't just use column().header() as that returns the cell for the sorting. So we need to use something slightly more complex:

var input = $('tr').eq(0).find('th').eq(idx).find('input');

Allan

allan

Oh - Colin just pointed out to me that Responsive doesn't remove the cells in the first row of the header. I'd forgotten about that - apologies. Responsive doesn't currently play nicely with multi-row headers or footers...!

Allan

colin

You can add this into the footer, see here - hopefully that would be acceptable.

colin

You can add it into the footer - see here. Hopefully that'll do the trick.

Colin

rubaoooo

Thanks for the answer. I need to maintain a stricter layout structure here on the page I'm working on. Couldn't use your example or colin's. But, I managed to solve here by adding the snippet below and then I can know, before building the search box, if the field is being displayed in column or if it is in the child row:

initComplete: function () {
   var a = $('<tr class="filter"></tr>').appendTo($('#documentoTable thead'));

   this.api().columns().every(function () {
      var that = this;
      var e;

      var columnDisplayed = "Y";

      $.each(this.header().attributes, function (index, attribute) {
         if (attribute.name == "style" && attribute.value == "width: 0px; display: none;") {
            columnDisplayed = "N";
         }
      });

      if (columnDisplayed == "Y") {
         e = $('<input type="text" class="form-control form-control-sm form-filter m-input" data-col-index="' + this.index() + '"/>')
            .keyup(function (ev) {
               if (that.search() !== this.value) {
                  that.search(this.value, true).draw();
               }
         });

         $(e).appendTo($("<th>").appendTo(a));
      }
   });
}

Thank you so much for your help.

Hugs!!!

rubaoooo