2016-08-17 11 views
0

Ich habe Datentabelle für eine Tabelle verwendet.Datatable Suche das angeklickte Element

$('#tableid').dataTable({ 
    "aLengthMenu": [ 
    [2, 5, 7, -1], 
    [2, 5, 7, "All"] 
    ], 
    "iDisplayLength": 5 
}); 

und ich, wenn auf beliebiges Element div I der Wert des div-Elements wollen im datatable.e.g gesucht werden.

<div id="search> 
    <a href="">this</a> 
</div> 

Wenn ich darauf klicke, wird 'dies' in der Tabelle gesucht. Wie kann das erreicht werden?

$(document).on('click','#search',function(e) 
{ 
    e.preventDefault(); 
    var search=$('#search').val(); 

} 
+0

zur Suche Was ist die Datentabellen-Version, die Sie verwenden? –

+0

Version1.10.12 ist es. @ palasn – Steve

Antwort

1

Verwenden search() Funktion für Datentabelle manuell

<script> 
     var table = $('#tableid').dataTable({ 
      "aLengthMenu": [ 
      [2, 5, 7, -1], 
      [2, 5, 7, "All"] 
      ], 
      "iDisplayLength": 5 
     }); 

$(document).on('click','#search',function(e) 
    { 
     e.preventDefault(); 
     var search =$('#search').text(); 
     table.search(search).draw(); 
    } 
</script> 

    <div id="search> 

    </div> 
+0

:) davidkonrad (von dir lernen) –

+0

es gibt mir einen Fehler. table.search ist keine Funktion. – Steve

+1

@Steve, weil Sie mit 'dataTable()' initialisiert haben, verwenden Sie 'DataTable()' stattdessen - wenn Sie das jQuery-Objekt _need_ verwenden, können Sie 'table.api(). Search()' ... – davidkonrad

1
<script type="text/javascript"> 
    $(document).ready(function() { 
     var table = $('#example').DataTable({// or .dataTable({ for version under 1.10 
      "aLengthMenu": [ 
       [2, 5, 7, -1], 
       [2, 5, 7, "All"] 
      ], 
      "iDisplayLength": 5 
     }); 
     // it is more efficient to bind the click event not on body rather only on the needed elements 
     // you can use class name for selector if you want to use it on more divs 
     $('.search').click(function(e) 
     { 
      e.preventDefault(); 
      // you need to trim the given value because it can contain whitespace characters which can result false filtering 
      var search = $.trim($(this).text()); 
      table.search(search).draw(); 
     }); 
    }); 
</script> 
<div class="search"> 
    <a href="#">this</a> 
</div> 
<div class="search"> 
    <a href="#">that</a> 
</div> 
Verwandte Themen