使用当前编码,我想只显示5个分页字段,如果适合数字或记录,否则自动调整,如果记录和数字的数量。每页的用户选择数据很低。
对于示例数据库的测试使用国家/地区列表:在图片中,它是这样的:
对于较大的数据,它以这种方式看起来不太好。 另外,我添加了一个下拉列表供用户跳转到任何页面。但这不适用于当前的编码和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>
答案 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>
在页脚中使用此js
datatable
以下列格式制作HTML
$(document).ready(function() {
$('#datatable').DataTable();
});