11-Index页面

<html>

<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title></title>
<link href="~/Content/BootstrapSouce/css/bootstrap.css" rel="stylesheet" />
<script src="~/Script/jquery-1.10.2.min.js"></script>

<style type="text/css">

/*html, body, header, div, main, p, span {
margin: 0;
padding: 0;
}

#refreshContainer {
margin-left: 200px;
}

.refreshText {
line-height: 50px;
text-align: center;
}*/

#L1 {
80px;
height: 50px;
}

#L2 {
300px;
height: 50px;
}

#L3 {
120px;
height: 50px;
}

#L4 {
200px;
height: 50px;
}

#div {
margin: 20px 200px 0 200px;
height: 50px;
}

a:link {
text-decoration: none;
height: 50px;
}
</style>
</head>

<body>


<p style="margin:80px 200px 0 200px ;"><label style="font-size:25px;">信息集市</label><a href="/News/Add">我要发布</a><input style="margin-left:100px;" type="text" id="Title" value="" /></p>
<div id="div">
<table class="table-condensed table-striped table "></table>
<div>
<input type="button" onclick="Prev()" value="上一页" id="but1" style="float:left;display:none;" />
<input type="button" onclick="Next()" value="下一页" id="but2" style="float:right" />
</div>
<p id="p1"></p>
<div style="margin:50px 0 10px 0"></div>
</div>


</body>
</html>
<script>
var PageIndex = 1;
var PageCount = 0;
var PageSize = 0;
var i = 0;

$(function () {

Show();


})

$("input").keydown(function (e) {//当按下按键时
if (e.which == 13) {//.which属性判断按下的是哪个键,回车键的键位序号为13
$('button.searchBtn').trigger("input");//触发搜索按钮的点击事件
Show();

}
});

function Show() {

if (PageIndex == 1) {
PageSize = 10;
} else if (PageIndex == 2 || PageIndex == 3) {
PageSize = 5;
}



$.ajax({
url: "http://localhost:8888/News/GetNews",//?Title="+$("#Title").val(),
type: "get",
data: {
Title: $("#Title").val(),
Page: PageIndex,
PAGESIZE: PageSize,
},
success: function (data) {
PageIndex = data.PageIndex;
PageCount = data.PageCount;
i++;
$("#p1").css("display", "none");
if (i <= 3) {
$("#p1").css("margin-left", "500px")

setTimeout(function () {


$("#p1").css("display", "block");
$("#p1").html("加载中。。。")

}, 1000);
}
else {
$("table tr").remove();
}

$(data.Data).each(function (index, data) {
$("table").append("<tr ><td id='L'><img src='" + data.TypeImg + "' /></td><td id='L2'><a href='/News/Comment?ID=" + data.ID + "' >" + data.Title + "</a></td><td id='L3'>" + data.Name + "</td><td id='L4'>" + data.CreateTime + "</td></tr>")

})

}

})

}


var z = 0;
function Next() {
z++;
if (PageIndex >= PageCount) {

return;
}

if (z == 3) {
$("#but1").css("display", "block");

} else if(i<3){
$("#but1").css("display", "none");

// $("#p1").html("加载中。。。");

// $("#p1").css("display", "block");
}
PageIndex++;
Show();

}

function Prev() {

if (PageIndex <= 1) {
z = 0;
return;
}

PageIndex--;
Show();
}

//(function (window) {
// // 获取当前滚动条的位置
// function getScrollTop() {
// var scrollTop = 0;
// if (document.documentElement && document.documentElement.scrollTop) {
// scrollTop = document.documentElement.scrollTop;
// } else if (document.body) {
// scrollTop = document.body.scrollTop;
// }
// return scrollTop;
// }
// // 获取当前可视范围的高度
// function getClientHeight() {
// var clientHeight = 0;
// if (document.body.clientHeight && document.documentElement.clientHeight) {
// clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight);
// }
// else {
// clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
// }
// return clientHeight;
// }
// // 获取文档完整的高度
// function getScrollHeight() {
// return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
// }
// var _text = document.querySelector('.refreshText'),
// _container = document.getElementById('refreshContainer');
// var throttle = function (method, context) {
// clearTimeout(method.tId);
// method.tId = setTimeout(function () {
// method.call(context);
// }, 300);
// }
// function fetchData() {
// setTimeout(function () {
// _container.insertAdjacentHTML('beforeend', '<p>new add...</p>');
// }, 100);
// }
// function fetch() {
// //alert(getScrollTop());
// //alert(getClientHeight());
// ////alert(getScrollHeight());
// //if (getScrollTop() + getClientHeight() == getScrollHeight()) {
// //alert(1);
// _text.innerText = '加载中...';
// throttle(fetchData);
// //}
// };
//})(window);
</script>

原文地址:https://www.cnblogs.com/Wangyang11/p/10003746.html