JAVA日报
分页显示 大体功能实现但是样式会变
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>响应侧边栏</title>
<link rel="stylesheet" href="css/index.css" type="text/css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<style>
body::-webkit-scrollbar {
display: none;
}
#showtable {
width: 100%;
border-spacing: 0;
color: #333;
border: 1px solid #ddd;
border-radius: 4px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
overflow: hidden;
table-layout: fixed;
}
#showtable tr th {
padding: 16px;
}
#showtable tr {
width: 100%;
hidth: 30px;
}
#showtable tr:hover {
cursor: pointer;
background: yellow;
}
#showtable tr td {
text-align: center;
padding: 8px 16px;
font-size: 14px;
border-bottom: 1px solid #f4f4f4;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.container {
background: #fdfdfd;
padding: 1rem;
margin: 3rem auto;
border-radius: 0.2rem;
counter-reset: pagination;
text-align: center;
}
.container:after {
clear: both;
content: "";
display: table;
}
.container ul {
width: 100%;
}
.large {
width: 45rem;
}
.pagination ul, li {
list-style: none;
display: inline;
padding-left: 0px;
float: left;
}
.pagination li {
counter-increment: pagination;
}
.pagination li:hover a {
color: #fdfdfd;
background-color: #1d1f20;
border: solid 1px #1d1f20;
}
.pagination li.active a {
color: #fdfdfd;
background-color: #1d1f20;
border: solid 1px #1d1f20;
}
.pagination li:first-child a:after {
content: "<";
}
.pagination li:nth-child(2) {
counter-reset: pagination;
}
.pagination li:last-child a:after {
content: ">";
}
.pagination li a {
border: solid 1px #d6d6d6;
border-radius: 0.2rem;
color: #7d7d7d;
text-decoration: none;
text-transform: uppercase;
display: inline-block;
text-align: center;
padding: 0.5rem 0.9rem;
}
.pagination li a:after {
}
.large li a {
display: none;
}
.large li:first-child a {
display: inline-block;
}
.large li:first-child a:after {
content: "<";
}
.large li:nth-child(2) a {
display: inline-block;
}
.large li:nth-child(3) a {
display: inline-block;
}
.large li:nth-child(4) a {
display: inline-block;
}
.large li:nth-child(5) a {
display: inline-block;
}
.large li:nth-child(6) a {
display: inline-block;
}
.large li:nth-child(7) a {
display: inline-block;
}
.large li:nth-child(8) a {
display: inline-block;
}
.large li:last-child a {
display: inline-block;
}
.large li:last-child a:after {
content: ">";
}
.large li:nth-last-child(2) a {
display: inline-block;
}
.large li:nth-last-child(3) {
display: inline-block;
}
.large li:nth-last-child(3):after {
padding: 0 1rem;
content: "...";
}
#page {
border: solid 1px #d6d6d6;
border-radius: 0.2rem;
color: #7d7d7d;
text-decoration: none;
text-transform: uppercase;
display: inline-block;
text-align: center;
padding: 0.5rem 0.9rem;
float:left;
}
#btn {
border: solid 1px #d6d6d6;
border-radius: 0.2rem;
color: #7d7d7d;
text-decoration: none;
text-transform: uppercase;
display: inline-block;
text-align: center;
padding: 0.5rem 0.9rem;
float:left;
}
</style>
</head>
<body>
<div class="navigation">
<ul>
<li>
<div style="width: 250px; height: 150px">
<div style=""></div>
</div>
</li>
<li class="menu"><a href="keyindex.html?key=fangchan&page=1">
<span class="icon"></span> <span class="title">房产</span>
</a></li>
<li class="menu"><a href="keyindex.html?key=jiaoyu&page=1">
<span class="icon"></span> <span class="title">教育</span>
</a></li>
<li class="menu"><a href="keyindex.html?key=keji&page=1"> <span
class="icon"></span> <span class="title">科技</span>
</a></li>
<li class="menu"><a href="keyindex.html?key=junshi&page=1">
<span class="icon"></span> <span class="title">军事</span>
</a></li>
<li class="menu"><a href="keyindex.html?key=qiche&page=1"> <span
class="icon"></span> <span class="title">汽车</span>
</a></li>
<li class="menu"><a href="keyindex.html?key=tiyu&page=1"> <span
class="icon"></span> <span class="title">体育</span>
</a></li>
<li class="menu"><a href="keyindex.html?key=caijing&page=1">
<span class="icon"></span> <span class="title">财经</span>
</a></li>
<li class="menu"><a href="keyindex.html?key=youxi&page=1"> <span
class="icon"></span> <span class="title">游戏</span>
</a></li>
<li class="menu" id="menu1"><span class="icon"></span> <span
class="title">词云</span></li>
<dl class="submenu" id="submenu1">
<dd id="index">总词云</dd>
<dd>房产</dd>
<dd>教育</dd>
<dd>科技</dd>
<dd>军事</dd>
<dd>汽车</dd>
<dd>教育</dd>
<dd>体育</dd>
<dd>游戏</dd>
<dd>财经</dd>
</dl>
</ul>
</div>
<div class="navigation2" id="freshpage">
<div id="freshpage2"
style="position: absolute; width: 100%; height: 80%; top: 0; left: 0"></div>
<div class="container large"
style="position: absolute; width: 100%; height: 15%; bottom: 0; left: 0">
<div class="pagination">
<ul id="pagelist" style="text-align: center; list-style: none;">
</ul>
<input type='text' id='page'>
<button id='btn'>跳转</button>
</div>
</div>
</div>
</body>
<script>
var totalpage = 0;
var lastpage = 0;
var nextpage = 0;
var item = "";
var page = 0;
$(document)
.ready(
function() {
$('#menu1')
.click(
function(e) {
if ($("#submenu1").css("display") == "none") {
$("#submenu1").css("display",
"block");
} else if ($("#submenu1").css(
"display") == "block") {
$("#submenu1").css("display",
"none");
}
});
$('#index')
.click(
function(e) {
document
.getElementById("freshpage").innerHTML = '<object type="text/html" data="wordcloud.html" height="100%" width="100%" ></object>';
});
});
function change() {
var str = "";
var url = location.search; //这一条语句获取了包括问号开始到参数的最后，不包括前面的路径
if (url != "") {
var params = url.substr(1);//去掉问号
var pa = params.split("&");
var s = new Object();
for (var i = 0; i < pa.length; i++) {
s[pa[i].split("=")[0]] = unescape(pa[i].split("=")[1]);
}
item = s.key;
page = s.page;
sendAjax(s.key, s.page);
getTotalpage(s.key);
register();
} else {
alert("url为空");
}
}
/*
这种传值的方式很方便，而且简单有效，但是缺点是受到url长度的限制，由于每个浏览器对url长度的限制不同，这里不好给出一个确定的限制，
只知道这个传值传的数据量不能太大。
*/
change();
function getTotalpage(item) {
$.ajax({
type : "POST",
contentType : "application/json",
url : "itemservlet?method=getTotalpage&item=" + item,
dataType : 'json',
success : function(data) {
totalpage = parseInt(data[0].tpage);
page = parseInt(page);
if (page == 1) {
lastpage = 1;
nextpage = 2;
} else if (page == totalpage) {
lastpage = page - 1;
nextpage = page;
} else {
lastpage = page - 1;
nextpage = page + 1;
}
reslist2(item, lastpage, nextpage, page);
},
error : function() {
alert("请求失败");
},
});
}
function sendAjax(key, page) {
$.ajax({
type : "POST",
contentType : "application/json",
url : "itemservlet?method=getdata&item=" + key + "&page=" + page,
dataType : 'json',
success : function(data) {
reslist(data);
},
error : function() {
alert("请求失败");
},
});
}
function reslist(data) {
var tab = document.getElementById("freshpage2");
var str = "<table id='showtable'><tr id='showtr'><th width='30%'>题目</th><th width='20%'>频道</th><th width='50%'>内容</th></tr>";
for (i in data) {
str = str + "<tr id='showtr'><td width='30%'>" + data[i].title
+ "</td><td width='20%'>" + data[i].channelName
+ "</td><td width='50%'>" + data[i].content + "</td></tr>";
}
tab.innerHTML = str + "</table>";
register();
}
function reslist2(item, lastpage, nextpage, page) {
var tab = document.getElementById("pagelist");
var str = "<li><a href='keyindex.html?key=" + item + "&page="
+ lastpage + "'></a></li>";
;
for (var i = page; i <= totalpage; i++) {
str = str + "<li><a href='keyindex.html?key=" + item + "&page="
+ (i) + "'>" + i + "</a></li>";
}
str = str + "<li><a href='keyindex.html?key=" + item + "&page="
+ nextpage + "'></a></li>"+page;
tab.innerHTML = str;
register2();
}
function register() {
$("#showtable").find("td").on(
"click",
function() {
// 获得当前匹配元素的行数
let row = $(this).parent().prevAll().length;
let col = $(this).prevAll().length;
// 获得当前tr下td的内容
let content = $("#showtable").find("tr").eq(row).find("td")
.eq(col).text();
// 设置浮动
alert(content);
});
}
function register2() {
$('#btn').click(
function(e) {
var p = document.getElementById("page").value;
if (p > 0 && p <=totalpage) {
window.location.href = "keyindex.html?key=" + item
+ "&page=" + p;
} else {
alert("输入错误");
}
});
}
</script>
</html>
