0
votes

Tableau de filtrage dépendant de plusieurs balises de sélection

J'utilise Jquery datatable et je souhaite utiliser plusieurs balises de sélection pour filtrer les datatable, mais je suis actuellement en mesure de filtrer en utilisant 1 balise de sélection. Une balise de sélection est pour une colonne et une autre balise de sélection est pour une autre colonne. Les deux balises de sélection doivent fonctionner dans les conditions "OU" et "ET" pour filtrer les données. Je partage un extrait de code. Veuillez fournir quelques suggestions pour que cela fonctionne.

HTML

<script>
var table = $('#example').DataTable({
  "bLengthChange": false,
  pageLength: 3,
  dom: 'tip'
});
  
$.fn.dataTable.ext.search.push(
    function( settings, data, dataIndex ) {        
        var filter= $("#cato option:selected").text().toUpperCase();
        var subCategory = String(data[2]).toUpperCase(); 
        if ( filter == subCategory )
            return true;
        else
            return false;
    }
);  
$('#cato').on('change', function() {
  table.draw()
});
</script>

Jquery

<select id="cato" class="form-control">
  <option disabled selected="true">-Select Category-</option>
  <option>Electronics</option>
  <option>Sports</option>
</select>

<select id="subo" class="form-control">
   <option disabled selected="true">-Select Subcategory-</option>
   <option>Laptop</option>
   <option>Mobile</option>
 </select>

<table id="example" class="table display">
  <thead>
    <tr>
      <th>Product</th>
      <th>Subcategory</th>
      <th>Category</th>
    </tr>
  </thead>
  <tbody id="r">
    <tr>
      <td>Samsung</td>
      <td>Mobile</td>
      <td>Electronics</td>
    </tr>
    <tr>
      <td>Racket</td>
      <td>Tennis</td>
      <td>Sports</td>
    </tr>
    <tr>
      <td>Bat</td>
      <td>Cricket</td>
      <td>Sports</td>
    </tr>
    <tr>
      <td>Dell</td>
      <td>Laptop</td>
      <td>Electronics</td>
    </tr>
    <tr>
      <td>Iphone</td>
      <td>Mobile</td>
      <td>Electronics</td>
    </tr>
    <tr>
      <td>Soccer Ball</td>
      <td>Soccer</td>
      <td>Sports</td>
    </tr>
  </tbody>
</table>

javascript jquery html

0 commentaires

3 Réponses :

0
votes

Vous pourriez peut-être utiliser le filtrage des colonnes Datatable: https://datatables.net /extensions/fixedheader/examples/options/columnFiltering.html

1 commentaires

Merci pour la réponse, mais j'utilise plusieurs balises de sélection et le filtrage de colonne ne fonctionnerait que pour une seule colonne

0
votes

Que diriez-vous de quelque chose comme ceci:

<link href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>

<select id="cato" class="form-control" >
  <option value="" disabled selected="true">-Select Category-</option>
  <option>Electronics</option>
  <option>Sports</option>
</select>

<select id="subo" class="form-control">
   <option value="" disabled selected="true">-Select Subcategory-</option>
   <option>Laptop</option>
   <option>Mobile</option>
</select>

<table id="example" class="table display">
  <thead>
    <tr>
      <th>Product</th>
      <th>Subcategory</th>
      <th>Category</th>
    </tr>
  </thead>
  <tbody id="r">
    <tr>
      <td>Samsung</td>
      <td>Mobile</td>
      <td>Electronics</td>
    </tr>
    <tr>
      <td>Racket</td>
      <td>Tennis</td>
      <td>Sports</td>
    </tr>
    <tr>
      <td>Bat</td>
      <td>Cricket</td>
      <td>Sports</td>
    </tr>
    <tr>
      <td>Dell</td>
      <td>Laptop</td>
      <td>Electronics</td>
    </tr>
    <tr>
      <td>Iphone</td>
      <td>Mobile</td>
      <td>Electronics</td>
    </tr>
    <tr>
      <td>Soccer Ball</td>
      <td>Soccer</td>
      <td>Sports</td>
    </tr>
  </tbody>
</table>

var table = $('#example').DataTable({
  "bLengthChange": false,
  //searching: false,
  pageLength: 2,
  dom: 'tip'
});
  
$.fn.dataTable.ext.search.push(
function( settings, data, dataIndex ) {
    
    var filterCategory= $("#cato option:selected").text().toUpperCase();
    var filterSubCategory= $("#subo option:selected").text().toUpperCase();
    var subCategory = String(data[1]).toUpperCase();
    var category = String(data[2]).toUpperCase();
    
    //console.log(filterSubCategory);
    
    if(filterSubCategory != "-SELECT SUBCATEGORY-") {
        if ( filterCategory == category && filterSubCategory == subCategory)
             return true;
        }
        else if(filterCategory != "-SELECT CATEGORY-") {
            if ( filterCategory == category)
             return true;
        }
  
        return false;
    }
);

$('#cato').on('change', function() {
  $('#subo').val("");
  table.draw();
});

$('#subo').on('change', function() {
  table.draw();
});

Bon codage!

5 commentaires

Merci pour votre réponse, mais si "Electronique" est sélectionné dans la balise de sélection 1, il devrait fonctionner en condition OU si quelque chose n'est pas sélectionné dans la balise de sélection 2. Toute l'électronique doit être affichée alors

Je suis désolé! Cette partie n'était pas claire pour moi. Donc, si je vous ai bien compris, le filtre n'appliquerait la condition AND que lorsque les deux contrôles de sélection ont une valeur, n'est-ce pas?

Oui. Si les deux sont sélectionnés alors AND fonctionnerait et si l'un des deux est sélectionné alors OR devrait fonctionner et Est-il nécessaire d'utiliser le bouton radio?

@Karthik, non du tout. Je suis désolé. Je l'ai fait parce que je ne savais pas comment appliquer les conditions OR et AND. Je viens de modifier mon exemple. Pourriez-vous y jeter un œil, s'il vous plaît?

Merci Mr Life Saver

0
votes

Si votre code fonctionne, ajoutez simplement l'autre filtre

function( settings, data, dataIndex ) {        
        var filterCato= $("#cato option:selected").text().toUpperCase();
        var filterSubo= $("#subo option:selected").text().toUpperCase();

        var category = String(data[2]).toUpperCase(); 
        var subCategory = String(data[1]).toUpperCase(); 
        
        if ( filterSubo == subCategory || filterCato==category )
            return true;
        else
            return false;
    }

0 commentaires