刚刚学习前端的时候,需要一个无刷新的分页功能,找了一个不错的,大家也有很大分享,在这里写一个自己的部分代码,前后端都有,需要的小伙伴可以参考一下,代码不是完整的。

直接上伪代码<样式代码省略,部分js省略,不明白配置请参考次博客-》http://blog.csdn.net/starfd/article/details/25292019>

 <tc_extend name="Public:common"/>
<block name="title"><title>{$title}</title></block>
<block name="JS">
</block>
<block name="content">
<!-- banner -->
<div class="banner"></div><div class="shadow"></div>
<div id="content_2">
<div class="side">
<h3>公告</h3>
<ul class="aside-list" id="oncl">
<li class="cur">公告</li>
<li>行业新闻</li>
</ul>
</div>
<div id="cut">
<div class="list-con" style="display:block ">
<ul class="new_list" id='page'>
<volist name="newslist" id ="news">
<li>
<!--新闻-->
<a href="{:U('Index/newsList',array('id'=>$news['id']))}" class="news">
<if condition="empty($news['smeta'] eq false)">
<img src="__UPLOAD__{$news['smeta']}">
</if>
<h4>{$news['post_title']}</h4>
<p>{$news['post_excerpt']}</p>
<span>{$news['post_modified']}</span>
</a>
<!--end-->
</li>
</volist>
</ul>
<div class="clear"></div>
<div class="pagging">
<div class="tcdPageCode"></div>
</div>
</div>
</div>
</div> <div class="clear"></div> </block>
<block name="FJS"> <script src="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"></script>
<script src="http://www.lanrenzhijia.com/ajaxjs/jquery.page.js"></script>
<script>
$(".tcdPageCode").createPage({
pageCount:{$count},
current:1,
backFn:function(p){
$.ajax({
type:'post',
url:'index/getPage',
data:'p='+p,
dataType:'json',
success:function(data){
$("#page").html(data.info); //此处在后台拼接html内容
}
});
}
});
</script> <script>
$("#oncl li").click(function(){
$("#oncl li").eq($(this).index()).addClass("cur").siblings().removeClass('cur');
$(".list-con").hide().eq($(this).index()).show();
});
</script>
</block>

=====================我是分割线=============================

后台拼接html<此处使用的是thinkcmf框架,部分代码省略>

public function getPage() {

$listRows = 4;
$count = 0;
$currentpage = empty($_POST['p'])? 1:$_POST['p'];
$goods_data = $this->_getNewList($listRows, $currentpage,$count);
$html = "";
foreach ($goods_data as $v) {
$html .=" <li><a href='";
$param = array('id'=>$v['id']);
$html .= "{:U('Index/newsList',{$param})}";
$html .= "class='news'>";
if(!empty($v['smeta'])){
$html .= "<img src='__UPLOAD__{$v['smeta']}'>";
}
$html .= "<h4>{$v['post_title']}</h4>";
$html .= "<p>{$v['post_excerpt']}</p>";
$html .= "<span>{$v['post_modified']}</span>";
$html .="</a></li>";
} $data = array('info'=>$html);
$this->ajaxReturn($data);
}

jQuery.pager无刷新分页的更多相关文章

  1. jquery ajax php+mysql 无刷新分页 详细实例

    最近在接触jquery和ajax,当前项目也会用到分页,为了用户体验更好一些,就准备用无刷新分页,这个demo很适合新手学习查看,写的比较清晰,话不多说,直接上代码吧. 首先是html页面,index ...

  2. 无刷新分页 jquery.pagination.js

     无刷新分页 jquery.pagination.js 采用Jquery无刷新分页插件jquery.pagination.js实现无刷新分页效果 1.插件参数列表 http://www.dtan.so ...

  3. javascript;Jquery;获取JSON对象,无刷新分页,异步加载,异步删除,实例。

    AjaxNewsList: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> < ...

  4. ASP.NET Ajax简单的无刷新分页

    最近练习了一些AJAX无刷新分页,写得比较简单,性能不知道怎么样,求大神指点,如有更好的分页提供,欢迎交流! 发话不多说了,直接上代码! 首先从网上下了一个JS分页,感觉挺好用的 (function( ...

  5. asp.net MVC4 +MVCpager 无刷新分页

    本人菜鸟,最近在用MVC4和MVCpager做无刷新分页时,发现点击下一页时数据不是Ajax提交的,弄了好久终于找到原因,原来还是Jquery引用的问题,现在把代码粘出来,希望能帮到刚接触的程序员,第 ...

  6. MvcPager.dll使用实现无刷新分页以及MvcPager的Nuget程序包实现刷新分页

    无刷新分页: 1.引入JQuery的NuGet程序包 2.引入程序包 3.引入MvcPager.dll  ,MvcPager.dll文件下载链接http://pan.baidu.com/s/1hsvB ...

  7. MVC无刷新分页(即局部刷新,带搜索,页数选择,排序功能)

    我查看了很多网站,大部分评论分页都是局部刷新的,可大部分电商商品展示分页都是有刷新页面的,于是我便做了一个商品展示无刷新分页的例子.接下来我就将做一个模仿淘宝已买到的宝贝功能,不过我的是无刷新分页的. ...

  8. thinkphp ajax 无刷新分页效果的实现

    思路:先做出传统分页效果,然后重新复制一份Page.class.php类,对它进行修改,把js中的函数传到page类中,把上一页.下一页.首页.尾页.链接页中的url地址改成js控制的函数,模板页面中 ...

  9. 自己动手用Javascript写一个无刷新分页控件

    .NET技术交流群:337901356 ,欢迎您的加入! 对 于一个用户体验好的网站来说,无刷新技术是很重要的,无刷新,顾名思义,就是局部刷新数据,有用过Asp.net Web Form技术开发网页的 ...

随机推荐

  1. C++ 多态、虚函数机制以及虚函数表

    1.非virtual函数,调用规则取决于对象的显式类型.例如 A* a  = new B(); a->display(); 调用的就是A类中定义的display().和对象本体是B无关系. 2. ...

  2. java selenium (三) 环境搭建 基于Maven

    现在Java的大部分项目都是基于Maven,  在Maven项目中使用Selenium2. 非常简单. 首先你需要配置好Maven的环境 可以参考本博客的Maven教程系列,Maven入门教程(一) ...

  3. MySql创建树结构递归查询存储过程

    在实现F2工作流底层多数据库支持时发现Oracel和mssql都有提供递归子查询,而MySql却没有,没办法需要自己构建存储过程来提供这个递归子查询的功能. -- 当前节点及子节点 -- 参数说明:i ...

  4. JavaScript Array对象sort() 方法小结

    sort() 方法用于对数组的元素进行排序. 语法arrayObject.sort(sortfunction) 参数sortfunction 可选.规定排序顺序.必须是函数. 返回值对数组的引用.请注 ...

  5. function,new function,Function,new Function 之间的区别

    测试一: var fud01 = function()  { var temp = 100; this.temp = 200; return temp + this.temp; } alert(typ ...

  6. PL/SQL设置快捷键

    PL/SQL常用的快捷方式: sf= select * from sr=select t.*,t.rowid from t sd = select distinct * from d=delete f ...

  7. win764位下安装mysql-5.6.22-x64启动服务报 系统错误 1067的解决办法

    本人电脑win7,64位,需要安装mysql服务器.版本:mysql-5.6.22-x64.安装完成后,在服务里面并没有mysql.于是在百度上搜了下,好多信息,最后把解决方法自己总结下. 在${pr ...

  8. codeforces 501 C,D,E

    C题意: 给定n个点(标号0~n-1)的度数(就是与其邻接的点的个数)和所有与它邻接的点标号的异或和,求满足这些条件的树的边应该是怎么连的,将边输出出来 这里可以理解成拓扑排序的方式考虑,当i度数为1 ...

  9. dll学习

    Dll:动态链接库 动态链接库(dll)是包含共享函数库的二进制文件,可以被多个应用程序同时使用.建立应用程序的可执行文件时,不必将DLL连接到应用程序中,而是在运行时动态装载DLL,装载时DLL被映 ...

  10. Debian 7环境安装TightVNC+Gnome远程桌面环境

    昨天下午的时候一个Hostus网友希望在购买的VPS主机中安装桌面环境用来跑软件项目,其实也是我们很多用户习惯的VNC桌面,毕竟在LINUX服务器中也无法去安装WINDOWS系统,尤其是OPENVZ架 ...