web-dev-qa-db-fra.com

Tables de données jquery du filtre déroulant

Voici mon code:

$(document).ready(function() {
    /* Initialise the DataTable */
    var oTable = $('#example').dataTable({
        "oLanguage": {
            "sSearch": "Search all columns:"
        },
        "iDisplayLength": 10,
        "bJQueryUI": true,
        "sPaginationType": "full_numbers",
        "bFilter": true,
    }); 

    /* Add a select menu for each TH element in the table footer */
    $("thead th").each( function ( i ) {
        this.innerHTML = fnCreateSelect( oTable.fnGetColumnData(i) );
        $('select', this).change( function () {
            oTable.fnFilter( $(this).val(), i );
        } );
    } );        
} );

J'utilise le plugin jquery datatables, son fonctionnement parfaitement comme cet exemple:

http://www.datatables.net/release-datatables/examples/api/multi_filter_select.html

Ce que je voudrais faire, c'est plutôt que d'avoir une liste déroulante pour chaque colonne, je voudrais une liste déroulante uniquement sur une colonne spécifique.

Donc je suppose que je dois changer:

$("thead th").each( function ( i ) {

Mais je ne sais pas quoi mettre. Toute aide serait très appréciée, merci d'avance.

jquerydatatables
18
Codded

Si vous avez besoin d'une seule colonne, vous pouvez le faire

var indexOfMyCol = 2;//you want it on the third column
$("thead th").each( function ( i ) {
    if(i === indexOfMyCol){ 
      this.innerHTML = fnCreateSelect( oTable.fnGetColumnData(i) );
      $('select', this).change( function () {
        oTable.fnFilter( $(this).val(), i );
      } );
    }
} );
10
Nicola Peluchetti

Vous pouvez également créer votre propre liste de sélection et la positionner où bon vous semble en dehors du tableau.

<select id="mySelect">
    <option value=""></option>
    <option value="1">1</option>
    ...
</select>

<script>
    $('#mySelect').on('change',function(){
        var selectedValue = $(this).val();
        oTable.fnFilter("^"+selectedValue+"$", 0, true); //Exact value, column, reg
    });
<script>
20
crashtestxxx

Peut-être que les temps ont changé, mais sans plugin et en utilisant dataTables1.10.12et son @api, en tant que personne dans les commentaires suggérés, vous pouvez utiliser l'entier d'index de base zéro d'un tableau pour la table correspondante. Exemple de code, les bits importants sont en ligne 2 au dessous de. Je cherche juste sur la 4ème colonne, et ceci est écrit mais vous avez l'idée.

    $('#example').DataTable initComplete: ->
                    @api().columns([3]).every ->
                            column = this
                            select = $('<select><option value="">Sort Column(All)</option></select>').appendTo($(column.header()).empty()).on('change', ->
                                    val = $.fn.dataTable.util.escapeRegex($(this).val())
                                    column.search(val ? '^'+val+'$' : '', true, false).draw()
                                    return
                            )
                            column.data().unique().sort().each (d, j) ->
                                    select.append '<option value="' + d + '">' + d + '</option>'
                                    return
                            return
                    return
3
pjammer

Vous pouvez utiliser le filtre de colonne des tables de dates voir http://jquery-datatables-column-filter.googlecode.com/svn/trunk/customFilters.html

Il s'agit d'un plugin de deuxième niveau pour les tables de données.

Jovan

2
Jovan MSFT

Vous pouvez utiliser le plugin columnfilter ...

$(document).ready(function(){
     $('#example').dataTable()
          .columnFilter({
            aoColumns: [ { type: "select", values: [ 'Gecko', 'Trident', 'KHTML', 'Misc', 'Presto', 'Webkit', 'Tasman']  },
                     { type: "text" },
                     null,
                     { type: "number" },
             { type: "select" }
                ]

        });
});
2
shanmugavel

Je pense que quelque chose comme le suivant pourrait faire l'affaire

$("thead th").each( function ( i ) {
    if(i==1)
    {
        this.innerHTML = fnCreateSelect( oTable.fnGetColumnData(i) );
        $('select', this).change( function () {
            oTable.fnFilter( $(this).val(), i );
        } ); 
    }
} );
1
Amritpal Singh