jQuery Datatables : colonne Individuelle de la recherche sur l'en-tête du tableau

J'ai suivi la procédure sur Colonne individuelle de la recherche (texte entrées) et Colonne individuelle de la recherche (sélectionner l'entrée) à utiliser plusieurs filtres sur jQuery Datatables et il y a plusieurs filtres sur le pied de page. D'autre part, je veux déplacer ces filtres à l'en-tête de la Table de données, mais ne peut pas les aligner à l'horizontale comme indiqué sur l'image ci-dessous. Il y a quelques exemples comme Filtrage personnalisé de gamme recherche, mais ils ne sont pas alignées ainsi. Est-il possible de faire cela?

$(document).ready(function() {
    //Setup - add a text input to each footer cell
    $('#example tfoot th').each( function () {
        var title = $(this).text();
        $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
    } );

    //DataTable
    var table = $('#example').DataTable();

    //Apply the search
    table.columns().every( function () {
        var that = this;

        $( 'input', this.footer() ).on( 'keyup change', function () {
            if ( that.search() !== this.value ) {
                that
                    .search( this.value )
                    .draw();
            }
        } );
    } );
} );

Comme vous êtes un vrai maître de la DataTable, pourriez-vous s'il vous plaît aider moi aboutthis problème? Merci à l'avance...
oui, on peut déplacer ce filtre vers le haut...

InformationsquelleAutor Jack | 2016-11-13

18

Ici solution à votre problème, s'il vous plaît ajouter des choses nécessaires datatable configuration.

De la colonne de filtre est déplacé à partir d'un pied de page en-tête de tableau en utilisant le CSS, c'est à dire, simplement en utilisant
```
<style>
tfoot {
     display: table-header-group;
}
</style>
```
https://jsfiddle.net/dipakthoke07/ehhfsrfq/2/

Espère que cela vous aidera.
- Eastwood u r résoudre le problème ou pas ??
- Désolé, je m'occupais d'un autre problème et juste essayé la solution que vous avez posté. La recherche des entrées sont situées sur la tête, mais la recherche de paramètre (sSearch) est passé comme valeur null pour le Contrôleur alors qu'il peut être transmis par la boîte de Recherche. En plus de cela lors de la saisie d'une seule lettre sur n'importe quel champ de recherche sur l'en-tête (à l'exception de celui par défaut) la méthode du Contrôleur est appelé 8-9 fois alors qu'il est appelé qu'une seule fois lors de la saisie d'une seule lettre sur la boîte de recherche par défaut. Une idée?
- Pourriez-vous s'il vous plaît avoir un oeil à où le problème et de me préciser comment résoudre le problème? Merci et a voté+
- datatables.net/plug-ins/api/fnFilterOnReturn essayez cela, il va vous aider à
- Merci mais le problème est beaucoup plus liée à des paramètres d'envoi plutôt que lors du départ à la recherche. Une idée?
- Je suis à l'aide de cette solution, mais tous les champs de recherche sont les mêmes - mal - largeur. Comment puis-je ajuster les largeurs de sorte qu'ils simplement correspondre les largeurs de colonne?
- pouvez vous s'il vous plaît joindre violon lien de votre mise en œuvre, afin que je puisse vous aider??
- C'était un simple correctif "autowidth: true"
InformationsquelleAutor Dipak Thoke

Ici la solution pour chaque colonne de la recherche dans la Table de données.
il est également utiliser pour plusieurs valeurs de ligne de recherche en utilisant les regex :

JS:

$('#' + tableId + ' thead tr').clone(true).appendTo('#' + tableId + ' thead');
    $('#' + tableId + ' thead tr:eq(1) th').each(function (i) { //Creating Clone Header for Filter TextBox
        var title = $(this).text();
        if (excludeTitle.indexOf(title.trim()) == -1) { //check table column header to add filter textBox
            $(this).html('<input type="text" id="col' + i + '_filter" class="ClearFilters" placeholder="Search ' + title + '" />');
            $('input', this).on('keyup change', function () {
                if (table.column(i).search() !== this.value) { 
  var sp1 = this.value;
 var regex_check = null;
try { regex_check = new RegExp(sp1);}
  catch (error) { alert('Search parameter is not in correct format.'); return false; }
                    table.column(i).search(sp1, true).draw();
                }
            });
        }
        else {
            $(this).html('');
        }
    });

InformationsquelleAutor satya prakash

0

Vous pouvez essayer ce plug-in de DataTables, on dirait qu'elle correspond à la fin, bien que l'interface est un peu différent de ce que vous avez besoin.

InformationsquelleAutor Curr195

Vous devez vous connecter pour publier un commentaire.