Search and pagination sql query php

Question

Hello I am newbie in php and learning about how to use search and pagination using List.Jsand php I am having problem to get list.js working to search and filter query result in php. I am already following the example in documentation but still no luck. Here my code:

<div class="box-body">

<div id="listperson" align="center">
    <input type="text" placeholder="Search" class="fuzzy-search"/>
<table class="col-md-12">
    <thead>
        <tr>
            <th class="col-md-1 sort"></th>
            <th class="col-md-3 sort" data-sort="nama">Name</th>
            <th class="col-md-1 sort" data-sort="role">Role</th>
            <th class="col-md-3 sort">Email</th>
            <th class="col-sm-2 sort">No.Hp</th>
            <th class="col-sm-3 sort" data-sort="alamat">Alamat</th>
            <th class="col-sm-1 sort">Edit</th>
            <th class="col-sm-1 sort">Delete</th>
        </tr>
    </thead>
    <?php
        $peoplequery=mysqli_query($CONN,"SELECT * FROM people");
        while($people=mysqli_fetch_array($peoplequery)){
        ?>
    <tbody class="list">            
        <tr align="left">
            <td class="img">
            <img src="../img/man-128.png" class="direct-chat-img" width="10px" height="10px">
            </td>
            <td class="name"><a href="personview.php?PersonID=<?= $people['idpeople'] ?>"><?php echo $people['namadepan'] . ' ' .$people['namabelakang']; ?></a></td>
            <td class="role"><?php echo $people['role']; ?></td>
            <td class="email"><?php echo $people['email']; ?></td>
            <td class="nohp"><?php echo $people['nohp']; ?></td>
            <td class="alamat"><?php echo $people['alamat']; ?></td>                   
            <td class="edit" align="center">
            <a href="editperson.php?PersonID=<?= $people['idpeople'] ?>">
            <span class="fa-stack">
            <i class="fa fa-square fa-stack-2x"></i>
            <i class="fa fa-pencil fa-stack-1x fa-inverse"></i>
            </span>
            </a>
            </td>
            <td class="delete" align="center">
            <a href="deleteperson.php?PersonID=<?= $people['idpeople'] ?>">
            <span class="fa-stack" style="color:#ff0000; ">
            <i class="fa fa-square fa-stack-2x"></i>
            <i class="fa fa-trash fa-stack-1x fa-inverse" ></i>
            </span>
            </a>
            </td>             
        </tr>
        <?php
        $idppl = $people['idpeople'];
        }  ?>
    </tbody>
</table>
<ul class="pagination"></ul>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.1.1/list.min.js">
</script>
<script type="text/javascript">
var options = {
    valueNames: [ 'name', 'role', 'email'],
    page: 5,
    plugins: [
    ListPagination({})
]

};
var contactList = new List('listperson', options);
</script>

</div>

The pagination is not showing and search not working also. I wonder what i'm missing here Any help appreciated Thanks.

Answer 1

Your opening <tbody> tag is inside your while loop, but your closing </tbody> tag is outside that loop.

That probably means your table is malformed. That probably confuses List.js .

It's always good to use View Source... to check whether HTML is correctly generated.