Как эхо/показать результат поиска в datatables?

Я создал javascript-код, который объединяет 3 типа ввода текста. , но как я могу показать значение в поисковых файлах данных? см. Это: Как эхо/показать результат поиска в datatables?

этот сценарий, где я объединяю 3 типа ввода.

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){ 
$(".form-control").change(function(){ 
    $("#filter").val($("#text_1-1").val() + " " + $("#text_1-2").val()+ " " +$("#text_1-22").val()); 

    var values = ""; 

    $("sas").each(function(i) { 
     values += (i > 0 ? "\n" : "") + this.value; 
    }); 
    $("textarea").val(values); 

}); 

});//]]> 
</script> 

<div class="form-group"> 
    <label class="control-label col-sm-2" for="name" >First Name:</label> 
    <div class="col-sm-2"> 
     <input type="text" class="form-control" id="text_1-1" name="fname" placeholder="" style="text-transform: capitalize;" required> 
    </div> 
    </div> 
    <div class="form-group"> 
    <label class="control-label col-sm-2">Middle Name:</label> 
    <div class="col-sm-2"> 
     <input type="text" class="form-control" id="text_1-2" name="mname" value="" style="text-transform: capitalize;" placeholder=""> 
    </div> 
    </div> 
    <div class="form-group"> 
    <label class="control-label col-sm-2">Last Name:</label> 
    <div class="col-sm-2"> 
     <input type="text" class="form-control" id="text_1-22" name="lname" style="text-transform: capitalize;" placeholder="" required> 
    </div> 
    </div>

тогда комбинация будет вставить здесь: (но, как он будет идти к поисковым DataTables?)

<input type="text" class="form-control" class="sas" id="filter" style="text-transform: capitalize;" placeholder="" required>

вот мой DataTables подход:

<link type="text/css" rel="stylesheet" href="media/css/jquery.dataTables.min.css"> 
<link type="text/css" rel="stylesheet" href="media/css/jquery.dataTables_themeroller"> 
<script type="text/javascript" src="media/js/jquery.js"></script> 
<script type="text/javascript" src="media/js/jquery.dataTables.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $('#datatables').dataTable({ 
     "scrollY":  "300px", 
     "scrollCollapse": true, 
     "paging":   false 
    }); 
}); 
</script> 
<title>Datatable</title> 
</head> 
<body> 
<table id="datatables" class="display"> 
    <thead> 
    <tr> 
     <th>first name</th> 
     <th>middle name</th> 
     <th>last name</th> 
    </tr> 
    </thead> 
    <tbody> 
    <?php 
     while($row = mysqli_fetch_array($query)){ 
    ?> 
     <tr> 
      <td><?php echo $row['fname']; ?></td> 
      <td><?php echo $row['mname']; ?></td> 
      <td><?php echo $row['lname']; ?></td> 
     </tr> 
    <?php 
     } 
    ?> 
    </tbody> 
</table>

цель: это система автоматически будет искать имена в данных при заполнении типа ввода (fname, mname, lname)

источник

2015-10-08 kim de castro

Просьба указать код инициализации данных. – markpsmith

@markpsmith Я добавил его. надеюсь, вы можете мне помочь. спасибо –

Вы уверены, что это правильный стол? Заголовки столбцов совершенно разные – markpsmith

РЕШЕНИЕ

Вы можете использовать search() метод API.

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

$(".form-control").on('keyup change', function() { 
    var query = $("#text_1-1").val() + " " + $("#text_1-2").val() + " " + $("#text_1-22").val(); 

    table.search(query).draw(false); 
});

DEMO

См this jsFiddle для кода и демонстрации.

источник

2015-10-08 15:00:20

Очень полезный код! еще раз спасибо. Работает!! =) –

@kimdecastro, убедитесь, что вы используете 'DataTables()' not 'dataTables()' для инициализации кода для использования 'table.search (query) .draw (false);'. В противном случае вы можете использовать '$ ('# example'). DataTable(). Search (query) .draw (false);' для поиска, где 'example' - ваш идентификатор таблицы. –

спасибо, сэр отметил. знак равно –

Как эхо/показать результат поиска в datatables?

ответ

Смежные вопросы