Javascript 如何在搜索数据表中回显/显示结果？_Javascript_Datatables

Javascript 如何在搜索数据表中回显/显示结果？

javascript datatables

Javascript 如何在搜索数据表中回显/显示结果？,javascript,datatables,Javascript,Datatables,我创建了一个javascript代码，它结合了3种输入类型的文本。但是如何在搜索数据表中显示值呢？见此：这是我组合3种输入类型的脚本 <script type='text/javascript'>//<![CDATA[ $(window).load(function(){ $(".form-control").change(function(){ $("#filter").val($("#text_1-1").val() + " " + $("#text_1-2"

我创建了一个javascript代码，它结合了3种输入类型的文本。但是如何在搜索数据表中显示值呢？见此：

这是我组合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>

//0？“\n”：“）+此值；
});
$（“textarea”）.val（值）；
});
});//]]> 
名字：
中名：
姓氏：

然后将组合粘贴到这里：（但它将如何进入搜索数据表？）

以下是我的数据表方法：

<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>


$（文档）.ready（函数（）{
$（'#datatables'）。dataTable({
“滚动”：“300px”，
“卷轴崩溃”：没错，
“分页”：false
});
});
数据表
名字
中名
姓

用途：填写输入类型（fname、MNName、lname）时，此系统将自动搜索数据表中的名称

解决方案

您可以使用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);
});

演示

有关代码和演示，请参阅

解决方案

您可以使用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);
});

演示

有关代码和演示，请参见。

请显示您的datatables初始化代码。@markpsmith我添加了它。希望你能帮助我。谢谢你确定那张桌子对吗？列标题完全相同different@markpsmith编辑。请检查一下。请显示您的datatables初始化代码。@markpsmith我添加了它。希望你能帮助我。谢谢你确定那张桌子对吗？列标题完全相同different@markpsmith编辑。请检查。@kimdecastro，确保您使用的是

DataTables（）

而不是

DataTables（）

来初始化代码以使用

table.search（query）.draw（false）。否则，您可以使用$（'#示例'）.DataTable（）.search（query）.draw（false）
搜索示例
是您的表ID的位置。@kimdecastro，确保您使用的是DataTables（）
而不是DataTables（）
来初始化代码，以使用表。搜索（查询）。绘制（false）。否则，您可以使用$（'#示例'）.DataTable（）.search（query）.draw（false）
搜索示例
为表ID的位置。