PHP bootstrap分页与自定义页面选择下拉列表

时间:2017-08-21 05:09:50

标签: php jquery html twitter-bootstrap

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

对于示例数据库的测试使用国家/地区列表:在图片中,它是这样的: enter image description here

对于较大的数据,它以这种方式看起来不太好。 另外,我添加了一个下拉列表供用户跳转到任何页面。但这不适用于当前的编码和for loop structure。

编码部分:

  <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">的选项不确定如何使用此结构实现它。任何帮助将受到高度赞赏。

阿里齐亚的答案: 我已添加此链接:

         <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插件的最新截图 enter image description here

1 个答案:

答案 0 :(得分:1)

使用此风格

server {
    listen 80;
    server_name bursan.co.uk;
    return 301 https://bursan.co.uk$request_uri;
}


server {

    listen 443 ssl;

    root /var/www/html/bursan;
    index index.html;

    server_name bursan.co.uk;
    ssl_certificate /etc/nginx/ssl/bursan.crt;
    ssl_certificate_key /etc/nginx/ssl/bursan.key;
    add_header Strict-Transport-Security "max-age=31536000";

    # Set up preferred protocols and ciphers. TLS1.2 is required for HTTP/2
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_prefer_server_ciphers on;
    ssl_ciphers ECDH+AESGCM:ECDH+AES256:ECDH+AES128:DH+3DES:!ADH:!AECDH:!MD5;

    # This is a cache for SSL connections
    ssl_session_cache shared:SSL:2m;
    ssl_session_timeout 60m;

    location / {
            try_files $uri $uri/ /index.html;
    }

    error_page 404 /404.html;
    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
            root /usr/share/nginx/html;
    }

}

使用此js

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

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

提供ID

在页脚中使用此js

datatable

以下列格式制作HTML

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