jQuery.pager无刷新分页

Posted on 2016-05-04 11:31  Erick-x  阅读(262)  评论(0)    收藏  举报

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

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

 1 <tc_extend name="Public:common"/>
 2 <block name="title"><title>{$title}</title></block>
 3 <block name="JS">
 4 </block>
 5 <block name="content"> 
 6 <!-- banner -->
 7 <div class="banner"></div><div class="shadow"></div>
 8 <div id="content_2">
 9 <div class="side">
10 <h3>公告</h3>
11 <ul class="aside-list" id="oncl">
12 <li class="cur">公告</li>
13 <li>行业新闻</li>
14 </ul>
15 </div>
16 <div id="cut">
17 <div class="list-con" style="display:block ">
18 <ul class="new_list" id='page'>
19 <volist name="newslist" id ="news"> 
20 <li>
21 <!--新闻-->
22 <a href="{:U('Index/newsList',array('id'=>$news['id']))}" class="news">
23 <if condition="empty($news['smeta'] eq false)">
24 <img src="__UPLOAD__{$news['smeta']}">
25 </if>
26 <h4>{$news['post_title']}</h4>
27 <p>{$news['post_excerpt']}</p>
28 <span>{$news['post_modified']}</span>
29 </a>
30 <!--end--> 
31 </li>
32 </volist>
33 </ul>
34 <div class="clear"></div>
35 <div class="pagging">
36 <div class="tcdPageCode"></div>
37 </div>
38 </div>
39 </div>
40 </div>
41 
42 <div class="clear"></div>
43 
44 </block>
45 <block name="FJS">
46 
47 <script src="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"></script>
48 <script src="http://www.lanrenzhijia.com/ajaxjs/jquery.page.js"></script>
49 <script>
50 $(".tcdPageCode").createPage({
51 pageCount:{$count},
52 current:1,
53 backFn:function(p){
54 $.ajax({
55 type:'post',
56 url:'index/getPage',
57 data:'p='+p,
58 dataType:'json',
59 success:function(data){
60 $("#page").html(data.info); //此处在后台拼接html内容
61 }
62 });
63 }
64 });
65 </script>
66 
67 <script>
68 $("#oncl li").click(function(){
69 $("#oncl li").eq($(this).index()).addClass("cur").siblings().removeClass('cur');
70 $(".list-con").hide().eq($(this).index()).show();
71 });
72 </script>
73 </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);
}