Question

我在bootstrap中有一个表，它有无限的条目，我想通过增加条目自动分页号增加自动分页。

<table class="table table-hover" align="center" border="2" style="text-align:center">

    <tr height="">
            <td><b>S.NO</b></td>
            <td><b>DESRIPTION</b></td>
            <td><b>RECIEVE</b></td>
            <td><b>SENT</b></td>
            <td><b>AVAILABLE BALANCE</b></td>
        </tr>
        <?php
        $i=1; 
        $query = mysqli_query($con , "select * from income where userid='$searchid'  ORDER BY `id` DESC");

        if(mysqli_num_rows($query)>0){
            while($row = mysqli_fetch_array($query)){?>
            <tr>
                <td><b><?php echo $i++;?></b></td>
                <td><?php echo $row['description'] ; ?></td>
                <td><?php echo $row['received'] ; ?></td>
                <td><?php echo $row['sent'] ; ?></td>
                <td><?php echo $row['current_bal'] ; ?></td>
            </tr>
            <?php
        }}else{?>
            <tr>
                <td colspan='5'>NO Record Found</td>
            </tr>
        <?php
        }
        ?>


    </table>

Answer 1

Here is your solution with datatables..add your php code inside tbody tag ...  

  <!DOCTYPE html>
    <html>
    <head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

      <link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" />
      <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>



    <table id="example" table table-bordered table-striped>

                            <thead>
                            <tr>
                                <th><b>S.NO</b></th>
                                <th><b>DESRIPTION</b></th>
                                <th><b>RECIEVE</b></th>
                                <th><b>SENT</b></th>
                                <th><b>AVAILABLE BALANCE</b></th>
                            </tr>
                            </thead>
                            <tbody>
                                <tr>
                                <td>1</td>
                                <td>qwerty</td>
                                <td>uiop</td>
                                <td>asdf</td>
                                <td>12345</td>
                                </tr>
                                    <tr>
                                <td>1</td>
                                <td>qwerty</td>
                                <td>uiop</td>
                                <td>asdf</td>
                                <td>12345</td>
                                </tr>
                                    <tr>
                                <td>1</td>
                                <td>qwerty</td>
                                <td>uiop</td>
                                <td>asdf</td>
                                <td>12345</td>
                                </tr>
                            </tbody>

                        </table>
                        <script type="text/javascript">

                           $(document).ready(function() {
        $('#example').DataTable();
    } );
                        </script>

                        </body>


    </html>

在引导表中分页

1 个答案: