Just learning the front end , Need a paging function without refresh , I found a good one , We have a lot to share , Write a part of your own code here , There are... At the front and back , Please refer to , The code is not complete .

Directly on pseudo code < Style code omission , part js Omit , Do not understand the configuration, please refer to the blog -》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> Notice </h3>
<ul class="aside-list" id="oncl">
<li class="cur"> Notice </li>
<li> Industry news </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>
<!-- Journalism -->
<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); // It's stitched in the background here html Content
}
});
}
});
</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>

===================== I'm the divider =============================

Backstage stitching html< What is used here is thinkcmf frame , Partial code omission >

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 No refresh pagination for more related articles

  1. jquery ajax php+mysql No refresh paging Detailed examples

    Recently in contact with jquery and ajax, Pagination is also used in the current project , For a better user experience , Ready to use no refresh paging , This demo Very suitable for novices to learn to view , It's clear , Don't talk much , Go straight to the code . First of all html page ,index ...

  2. No refresh paging jquery.pagination.js

      No refresh paging jquery.pagination.js use Jquery No refresh paging plug-in jquery.pagination.js Achieve no refresh paging effect 1. Plug in parameter list http://www.dtan.so ...

  3. javascript;Jquery; obtain JSON object , No refresh paging , Load asynchronously , Delete asynchronously , example .

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

  4. ASP.NET Ajax Simple no refresh paging

    I've been practicing some recently AJAX No refresh paging , It's easy to write , I don't know about the performance , Ask the great God for advice , If you have better pagination , Welcome to exchange ! I don't have much to say , Go straight to the code ! First of all, I got one from the Internet JS Pagination , I think it's very good (function( ...

  5. asp.net MVC4 +MVCpager No refresh paging

    I'm a rookie , Recently in use MVC4 and MVCpager When doing no refresh pagination , I found that when I click the next page, the data is not Ajax The submitted , It took a long time to find out why , It turns out that Jquery Cited questions , Now glue the code out , Hope to be able to help the programmer that just contacted , The first ...

  6. MvcPager.dll Use to achieve no refresh paging and MvcPager Of Nuget Refresh paging by package

    No refresh paging : 1. introduce JQuery Of NuGet Package 2. Bring in the package 3. introduce MvcPager.dll  ,MvcPager.dll File download link http://pan.baidu.com/s/1hsvB ...

  7. MVC No refresh paging ( Local refresh , With search , Page number selection , Sorting function )

    I've looked at a lot of websites , Most of the comment pages are partially refreshed , But most of the e-commerce product display pages have refresh pages , So I did an example of no refresh pagination for commodity display . Next, I will do a baby function that imitates what Taobao has bought , But mine is no refresh pagination . ...

  8. thinkphp ajax Implementation of no refresh paging effect

    Ideas : Make traditional pagination effect first , And make a new copy Page.class.php class , Modify it , hold js The function in is passed to page Class , Put it on the previous page . The next page . home page . Tail page . Link to url Address changed to js The function of control , In the template page ...

  9. diy Javascript Write a no refresh paging control

    .NET Technology exchange group :337901356 , Welcome to join ! Yes For a website with good user experience , No refresh technology is very important , No refresh , seeing the name of a thing one thinks of its function , It's a partial refresh of the data , used Asp.net Web Form Technology development web page ...

Random recommendation

  1. cstore_fdw Installation and use of the source code analysis

    One .cstore_fdw An introduction to the https://github.com/citusdata/cstore_fdw, This external table extension is created by citusdata Companies to develop , Use RC_file Format for column storage of data . ...

  2. netbeans Setup language

    netbeans The interface language of The default is by system language Designed . If you want to specify , Just add the following parameters . chinese --locale zh:CN english --locale en:US Japanese --locale ja:J ...

  3. Http Status code comparison table

    1xx news 1. 100 Continue       2. 101 Switching Protocol       3. 102 Processing 2xx success 1. 200 OK      ...

  4. JAVA Development -- game 24 spot

    It's easier , Writing is not good , The code uses LOOKANDFELL,QUAQUA8.0 My bag package com.Game24; import java.awt.Container; import java. ...

  5. Android Custom control ( Four )—— Let every one Activity UI They're all elastic

    We've talked about how to make your ScrollView,ListView Have elasticity , today , We're building on that , Make the right changes , Let those be neither ScrollView, Neither ListView Of Activity page ...

  6. Activity Of 4 Two loading modes

    Activity Of 4 Two loading modes To configure Activity You can specify android:launchMode attribute , This property is used to configure the Activity Load mode of . This property supports the following 4 Attribute values . * ...

  7. Based on low code platform (Low Code Platform) Development of small and medium-sized enterprise information projects

    Preface : Small and medium-sized enterprises have a strong demand for informatization , For small and medium-sized enterprise information project software work and programmers , According to the characteristics of small and medium-sized enterprises , Quickly understand the requirements of its informatization project and deliver the project in time , It is a topic worthy of attention and discussion . In recent years , With the global economy ...

  8. docker Deployment installation

    docker use Linux Kernel technology , So it can only run on Linux On , So-called windows The platform is to use boot2Docker Tools ,boot2Docker Is in VisualBox Construct a linux Simplify the environment . B ...

  9. vue2.0 Realization click Click current li, Dynamic switching class

    1, The contents of the document ----// by item Add properties that don't exist , Need to use vue Provided Vue.set( object, key, value ) Method .   Look at the explanation :https://cn.vuejs.org/v2/a ...

  10. ASP.NET MVC Do wechat WEBAPP Call WeChat JSSDK scan

    Do a project today , It's used on wechat , WeChat WEB APP, It uses the function of calling the mobile phone camera to scan the QR code , I remember what was written in a project before , But I can't find the source code of the previous project , If you want to copy and paste, you can't copy it , I have to face the development article of wechat ...