infinitescroll 通过无限制分页(json方式完整代码)

@{
ViewBag.Title = " ";
}

<style type="text/css">
#infscr-loading {
text-align: center;
z-index: 100;
position: fixed;
left: 45%;
bottom: 40px;
width: 200px;
padding: 10px;
background: #000;
opacity: 0.8;
color: #FFF;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
</style>
<!-- Begin Small Hero Block -->
@*<section class="hero small accent parallax" style="background-image: url(/images/parallax.png); height:30px">*@
<section class="hero small accent parallax">

<!-- Heading -->
<div class="hero-content container">
<!-- <h1>ITSiteBlog.</h1> -->
<div class="jumbotron" style="background:#2db4d8">
<h1><font color="#fff">Hello, world!</font></h1>
<p>记录Java学习过程的点滴！</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
</div>
<!-- END -->
<!-- Button -->
<div class="sub-hero container">
<!-- <span class="line"></span> -->
</div>
<!-- END -->

</section>
<!-- End Small Hero Block -->
<!-- Begin Blog Block -->
<section class="content container">
<div class="row">

<!-- Begin Posts -->
<div class="col-sm-8">
<!-- Link Post -->
<div id="content">
<h1>Infinite Scroll Testing</h1>
</div>
<a id="next" href="/Home/[email protected]&currentPage=2&pageSize=10">next page</a>
</div>
<!-- END -->
<!-- Begin Sidebar -->
<div class="col-sm-4">
<div class="sidebar">

<!-- search widget -->
<div class="widget clearfix">
<form action="#">
<input name="s" id="s" type="text" class="search" placeholder="Search.." value="" />
<input type="submit" value="Go" class="search-submit" />
</form>
</div><!-- END -->
<!-- text widget -->
<div class="widget">
<h5>公告</h5>
<div class="textwidget"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p></div>
</div><!-- END -->
<!-- categories widget -->
@if (ViewBag.CatalogList != null && ViewBag.CatalogList.Count > 0)
{
TempData["CatalogList"] = ViewBag.CatalogList;
<div class="widget">
<h5>类别</h5>
<ul>
@for (int i = 0; i < ViewBag.CatalogList.Count; i++)
{
<li class="cat-item"><a href="[email protected][i].ID ">@ViewBag.CatalogList[i].Name</a> (3)</li>
}

</ul>
</div><!-- END -->
}
<!-- tagcloud widget -->
<div class="widget">
<h5>标签</h5>
<div class="tagcloud">
<a href=‘#‘>JAVA</a>
<a href=‘#‘>.NET</a>
<a href=‘#‘>云计算</a>
<a href=‘#‘>大数据</a>
<a href=‘#‘>PHP</a>
<a href=‘#‘>数据库</a>
</div>
</div><!-- END -->
<!-- archives widget -->
@*<div class="widget widget-archive">
<h5>点击最多</h5>
<ul>
<li><a href="#">July 2013</a></li>
<li><a href="#">June 2013</a></li>
</ul>
</div>*@<!-- END -->
<!-- recent comments widget -->
<div class="widget widget-recent-comments">
<h5>最新发布</h5>
<ul id="recentcomments">
@for (int i = 0; i < ViewBag.NewContentList.Count; i++)
{
<li class="recentcomments"> <a href="~/Home/[email protected][i].ID">@ViewBag.NewContentList[i].Title @ViewBag.NewContentList[i].PostDate </a></li>
}
</ul>
</div><!-- END -->
<!-- recent posts widget -->
<div class="widget widget-recent-entries">
<h5>推荐文章</h5>
<ul>
<li><a href="#" title="Post Title">Standard post with goodies.</a></li>
<li><a href="#" title="Post Title">Fluid video. Yeah we got that.</a></li>
<li><a href="#" title="Post Title">Gallery post with slider.</a></li>
</ul>
</div><!-- END -->
<!-- recent comments widget -->
@*<div class="widget widget-recent-comments">
<h5>最热文章</h5>
<ul id="recentcomments">
<li class="recentcomments">Admin on <a href="#">Standard post with goodies.</a></li>
<li class="recentcomments">Aether-Themes on <a href="#">Fluid video. Yeah we got that.</a></li>
<li class="recentcomments">Admin on <a href="#">Gallery post with slider.</a></li>
</ul>
</div>*@
<!-- END -->
</div>
</div><!-- END -->

</div>
</section>
<!-- End Blog Block -->
<script type="text/javascript">
$(document).ready(function () {
$(‘#content‘).infinitescroll({
navSelector: "#next:last",
nextSelector: "a#next:last",
itemSelector: "#content",
debug: true,
extraScrollPx: 20,
dataType: ‘json‘,
loading: {
//加载效果
finishedMsg: ‘No more pages to load‘,
},
maxPage: 3,

template: function (data) {
//data表示服务端返回的json格式数据，这里需要把data转换成瀑布流块的html格式，然后返回给回到函数
 
var content = ‘‘;
for (var i = 0; i < data.Data.length; i++) {
content += ‘ <div class="post link"> ‘
+ ‘ <span class="date">30<br><small>Sep</small></span> ‘
+ ‘ <span class="date" style="width:63px;height:63px;padding-bottom:0px;border-bottom:0px">‘
+ ‘ <img src="‘ + data.Data[i].imgUrl + ‘" style="width:63px;height:63px;padding:0px;border:0px" width="63" height="63" />‘
+ ‘ </span>‘
+ ‘ <div class="post-title">‘
+ ‘ <h2><a href="/Home/article?ID=‘ + data.Data[i].ID + ‘">‘ + data.Data[i].Title + ‘</a></h2>‘
+ ‘ <div class="post-meta">‘
+ ‘ <h6> 日期:‘ + data.Data[i].PostDater + ‘ &nbsp;&nbsp;作者:‘ + data.Data[i].Poster + ‘</h6>‘
+ ‘ </div>‘
+ ‘ </div>‘
+ ‘ </div> ‘;
}
}
return content;
}
 
//,function (newElements) {
// $("#content").prepend(newElements);
//}
);
});
</script>

时间： 2024-10-02 15:09:50

infinitescroll 通过无限制分页(json方式完整代码)的相关文章

python实现邮件发送完整代码（带附件发送方式）

实例一:利用SMTP与EMAIL实现邮件发送,带附件(完整代码) __author__ = 'Administrator'#coding=gb2312 from email.Header import Headerfrom email.MIMEText import MIMETextfrom email.MIMEMultipart import MIMEMultipartimport smtplib, datetime def SendMailAttach(): msg = MIMEMultip

Android+struts2+JSON方式的手机开发（Login）

在手机的后台服务无论是调用WebService还是Http请求,多数都是采用Android的HttpClient实现相关的调用实现.本文实现Android+Struts2+JSON方式实现为手机前台提供服务. 涉及的知识点: 1.Struts2框架的搭建(包括Struts2的jSON插件) 2.Android前台访问Web采用HttpClient方式. 3.Android采用JSON的解析. 功能:模拟远程登录流程: 手机后台服务:由于采用Struts2的JSON响应格式,响应详细会自动转变为J

python调用接口,python接收post请求接口(附完整代码)

与Scala语言相比,Python有其独特的优势和广泛的应用,python调用接口,因此Spark也推出了PySpark,它在框架上提供了一个使用Python语言的接口,python接收post请求接口为数据科学家使用框架提供了方便. 众所周知,Spark框架主要由Scala语言实现,它还包含少量的Java代码.Spark面向用户的编程接口也是Scala.然而,Python在数据科学领域一直占据着重要的地位.仍然有大量的数据工程师使用各种Python数据处理和科学计算库,如numpy.熊猫.sc

JQuery以JSON方式提交数据到服务端

JQuery将Ajax数据请求进行了封装,从而使得该操作实现起来容易许多.以往我们要写很多的代码来实现该功能,现在只需要调用$.ajax()方法,并指明请求的方式.地址.数据类型,以及回调方法等.下面的代码演示了如何将客户端表单数据封装成JSON格式,然后通过JQuery的Ajax请求将数据发送到服务端,并最终将数据存储到数据库中.服务端定义为一个.ashx文件,事实上你可以将服务端定义为任何能接收并处理客户端数据的类型,如Web Service,ASP.NET Page,Handler等. 首

Spring mvc整合mybatis基于mysql数据库实现用户增删改查及其分页显示的完整入门实例【转】

Spring mvc整合mybatis例子, 基于mysql数据库实现对用户的增.删.改.查,及分页显示的完整例子. 查询显示用户 添加用户 更新用户 官方验证: 项目截图 必须修改applicationContext.xml中mysql的配置为本地的,否则启动失败. 另外jar包多一个ehcache.jar无关紧要,删除即可. 1. 使用阿里巴巴Druid连接池(高效.功能强大.可扩展性好的数据库连接池.监控数据库访问性能.支持Common-Logging.Log4j和JdkLog,监控数据库

单点登录SSO：可一键运行的完整代码

h1.title,h2.title { padding-left: 2rem !important; color: rgb(71, 91, 204) !important } h1.title { font-size: 22px !important } h2.title { font-size: 18px !important } .padding { padding: 0 2rem; padding-bottom: 1rem } blockquote.menu { padding-left:

常见的分页实现方式

1.MySql查询语句: --------  select * from t_student limit 0,10   从第一条开始查,查十条 2.PostgreSQL查询语句: select * form t_student limit 10 offset 0 3.Oracle查询语句 select * from ( select s.*, rownum rn from (select * from t_student) s where rownum<=10 ) where rn>=1; 4

小蚂蚁学习APP接口开发（1）—— json方式封装通信接口

前段时间,和公司的一个安卓程序员配合开发一款简单的APP,因为第一次写,时间也紧张,总感觉写的不是那么的完美,趁着这段时间好好总结一下经验. 对于APP的请求,服务器返回的数据类型一般是json和xml. xml和json的区别: 可读性方面--xml占优.因为它是有很多个节点组成的,节点的名称可以自定义. 生成数据方面--json占优.在PHP中要生成一条json数据,只需要一个内置函数就可以实现,而xml则需要拼接字符串或者实例化对象才能够实现,所以,json更为简便一些. 传输速度方面--

json方式封装接口通信

编写response类: <?php class response{ /** * 按json方式输出通信数据 * @param integer $code 状态码 * @param string $message 提示信息 * @param array $data 提示信息 * return string */ public static function json($code,$message = '',$data = array()){ if(!is_numeric($code)){ ret