Replies

• colin Posts: 15,240Questions: 1Answers: 2,599

  March 2019

  Hi @Massimo1974 ,

  There's an example of a range search here.

  Cheers,

  Colin
• Massimo1974 Posts: 27Questions: 2Answers: 0

  March 2019

  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 Posts: 15,240Questions: 1Answers: 2,599

  March 2019

  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 Posts: 27Questions: 2Answers: 0

  March 2019

  thanks Colin....
  I would like to put the filters in the second rows and make them work
  https://jsfiddle.net/ng45k1ja/2/
• colin Posts: 15,240Questions: 1Answers: 2,599

  March 2019

  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 Posts: 27Questions: 2Answers: 0

  March 2019

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