代码之家 › 专栏 › 技术社区 › Insanity Geek

过滤/删除视图中的数据而不刷新页面

html php javascript

Insanity Geek · 技术社区 · 7 年前

这是我的视图页面,其中包含数据数组及其使用foreach和table标记。

            <?php if (count($catArray) > 0) { ?>
                <center>
                    <table class="table_existing" >
                        <thead>
                            <tr>
                                <th>Cat</th>
                           </tr>
                        </thead>
                        <tbody>

                            <?php
                            foreach ($catArray as $egs) {
                                ?>  
                                <tr style="border-bottom: 1px solid #000">
                                    <td><?php echo $egs->cat; ?></td>
                                  </tr>
                            <?php } ?>
                        </tbody>
                    </table>
                </center>
            <?php } ?>

我想在下拉列表更改时过滤类别数据:

我的下拉代码如下:

 <select  class="inputnw" onchange="searchAllData()">
    <?php echo getType($cd) ?>
</select>

我的JS如下:

function searchAllData(){
        var url = '<?php echo site_url("c/e"); ?>';
        window.location.href=url;
    }

当页面重新加载时,它会过滤数据。我想要的是过滤 $catArray 更改时的阵列 searchAllData 方法不刷新页面。

建议我做个变通。

1 回复 | 直到 7 年前

Shifat 7 年前

以下是解决方案:

JS公司

 function onPageSearch() {
            var input, filter, table, tr, td, i;
            input = document.getElementById("search");
            filter = input.value.toUpperCase();
            table = document.getElementById("catTable");
            tr = table.getElementsByTagName("tr");
            for (i = 0; i < tr.length; i++) {
                td = tr[i].getElementsByTagName("td")[0];
                if (td) {
                    if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
                        tr[i].style.display = "";
                    } else {
                        tr[i].style.display = "none";
                    }
                }
            }
    }

查看数据:

 <?php if (count($catArray) > 0) { ?>
            <center>
                <table id="catTable" class="table_existing" >
                    <thead>
                        <tr>
                            <th>Cat</th>
                       </tr>
                    </thead>
                    <tbody>

                        <?php
                        foreach ($catArray as $egs) {
                            ?>  
                            <tr style="border-bottom: 1px solid #000">
                                <td><?php echo $egs->cat; ?></td>
                              </tr>
                        <?php } ?>
                    </tbody>
                </table>
            </center>
        <?php } ?>

搜索输入字段:

<input type="text" id="search" onkeyup="onPageSearch()" placeholder="Search">