web-dev-qa-db-fra.com

recherche globale sur les touches de la touche Entrée au lieu de n'importe quelle touche

J'utilise Datatables plugin de jQuery. J'utilise la fonctionnalité de traitement côté serveur pour mon projet ASP.Net.

C'est frustrant lorsque chaque fois que j'essaye de taper quelque chose dans la recherche globale, avec chaque lettre que je tape, elle appelle la méthode côté serveur et apporte le résultat pour moi.

Cela devient plus frustrant lorsque les données à filtrer sont volumineuses.

Existe-t-il une option ou un moyen d'appeler la méthode de recherche en appuyant sur la touche Entrée et non sur une touche quelconque?

jquerysearchdatatables
21
Prasad Jadhav

Que faire est de simplement délier le gestionnaire d'événements Keypress que DataTables place dans la zone de saisie, puis ajoutez le vôtre qui appellera fnFilter lorsque la touche de retour (keyCode 13) est détectée.

$("div.dataTables_filter input").keyup( function (e) {
    if (e.keyCode == 13) {
        oTable.fnFilter( this.value );
    }
} );

Else

$(document).ready(function() {
   var oTable = $('#test').dataTable( {
                    "bPaginate": true,
                "bLengthChange": true,
                "bFilter": true,
                "bSort": true,
                "bInfo": true,
                    "bAutoWidth": true } );
   $('#test_filter input').unbind();
   $('#test_filter input').bind('keyup', function(e) {
       if(e.keyCode == 13) {
        oTable.fnFilter(this.value);   
    }
   });     
} );
21
Techie

J'ai aussi essayé le code de Techie. Bien sûr, j'ai également reçu le message d'erreur fnFilter is not a function. En fait, remplacer la ligne oTable.fnFilter(this.value); par oTable.search( this.value ).draw(); ferait l'affaire, mais dans mon cas, les fonctions de dissociation/liaison ont été exécutées avant l'initialisation de ma table recherchée côté serveur. Par conséquent, j'ai mis les fonctions unbind/bind dans la fonction de rappel initComplete, et tout fonctionne bien:

$(document).ready(function() {
    var oTable = $('#test').dataTable( {
        "...": "...",
        "initComplete": function(settings, json) {
            $('#test_filter input').unbind();
            $('#test_filter input').bind('keyup', function(e) {
                if(e.keyCode == 13) {
                    oTable.search( this.value ).draw();
                }
            }); 
        }
    });    
});
22
Jan

Je finis par le faire dans Datatables (v1.10.15). J'empêche également le retour arrière et le bouton Supprimer d'envoyer une demande de recherche si l'entrée est vide.

$.extend( $.fn.dataTable.defaults, {
    "initComplete": function(settings, json) {
        var textBox = $('#datatable_filter label input');
        textBox.unbind();
        textBox.bind('keyup input', function(e) {
            if(e.keyCode == 8 && !textBox.val() || e.keyCode == 46 && !textBox.val()) {
                // do nothing ¯\_(ツ)_/¯
            } else if(e.keyCode == 13 || !textBox.val()) {
                table.search(this.value).draw();
            }
        }); 
    }
});
5
Abdalla Arbab

Voici comment le gérer avec le changement d'api dans la version 1.10

    //prevents form submissions if press ENTER in textbox
    $(window).keydown(function (event) {
        if (event.keyCode == 13) {
            event.preventDefault();
            return false;
        }
    });

    var searchbox = $('#ordergrid_filter input');
    searchbox.unbind();
    searchbox.bind('keyup', function (e) {
        if (e.keyCode == 13) {
            ogrid.search(this.value).draw();
        }
    });

    var uitool = '';
    searchbox.on("mousedown", function () {
        uitool = 'mouse';
    });
    searchbox.on("keydown", function () {
        uitool = 'keyboard';
    });

    //Reset the search if the "x" is pressed in the filter box
    searchbox.bind('input', function () {
        if ((this.value == "") && (ogrid.search() != '') && (uitool == 'mouse')) {
            ogrid.search('').draw();
            return;
        }
    });
4
Chad Kuehn

Voici comment j'ai réussi à le faire:

$(document).on('focus', '.dataTables_filter input', function() {

    $(this).unbind().bind('keyup', function(e) {
        if(e.keyCode === 13) {
            oTable.search( this.value ).draw();
        }
    });

});
3
K. Igor

Enfin, il a fonctionné de cette façon

var oTable = $('#table-name').dataTable({
    processing: true,
    serverSide: true,
    ajax: "file.json",
    initComplete: function() {
        $('#table-name_filter input').unbind();
        $('#table-name_filter input').bind('keyup', function(e) {
            if(e.keyCode == 13) {
                oTable.fnFilter(this.value);
            }
        });
    },
    ....

À votre santé

0
Jaume Bosch

Vous pouvez utiliser avec jQuery.

// get the global text
var globalSearch = $("#txtGlobal").val();

// then put them in the search textboxes
$("input[type='search']").val(globalSearch);
// trigger keyup event on the datatables
$("input[type='search']").trigger("keyup.DT");

$("input[type='search']") obtiendra toutes les zones de texte de recherche.

0
spikee

Voilà le code ci-dessous Cela fonctionne si bien!

$(function() {

            var  table = $('#DataTable1').DataTable({
                 proccessing: true,
                 searching: true,
                 paging: true,
                 serverSide: true,
                 initComplete: function() {
                     $('.dataTables_filter input').unbind();
                     $('.dataTables_filter input').bind('keyup', function(e){
                         var code = e.keyCode || e.which;
                         if (code == 13) { 
                             table.search(this.value).draw();
                         }
                     });
                 },
                 ajax: {
                    url: '@Url.Action("Paginacao")',
                    type: 'POST' 
                },
                language: {
                    url: '/plugins/datatables/lang/Portuguese-Brasil.json'
                },
                columns:
                [
                        { "data": "id", visible: false },
                        { "data": "nome", "autoWidth": true },
                        { "data": "cnpj", "autoWidth": true },
                    {
                        "render": function(data, type, full, meta) {
                            return '<a [email protected]("Editar", "Usuario")?id='+full.id+'><b><i class=\"fa fa-edit bigfonts\"></i> Editar</b></a>';
                        }
                    }
                ]
            });

        });
0
Marinpietri