带有自定义页面选择下拉菜单的 PHP 引导分页

Question

使用当前编码，如果适合数字或记录，我只想显示 5 个分页字段，否则如果每页的记录和用户选择数据数较低，则自动调整。

对于示例数据库的测试使用的国家/地区列表：在图片中，它是这样的：

对于更大的数据，这种方式看起来不太好。 另外，我添加了一个下拉列表供用户跳转到任何页面。但这不适用于当前的编码和 for 循环结构。

编码部分：

  <div class="form-group">
             <?php
           // display the links to the pages
           // setting up the 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;
         for ($page=1;$page<=$number_of_pages;$page++) {
             echo '<li><a href="test_cas.php?page=' . $page . '">' . $page . 
                '</a><li>';   
           }
          // Setting up the 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 to a 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 有一个<li class="active"> 的选项不知道如何用这个结构实现它。任何帮助将不胜感激。

有了 Ali Zia 的回答： 我已经添加了这个链接：

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

带有 Datatable 插件的最新屏幕截图

Answer 1

使用这种风格

<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.15/css/jquery.dataTables.min‌​.css">

使用这个js

<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>

为您的餐桌提供 ID datatable

在页脚中使用这个js

$(document).ready(function() {
    $('#datatable').DataTable();
});

按照以下格式制作 HTML

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