Tableaux de données jQuery : Retarder la recherche jusqu'à ce que 3 caractères aient été tapés OU qu'un bouton ait été cliqué

Question

Existe-t-il une option permettant de ne lancer la recherche qu'après avoir saisi 3 caractères ?

J'ai écrit un script PHP-script pour des collègues qui affichent 20 000 entrées et ils se plaignent que lorsque l'on tape un mot, les premières lettres provoquent un blocage.

Une autre solution consisterait à lancer la recherche en cliquant sur un bouton et non en tapant un caractère.

Voici mon code actuel :

$("#my_table").dataTable( {
        "bJQueryUI": true,
        "sPaginationType": "full_numbers",
        "bAutoWidth": false,
        "aoColumns": [
                /* qdatetime */   { "bSearchable": false },
                /* id */          null,
                /* name */        null,
                /* category */    null,
                /* appsversion */ null,
                /* osversion */   null,
                /* details */     { "bVisible": false },
                /* devinfo */     { "bVisible": false, "bSortable": false }
        ],
        "oLanguage": {
                "sProcessing":   "Wait please...",
                "sZeroRecords":  "No ids found.",
                "sInfo":         "Ids from _START_ to _END_ of _TOTAL_ total",
                "sInfoEmpty":    "Ids from 0 to 0 of 0 total",
                "sInfoFiltered": "(filtered from _MAX_ total)",
                "sInfoPostFix":  "",
                "sSearch":       "Search:",
                "sUrl":          "",
                "oPaginate": {
                        "sFirst":    "<<",
                        "sLast":     ">>",
                        "sNext":     ">",
                        "sPrevious": "<"
                },
                "sLengthMenu": 'Display <select>' +
                        '<option value="10">10</option>' +
                        '<option value="20">20</option>' +
                        '<option value="50">50</option>' +
                        '<option value="100">100</option>' +
                        '<option value="-1">all</option>' +
                        '</select> ids'
        }
} );

Answer 1

Solution pour la version 1.10 -

Après avoir cherché ici une réponse complète et ne l'avoir pas trouvée, j'ai écrit ceci (en utilisant le code de la documentation, et quelques réponses ici).

Le code ci-dessous permet de retarder la recherche jusqu'à ce qu'au moins 3 caractères soient saisis :

// Call datatables, and return the API to the variable for use in our code
// Binds datatables to all elements with a class of datatable
var dtable = $(".datatable").dataTable().api();

// Grab the datatables input box and alter how it is bound to events
$(".dataTables_filter input")
    .unbind() // Unbind previous default bindings
    .bind("input", function(e) { // Bind our desired behavior
        // If the length is 3 or more characters, or the user pressed ENTER, search
        if(this.value.length >= 3 || e.keyCode == 13) {
            // Call the API search function
            dtable.search(this.value).draw();
        }
        // Ensure we clear the search if they backspace far enough
        if(this.value == "") {
            dtable.search("").draw();
        }
        return;
    });

Answer 2

Note : Il s'agit d'une version beaucoup plus ancienne des tableaux de données. cette réponse pour les tables de données jQuery v1.10 et plus.

---

Cela modifiera le comportement de la boîte de saisie pour qu'elle ne filtre que si l'on a appuyé sur la touche "retour" ou si la recherche comporte au moins 3 caractères :

$(function(){
  var myTable=$('#myTable').dataTable();

  $('.dataTables_filter input')
    .unbind('keypress keyup')
    .bind('keypress keyup', function(e){
      if ($(this).val().length < 3 && e.keyCode != 13) return;
      myTable.fnFilter($(this).val());
    });
});

Vous pouvez le voir fonctionner ici : http://jsbin.com/umuvu4/2 . Je ne sais pas pourquoi les gens de dataTables se lient à la fois à keypress et à keyup, mais je les surcharge tous les deux pour rester compatible, même si je pense que keyup est suffisant.

J'espère que cela vous aidera !

Answer 3

Pourquoi ne pas essayer cette version étendue de la réponse de Stony :)

var searchWait = 0;
var searchWaitInterval;
$('.dataTables_filter input')
.unbind('keypress keyup')
.bind('keypress keyup', function(e){
    var item = $(this);
    searchWait = 0;
    if(!searchWaitInterval) searchWaitInterval = setInterval(function(){
        if(searchWait>=3){
            clearInterval(searchWaitInterval);
            searchWaitInterval = '';
            searchTerm = $(item).val();
            oTable.fnFilter(searchTerm);
            searchWait = 0;
        }
        searchWait++;
    },200);

});

Cela retardera la recherche jusqu'à ce que l'utilisateur ait cessé de taper.

J'espère que cela vous aidera.

Answer 4

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

var searchbox = $('#promogrid_filter input');
var pgrid = $('#promogrid').DataTable();

//Remove default datatable logic tied to these events
searchbox.unbind();

searchbox.bind('input', function (e) {
   if(this.value.length >= 3) {
      pgrid.search(this.value).draw();
   }
   if(this.value == '') {
      pgrid.search('').draw();
   }
   return;
});

Answer 5

Voici un script de type plugin qui étend les tables de données.

jQuery.fn.dataTableExt.oApi.fnSetFilteringEnterPress = function ( oSettings ) {
    var _that = this;

    this.each( function ( i ) {
        $.fn.dataTableExt.iApiIndex = i;
        var
            $this = this, 
            oTimerId = null, 
            sPreviousSearch = null,
            anControl = $( 'input', _that.fnSettings().aanFeatures.f );

            anControl
              .unbind( 'keyup' )
              .bind( 'keyup', function(e) {

              if ( anControl.val().length > 2 && e.keyCode == 13){
                _that.fnFilter( anControl.val() );
              }
        });

        return this;
    } );
    return this;
}

l'utilisation :

$('#table').dataTable().fnSetFilteringEnterPress();