Rimuovi la ricerca automatica dalla casella di testo e cerca sul pulsante di ricerca

Question

Sto usando i dati jQuery e sto cercando di capire come avere la mia ricerca da un "pulsante di ricerca" e non automaticamente dalla casella di testo.

Sto scrivendo un'applicazione a una sola pagina in modo che ci siano più di un pulsante di invio che rende questo difficile perché voglio solo che cerchi da quel pulsante di ricerca specifico e non su Invia per attivare gli altri pulsanti di invio.

L'ho cercato su google e nessuno dei risultati ha avuto esito positivo. Come si acquisisce il valore dall'input quando si invia il pulsante di ricerca per regolare correttamente il datatable.

Quindi voglio che il pulsante di ricerca cambi il testo per uscire dalla ricerca per riportare il datatable allo stato normale come se dovessi eliminare il testo dalla casella di testo. Qualsiasi aiuto con questo sarebbe molto apprezzato.

JS

// Search Mode allows to search tables 
    $("#Search").on("click",function(){ 
     $("#ItemID").prop("disabled", false); 
     $("#ESearch").show(); 
     $("#Search").hide(); 

     // Allows ItemID to search through database 
     $('#ItemID').keyup(function(){ 
     oTable.search($(this).val()).draw() ; 
     }); 

    }); 

    // Exit out of EXIT SEARCH mode 
    $("#ESearch").on("click",function(){ 
     $("#ItemID").val(""); 
     $("#ItemID").prop("disabled", true); 
     $("#Search").show(); 
     $("#ESearch").hide(); 
    }); 

HTML

<input type="text" class="form-control" name="ItemID" id="ItemID" maxlength="15"> 
<span class="input-group-btn"> 
<button type="button" class="btn btn-default" id="Search">SEARCH</button> 
<button style="display:none;" type="button" class="btn btn-default" id="ESearch">EXIT SEARCH</button> 
</span> 

Answer 1

non c'è alcun motivo per l'aggiunta di una nuova ricerca <input>, è possibile riutilizzare il default. Il codice seguente ripristina la ricerca/filtraggio di default che accade quando si digita la casella predefinita <input>, quindi si aggiungono due pulsanti che eseguono/cancellano la ricerca/il filtro al clic.

var table = $('#example').DataTable({ 
    initComplete : function() { 
     var input = $('.dataTables_filter input').unbind(), 
      self = this.api(), 
      $searchButton = $('<button>') 
         .text('search') 
         .click(function() { 
          self.search(input.val()).draw(); 
         }), 
      $clearButton = $('<button>') 
         .text('clear') 
         .click(function() { 
          input.val(''); 
          $searchButton.click(); 
         }) 
     $('.dataTables_filter').append($searchButton, $clearButton); 
    }    
}) 

demo ->http://jsfiddle.net/zuv05qbj/

Answer 2

E come con davids risposta sorprendente, si può anche associare il tasto ENTER per eseguire la ricerca e, invocando l'evento pulsante di ricerca clicca quando viene premuto:

initComplete : function() { 
    var self = this.api(); 
    var filter_input = $('#'+settings.nTableWrapper.id+' .dataTables_filter input').unbind(); 
    var search_button = $('<button type="button">Search</button>').click(function() { 
     self.search(filter_input.val()).draw(); 
    }); 
    var clear_button = $('<button type="button">Clear</button>').click(function() { 
     filter_input.val(''); 
     search_button.click(); 
    }); 

    $(document).keypress(function (event) { 
     if (event.which == 13) { 
      search_button.click(); 
     } 
    }); 

    $('#'+settings.nTableWrapper.id+' .dataTables_filter').append(search_button, clear_button); 
} 

funziona se si dispone di più DataTable nella pagina troppo :) (si noti l'uso di settings.nTableWrapper.id)