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

Question

Here is my view page which has data array and its viewed using foreach and table tag.

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

I want to filter data of category on change of dropdown :

My Dropdown Code like below :

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

My JS like below :

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

It filters data when page is reloaded. What i want is to filter $catArray array on change searchAllData method. without refreshing the page.

Suggest me a work around.

Answer 1

Here is the solution :

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";
                    }
                }
            }
    }

View data :

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

Search input field :

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