CODEWITHSUNDEEP
phppaginationhtml-table
iris2015
iris2015

Reputation: 5

PHP Tables with Pagination bootstrap

I am getting from the database data in a PHP table bootstrap. What I want is to do the pagination now, because the table I get is to long, and I want to have for example 6 rows/page. This is my code with DataTables Plugin but it's not working :/ Can anyone help me?

 <html>
 <!-- DataTables CSS -->
 <link rel="stylesheet" type="text/css"           href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.css"> 
 <!-- jQuery -->
 <script type="text/javascript" charset="utf8"    src="//code.jquery.com/jquery-1.11.1.min.js"></script >
 <!-- DataTables -->
  <script type="text/javascript" charset="utf8"       src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.js"></script> 

<div class="container">
<div class="row vertical-center-row">
    <div class="col-lg-12">
        <div class="row">
         <div class="table-responsive">
</div> 
</div>
</div>
</div>
                <div class="col-xs-4 col-xs-offset-4">
            <table id="table" class="table table-striped" cellspacing="0" width="100%">
            <h3>Update/Remove Access Rights</h3>
            <thead>
  <tr>
    <th>Id</th>
    <th>Name</th>
    <th>Surname</th>
    <th>Nickname</th>
    <th> Door Description </th>

  </tr>
</thead>
<tbody>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#table').dataTable( {
    "pagingType": "full_numbers"
} );
} );
 </script>
  <?php 
    $stmt="select id_access_rights,name,surname,nickname, description 
           from users
           join access_rights on users.rfidcode=access_rights.users_rfidcode
           join doors 
           on doors.id_doors=access_rights.doors_id_doors
           order by name ";

    $result=$conn->query($stmt);
    if($result === FALSE) { 
  die(mysqli_error()); // TODO: better error handling
 }
                while($row =$result->fetch_assoc()){

                    $f1=$row['id_access_rights'];
                    $f2=$row['name'];
                    $f3=$row['surname'];
                    $f4=$row['nickname'];
                    $f5=$row['description'];
                    ?>
 <tr>
 <td><?php echo $f1 ?>
<td><?php echo $f2 ?>
<td><?php echo $f3 ?>
<td><?php echo $f4 ?>
<td><?php echo $f5 ?>
<td><?php echo "<a href='updateAccessRights.php?id_access_rights=" . htmlentities($f1). "'>Update";?>
<td><?php echo "<a href='deleteAccessRights.php?id_access_rights=" . htmlentities($f1). "'>Remove";?>
</td>
<?php 
}
?>  
</tr>
</table>
</tbody>
</table>
            <br>
    </div>
            </div>
        </div>
    </div>
</div>
</div>
</body>
</html>

Upvotes: 0

Views: 3280

Answers (2)

M3ghana
M3ghana

Reputation: 1281

You can make use of Data Tables

  • Javascript Code

    $(document).ready(function() { $('#example').dataTable(); } ); In addition to the above code, the following Javascript library files are loaded for use in this example:

//code.jquery.com/jquery-1.11.1.min.js //cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js //cdn.datatables.net/plug-ins/1.10.7/integration/bootstrap/3/dataTables.bootstrap.js

HTML Code

<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>

        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>

        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>

        </tbody>
    </table>

CSS Code - 

body { font-size: 140%; }

The following CSS library files are loaded for use in this example to provide the styling of the table:

//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css //cdn.datatables.net/plug-ins/1.10.7/integration/bootstrap/3/dataTables.bootstrap.css

Please refer this for further details - https://datatables.net/examples/styling/bootstrap.html

Upvotes: 1

Mubashar Abbas
Mubashar Abbas

Reputation: 5673

You need to use datatables, javascript plugin. https://www.datatables.net/

Upvotes: 0

Related Questions