Custom search

Massimo1974

I'm making the filters for customized column I have columns 7 and 8 that work with select, columns 9 and 10 that work with text, columns 11 and 12 that are numerical so I need the range min and max.
otherwise I was thinking of duplicate header and put a multiselect check. can someone advise me something already working?

"initComplete": function () {
                  //COLONNE CON SELECT
                  this.api().columns([7,8]).every( function () {
                      var column = this;
                      var select = $('<select><option value="" selected>Seleziona </option></select>')
                          .appendTo( $(column.header()).empty() )
                          .on( 'change', function () {
                              var val = $.fn.dataTable.util.escapeRegex(
                                  $(this).val()
                              );
                              column
                                  .search( val ? '^'+val+'$' : '', true, false )
                                  .draw();
                          } );
                      column.data().unique().sort().each( function ( d, j ) {
                          select.append( '<option value="'+d+'">'+d+'</option>' );
                      });
                  });
                  //COLONNE RICERCA TESTO
                  this.api().columns([9,10]).every( function () {
                     
                  });
                  //COLONNE MIN E MAX RANGE
                  this.api().columns([11,12]).every( function () {
                     
                  });
              },

colin

Hi @Massimo1974 ,

There's an example of a range search here.

Cheers,

Colin

Massimo1974

I realized this but for the research and 1 ° does not work very well .... then I would like to put it below in a second header line
<thead>
<tr>
<td>name</td>
<td>age</td>
</tr>
</thead>
<tr id="forFilters">
<td></td>
<td></td>
</tr>
<thead>
</thead>

     "initComplete": function () {
       count = 0;
       this.api().columns([7,8,9,10]).every( function () {
         console.log(this);
             var title = this.header();
             title = $(title).html().replace(/[\W]/g, '-');
             var column = this;
             var select = $('<div class="dropdown-container"><div class="dropdown-button noselect"><div class="dropdown-label">'+title+'</div><div class="dropdown-quantity">(<span class="quantity">Tutti</span>)</div><i class="fa fa-filter"></i></div><div class="dropdown-list" style="display: none;"><input type="search" placeholder="Cerca "'+title+' class="dropdown-search"/><ul class="nobull" id="'+title+'"></ul></div>')
                 .appendTo( $(column.header()).empty() )
                 .on('click', '.dropdown-button', function() {
                        $(this).siblings('.dropdown-list').toggle();
                    })
                    .on('input', '.dropdown-search', function() {
                        var target = $(this);
                        var dropdownList = target.closest('.dropdown-list');
                        var search = target.val().toLowerCase();

                        if (!search) {
                            dropdownList.find('li').show();
                            return false;
                        }
                        dropdownList.find('li').each(function() {
                            var text = $(this).text().toLowerCase();
                            var match = text.indexOf(search) > -1;
                            $(this).toggle(match);
                        });
                    })
                    .on('change', '[type="checkbox"]', function() {
                        var container = $(this).closest('.dropdown-container');
                        var numChecked = container. find('[type="checkbox"]:checked').length;
                        container.find('.quantity').text(numChecked || 'Tutti');
                    });
            column.data().unique().sort().each(function(d,j) {
               var liTemplate =
                    '<li>' +
                        '<input name="'+d+'" type="checkbox">' +
                        '<label for="'+d+'">'+d+'</label>' +
                    '</li>'

                $('#'+title).append(liTemplate);
             });

colin

Hi @Massimo1974 ,

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

Massimo1974

thanks Colin....
I would like to put the filters in the second rows and make them work
https://jsfiddle.net/ng45k1ja/2/

colin

Thanks for that. I can't see where you've attempted to put that range search though that I linked to in my first reply.

Massimo1974

on the first rows (head) click Name(Tutti)