jquery - PHP bootstrap Pagination with custom page select dropdown -
with current coding, want show 5 pagination field if suitable number or records, otherwise auto adjusted if number of record & user select data per page low.
for test used country list sample database: in picture, how looks like: 
for bigger data, doesn't nice in way. plus have added drop down list user jump pages. doesn't work current coding & loop structure.
coding part:
<div class="form-group"> <?php // display links pages // setting prev & first button if($page == 1){ echo '<ul class="pagination"><li class="disabled"><a href="test_cas.php?page=1">first</a></li>'; echo '<li class="disabled"><a href="test_cas.php? page='.$page.'">prev</a></li>'; } else { echo '<ul class="pagination"><li><a href="test_cas.php? page=1">first</a></li>'; echo '<li><a href="test_cas.php?page='.($page-1).'">prev</a> </li>'; } $before_loop_value=$page; ($page=1;$page<=$number_of_pages;$page++) { echo '<li><a href="test_cas.php?page=' . $page . '">' . $page . '</a><li>'; } // setting next & last button if($before_loop_value == $number_of_pages){ echo'<li class="disabled"><a href="test_cas.php?page='.($page- 1).'">next</a></li>'; echo '<li class="disabled"><a href="test_cas.php? page='.$number_of_pages.'">last</a></li></ul>'; } else { echo'<li><a href="test_cas.php?page='.($page-1).'">next</a> </li>'; echo '<li><a href="test_cas.php? page='.$number_of_pages.'">last</a></li>'; } // jump page drop down section echo '<select class="form-control" id="custom_page" name="custom_page">'; echo "<option value='" . $page . "'>" . $page . " </option>"; echo'</select>'; echo'</ul>'; ?> </div> <div class="form-group">total record <?php echo $number_of_results?> </div> bootstrap has option <li class="active"> not sure how implement structure. highly appreciated.
with ali zia's answer: have links added:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googletranslateelementinit"></script> <script type="text/javascript" src="js/google-translate.js"></script> <link rel="stylesheet" href="https://cdn.datatables.net/1.10.15/css/datatables.bootstrap.min.css"> <script src="https://cdn.datatables.net/1.10.15/js/jquery.datatables.min.js"></script>
use style
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.15/css/jquery.datatables.min.css"> use js
<script src="https://cdn.datatables.net/1.10.15/js/jquery.datatables.min.js"></script> give id table datatable
use js in footer
$(document).ready(function() { $('#datatable').datatable(); }); make html in following format
<table id="datatable" class="display" 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> <tr> <td>ashton cox</td> <td>junior technical author</td> <td>san francisco</td> <td>66</td> <td>2009/01/12</td> <td>$86,000</td> </tr> </tbody> </table>
Comments
Post a Comment