À l'aide d'une liste déroulante filtrer une table (tables de données)

Je suis en utilisant les tables de données du plugin jQuery (ce qui est totalement génial), mais je vais avoir du mal à obtenir mon tableau de filtre basé sur le changement de ma boîte de sélection.

Fonction:

  $(document).ready(function() {
      $("#msds-table").dataTable({
        "sPaginationType": "full_numbers",
        "bFilter": false
       });

      var oTable;
      oTable = $('#msds-table').dataTable();

      $('#msds-select').change( function() { 
            oTable.fnFilter( $(this).val() ); 
       });
   });

HTML:

  <table border="0" cellpadding="0" cellspacing="0" id="msds-table">
                    <thead>
                      <tr>
                        <th>Column 1</th>
                        <th>Column 2</th>
                        <th>etc</th>
                      </tr>
                    </thead>
                    <tbody>
                    <select id="#msds-select">
                    <option>All</option>
                    <option>Group 1</option>
                    <option>Group 2</option>
                    <option>Group 3</option>
                    <option>Group 4</option>
                    <option>Group 5</option>
                    <option>Group 6</option>
                    </select>
                    <tr class="odd">
                        <td>Group 1</td>
                        <td><img src="images/modules/download-icon.gif" width="12" height="17" alt="" /></td>
                        <td><a href="#">Download</a></td>
                    </tr>
                    <tr class="even">
                        <td>Group 1</td>
                        <td><img src="images/modules/download-icon.gif" width="12" height="17" alt="" /></td>
                        <td><a href="#">Download</a></td>
                    </tr>
                    <tr class="odd">
                        <td>Group 1</td>
                        <td><img src="images/modules/download-icon.gif" width="12" height="17" alt="" /></td>
                        <td><a href="#">Download</a></td>
                    </tr>
     </tbody>
 </table>

Table de passe pour afficher un tas d'éléments, jusqu'à "Groupe 6", mais vous voyez l'idée.
Quelqu'un a déjà tenté de le faire avant?

Pouvez-vous nous donner un peu plus d'informations sur ce que votre problème est? Ou pourriez-vous envoyer un peu de code de ce que vous avez essayé et ce qui ne fonctionne pas pour vous?
Retourner la clé de l'échec. Mise à jour w/ code.
Il m'a fallu environ une semaine pour obtenir ce travail pour moi. Je souhaite que j'avais encore accès à la source que j'ai utilisée. Fondamentalement, il y a un problème dans le code source que j'ai eu à aller dans et de changement. Malheureusement, le site web pour les tables de données n'était pas trop descriptive, quand il est venu à cette fonctionnalité. Je voudrais vérifier leurs forums, j'ai posté à ce sujet quelques fois là-bas.

OriginalL'auteur collin | 2011-08-12

11

dataTables caractéristiques

Je savais que je l'avais fait avant, et vous avez à regarder cette petite information:

Noter que si vous souhaitez utiliser le filtrage dans les tables de données cela doit rester
le "vrai" - pour supprimer le filtrage par défaut zone d'entrée et de conserver
le filtrage des capacités, veuillez utiliser
sDom.

vous avez besoin de ensemble {bFilter:true}, et déplacez votre <select></select> dans un élément personnalisé enregistré par le biais de sodome. Je peux deviner votre code devrait ressembler à ceci:
```
$(document).ready(function() {
      $("#msds-table").dataTable({
        "sPaginationType": "full_numbers",
        "bFilter": true,
        "sDom":"lrtip" //default is lfrtip, where the f is the filter
       });
      var oTable;
      oTable = $('#msds-table').dataTable();

      $('#msds-select').change( function() { 
            oTable.fnFilter( $(this).val() ); 
       });
   });
```
votre code pour oTable.fnFilter( $(this).val() ); aura pas de feu, tandis que les {bFilter:false}; selon la documentation

Ah, le filtre de sens, mais je ne peux toujours pas le faire du feu; Il faut que ce soit quelque chose avec le sDom pas? La documentation sur il n'est pas clair.
Ok, il suffit de lire sur le sDom. Votre code doit totalement le travail! Pas de dés. La seule autre chose que je peux penser de l'est où dans le code HTML de la <select> est-il situé?
Wow, juste regardé mon select id=#fs-sélectionner...je suis en attribuant à vendredi soir frit cerveau. Merci pour votre aide, a bientôt.
content d'avoir pu aider 😉 . que filtrage de l'information m'a surpris la première fois, et aspiré à trouver.

OriginalL'auteur DefyGravity

   $.extend( true, $.fn.dataTable.defaults, {
            "bFilter": true,
                initComplete: function () {
                    this.api().column(1).every( function () {
                        var column = this;
                        var select = $('<select><option value="">All Subjects</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>' )
                        } );
                    } );
                },
        } );

OriginalL'auteur Imran

Utiliser ce code:

 $('.btn-success').on('click',function (e) {
               //to prevent the form from submitting use e.preventDefault()
                e.preventDefault();
                var res = $("#userid").val();  
                var  sNewSource = "<?php echo base_url(); ?>myaccount/MyData_select?userid=" + res + "";
                var oSettings = ETable.fnSettings();
                oSettings.sAjaxSource  = sNewSource;
                ETable.fnDraw();
            });

OriginalL'auteur Sapna

Vous devez vous connecter pour publier un commentaire.