文章/答案/技术大牛

发布

社区首页 >问答首页 >在不刷新的情况下搜索Html表并显示结果

问在不刷新的情况下搜索Html表并显示结果
EN

Stack Overflow用户

提问于 2016-02-16 23:15:19

回答 4查看 3.6K关注 0票数 1

我的表上有一组字段，这些字段用于搜索我的表。下面是一个代码片段：

<?php $form = ActiveForm::begin(['id' => 'devicemgmt-form']); ?>
<div class="container-fluid">
    <div class="row">
        <div class="col-sm-5">
            <div class="row">
                <div class="col-sm-5">Device Name</div>
                <div class="col-sm-7">
                    <input type="text" name="device-name" class="form-control input-sm">
                </div>
            </div>
            <br>
            <div class="row">
                <div class="col-sm-5">Broadcasted Program</div>
                <div class="col-sm-7">
                    <select name="country" class="form-control input-sm">
                        <option selected disabled>Please Select</option>
                        <?php
                            foreach($devices as $key => $value):
                            echo '<option value="'.$key.'">'.$value['Broadcasted Program'].'</option>'; 
                            endforeach;
                        ?>
                    </select>                                
                </div>
            </div> 
            <br>
            <div class="row">
                <div class="col-sm-5">Store</div>
                <div class="col-sm-7">
                    <select class="form-control input-sm">
                        <option selected disabled>Please Select</option>
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                    </select>
                </div>
            </div> 
        </div>
        <div class="col-sm-5">
            <div class="row">
                <div class="col-sm-5">Model name</div>
                <div class="col-sm-7">
                    <select name="country" class="form-control input-sm">
                        <option selected disabled>Please Select</option>
                        <?php
                            foreach($devices as $key => $value):
                            echo '<option value="'.$key.'">'.$value['Device Model'].'</option>'; 
                            endforeach;
                        ?>
                    </select> 
                </div>
            </div> 
            <br>
            <div class="row">
                <div class="col-sm-5">Status</div>
                <div class="col-sm-7">
                    <select class="form-control input-sm">
                        <option selected disabled>Please Select</option>
                        <option>Started</option>
                        <option>Pending</option>
                        <option>Complete</option>
                    </select>
                </div>
            </div> 
            <br>
            <div class="row">
                <div class="col-sm-5">Log Output Date</div>
                <div class="col-sm-7">
                    <input type="text" name="device-name" class="form-control input-sm">
                </div>
            </div>
        </div>
        <div class="col-sm-2">
            <div class="row" style="height: 98px;"></div>
            <div class="row">
                <button href="#" class="btn download-btn" id="downloadBtn">Log Download</button>
            </div>
        </div>
    </div>
</div>
<?php ActiveForm::end(); ?>

<div class="container-fluid">            
    <table id="device-list_table" class="table table-striped table-bordered dataTable display">
        <thead>
            <tr>
                <th class="text-center"><input type="checkbox" id="selectAll"></th>
                <th class="text-center">Device Name</th>
                <th class="text-center">Device Model</th>
                <th class="text-center">Broadcasted Program</th>
                <th class="text-center" colspan="2">Device Status</th>
                <th class="text-center">Last Communication Date and Time</th>
                <th class="text-center"></th>
            </tr>
        </thead>
        <tbody>
            <?php foreach($devices as $key => $value) { ?>
            <tr>
                <td class="text-center"><input type="checkbox" name="device-checkbox" value="<?= $value['Device Name'] ?>" id="<?php echo 'boxId'.$key ?>"></td>
                <td class="text-center"><?= $value['Device Name']; ?></td>
                <td class="text-center"><?= $value['Device Model']; ?></td>
                <td class="text-center"><?= $value['Broadcasted Program']; ?></td>
                <td class="text-center">
                    <?php
                        if ($value['Device Status'] == "Start") {
                            echo "<font color='yellow'>&#x26AB;</font>";
                        } elseif ($value['Device Status'] == "Pending") {
                            echo "<font color='red'>&#x26AB;</font>";
                        } elseif ($value['Device Status'] == "Complete") {
                            echo "<font color='green'>&#x26AB;</font>";
                        }
                    ?>
                </td>
                <td class="text-center"><?= $value['Device Status']; ?></td>
                <td class="text-center"><?= $value['Last Communication Date and Time']; ?></td>
                <td class="text-center">
                    <ul class="list-inline">
                        <li>
                            <button href="#" class="btn">
                                Display Log
                            </button>
                        </li>
                        <li>
                            <button href="#" class="btn">
                                Edit
                            </button>
                        </li>
                    </ul>
                </td>
            </tr>
            <?php } ?>
        </tbody>
    </table>
</div>

如何在不刷新页面的情况下搜索表中的数据并显示结果(在同一表中)？正如您所看到的，我有一个“日志下载”按钮，也许当我单击该按钮时，结果会显示出来。

编辑:有点像dataTables (https://www.datatables.net/)的实现，但在我的例子中，我有多个表单字段可用于搜索。

php

jquery

html

css

javascript

主机安全旗舰版免费体验7天

利用机器学习为用户提供木马查杀、黑客防御、漏洞风险预警及安全基线等安全防护服务，帮助企业构建服务器安全防护体系

回答 4

Stack Overflow用户

回答已采纳

发布于 2016-02-16 23:20:02

你可以像

$("#deviceName").keyup(function(){                      
         var filter = $(this).val();
        $("#device-list_table tr td").each(function(){
            if ($(this).text().search(new RegExp(filter, "i")) < 0) {
                $(this).hide();
            } else {
                $(this).show();

            }
        });
      });

这仅适用于deviceName类型，您还可以添加其他属性

票数 4

Stack Overflow用户

发布于 2016-02-16 23:20:55

下面是一个简单的Jquery插件

http://www.jqueryscript.net/table/Simple-jQuery-Plugin-For-Html-Table-Live-Search.html

在网页中包括jQuery库和jQuery Html搜索插件。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="html-table-search.js"></script>

调用现有Html表上的插件。

$(document).ready(function(){
  $('table.search-table').tableSearch();
});

票数 1

Stack Overflow用户

发布于 2016-02-16 23:52:57

我不太清楚您在问什么，但是如果我理解正确的话，您有一个包含可搜索信息的<table>元素，您希望这个表在用户使用搜索功能之后只包含搜索结果？

在本例中，您可以通过AJAX请求以下列方式完成此操作。创建一个.php文件，该文件根据来自搜索函数的输入(我们称之为generateTable.php)生成表的内容，该文件通过$_GET变量发送给它。generateTable.php是这样的：

$result = search($_GET['device-name'], $_GET['country'], $_GET['store']...);
echo '<tr><td>' . $result[0] . '</td><td>' . $result[1] . '</td><td>' . $result[2] . '</td><td>'...'</tr>'

其中search()是执行搜索的函数，返回一个包含结果的数组。

单击“搜索”按钮时调用JS函数，该按钮将生成generateTable.php的URL，并包含$_GET值(/generateTable.php?device-name=foo&country=usa&store=3...)。您可以使用JQuery的.val()函数从字段中获取值，例如var deviceName = $('#device-name').val();。这将要求您将id='device-name'添加到您的输入字段“设备名称”。

var deviceName = $('#device-name').val();
var country = $('#country').val();
var store = $('#store').val();
...
var generateTableUrl = "generateTable.php?device-name=" + deviceName + "&country=" + country + "&store=" + store...

使用JQuery AJAX，您可以使用以下JS代码从generateTable.php加载输出：

$('#device-list_table').load(generateTableUrl);

整个剧本变成

function getSearchResults() {
   var deviceName = $('#device-name').val();
   var country = $('#country').val();
   var store = $('#store').val();
   ...
   var generateTableUrl = "generateTable.php?device-name=" + deviceName + "&country=" + country + "&store=" + store...
   $('#device-list_table').load(generateTableUrl);
}

为了开始整个过程，将onClick='getSearchResults();'添加到您的搜索按钮中，即传统形式中的提交按钮。请注意，此过程不使用传统意义上的表单，因为表单没有直接调用“generateTable.php”，因此它只是用作获取加载'generateTable.php‘的JS函数的输入的地方。

我必须为我不得不做的代码简化表示歉意；我目前无法测试我的代码，所以这里编写的代码更多地是作为一个应该做什么的概要而不是一个工作示例。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/35450186

复制

信号的频谱频谱密度功率谱密度能量谱密度

fft

这是我在知乎上的一个回答，鉴于很多朋友对这几个概念不是很清楚，就在公众中发一下。

猫叔Rex

2020/06/29

3.7K0