Question

我希望我的页面最初只带有一个搜索框，然后在有人开始搜索时即显示该表格。

我的示例表如下：

<script>
    $(document).ready(function() {
        $('#example').DataTable( {
            responsive: true
        } );
    } );
</script>

<table id="example" class="display" style="width:100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Description</th>
            <th class="none">Branch</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Test 1</td>
            <td>Test test test</td>
            <td>ABC</td>
        </tr>
        <tr>
            <td>Test 2</td>
            <td>Test test test</td>
            <td>DEF</td>
        </tr>
        <tr>
            <td>Test 3</td>
            <td>Test test test</td>
            <td>GHI</td>
        </tr>          
    </tbody>    
</table>

Answer 1

是的，可以使用ajax调用来完成，我想您使用的是php。例如，您可以在每次按任意字符，用结果填充表或使用按钮搜索在输入字段中键入的关键字时生成表。 ajax和php的示例：

var search_string = $('#id_of_the_input_box').val();
$.ajax({
    url:"php_file.php",
    method:"POST",
    data:{action:action},
    dataType:"json",
    success:function(data){
    console.log(data);
}

和使用PDO的php代码

$search_string = $_POST["string"];
$result = '';
$query = $connection->prepare(" select * from table where name = '%".search_string."' ";
$query->execute();
$query_results->query->fetchAll;
if($query->rowCount() > 0) {
   $result = '
         <script>
            $(document).ready(function() {
               $('#example').DataTable( {
                  responsive: true
               });
            });
            <table id="example" class="display" style="width:100%">
              YOUR TABLE ROWS HERE
            </table>
   ';

   // foreach loop to populate the table example
   foreach ($query_results as $row) {
        $result.= '
            <tr>
              <td>'.$row["table_column_name_1"].'</td>
              <td>'.$row["table_column_name_1"].'</td>
              <td>'.$row["table_column_name_1"].'</td>
              <td>'.$row["table_column_name_1"].'</td>
        '
   } else {
            echo "No results";
          }
}

// echo the generated table as ajax response
echo $result;

希望您在这个示例中明白了这个主意。

Datables-隐藏数据直到搜索

1 个答案: