jQuery 无刷新分页实例代码


Posted in Javascript onNovember 12, 2013
<html>
<head>
     <script type="text/javascript" src="script/jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="script/jquery-1.7.1.js"></script>
        <script type="text/javascript" src="script/jquery.pagination.js"></script>
        <script type="text/javascript">
            $(function(){
                    //此demo通过Ajax加载分页元素
                    var initPagination = function(data) {
                    var feedback = "";
                    $.each(data.list, function(index, d) { 
                        var str =""; 
                        str+= "<dl class='result' style='display:none;'>";
                        str+="<dt><img src='https://3water.com/headshotsByName/balijiang.png?l' alt='图片' width='70' height='70' /></dt>";
                        str+="<dd><a href='#' title='VYyu'>VYyu</a></dd>";
                        str+="<dd class='gray'>2009-09-26 </dd>";
                        str+="<dd>"+d+"</dd>";
                        str+="</dl>";
                        feedback += str; 
                        }); 
                    $("#feedback").empty().append(feedback); //装载对应分页的内容
                    //alert(datac.list.length);
                    //var num_entries = $(".result").length;
                    var num_entries = data.list.length;
                    // 创建分页
                    $("#page").pagination(num_entries, {
                        num_edge_entries: 1, //边缘页数
                        num_display_entries: 5, //主体页数
                        callback: pageselectCallback,
                        items_per_page: 3, //每页显示1项
                        prev_text: "前一页",
                        next_text: "后一页"
                    });
                    pageselectCallback(0);
                    }
function pageselectCallback(page_index, jq){
    var resultList = $(".result");
    //var feedback = "";
    //alert(resultList.length);
    $(".result").each( function(index, data) { 
            //alert(index);
            $(this).css('display','none');
            if(Math.floor(index/3)  == page_index){
            $(this).css('display','block');
            }
            }); 
    return false;
}
//ajax加载
$.getJSON("testPage",null, function(data){initPagination(data)});
});
</script>
</head>
<body>
<div id="feedback" class="feedback"> </div>
<div id="page" class="pager"></div>
</body>
</html>
Javascript 相关文章推荐
jQuery 标题的自动翻转实现代码
Oct 14 Javascript
利用ajaxfileupload插件实现文件上传无刷新的具体方法
Jun 08 Javascript
js全屏显示显示代码的三种方法
Nov 11 Javascript
JavaScript设计模式之原型模式(Object.create与prototype)介绍
Dec 28 Javascript
JavaScript中cookie工具函数封装的示例代码
Oct 11 Javascript
关于vuex的学习实践笔记
Apr 05 Javascript
详解vue slot插槽的使用方法
Jun 13 Javascript
ReactNative Image组件使用详解
Aug 07 Javascript
vue.js异步上传文件前后端实现代码
Aug 22 Javascript
使用vuex缓存数据并优化自己的vuex-cache
May 30 Javascript
electron实现qq快捷登录的方法示例
Oct 22 Javascript
layui(1.0.9)文件上传upload,前后端的实例代码
Sep 26 Javascript
JS图片切换的具体方法(带缩略图版)
Nov 12 #Javascript
JS实现遮罩层效果的简单实例
Nov 12 #Javascript
javascript静态页面传值的三种方法分享
Nov 12 #Javascript
javascript的渐进增强与平稳退化浅谈
Nov 12 #Javascript
JavaScrip实现PHP print_r的数功能(三种方法)
Nov 12 #Javascript
JavaScript中的字符串操作详解
Nov 12 #Javascript
JavaScript简单实现网页回到顶部功能
Nov 12 #Javascript
You might like
php数据库连接
2006/10/09 PHP
PHP strtotime函数用法、实现原理和源码分析
2015/02/04 PHP
php字符串按照单词进行反转的方法
2015/03/14 PHP
Yii框架连表查询操作示例
2019/09/06 PHP
动态加载js文件 document.createElement
2006/10/14 Javascript
心扬JS分页函数代码
2010/09/10 Javascript
10款新鲜出炉的 jQuery 插件(Ajax 插件,有幻灯片、图片画廊、菜单等)
2011/06/08 Javascript
jquery如何根据值设置默认的选中项
2014/03/17 Javascript
js 自带的 map() 方法全面了解
2016/08/16 Javascript
详解Vue.js组件可复用性的混合(mixin)方式和自定义指令
2017/09/06 Javascript
JS实现碰撞检测的方法分析
2018/01/19 Javascript
Vue全局分页组件的实现代码
2018/08/10 Javascript
实现Vue的markdown文档可以在线运行的方法示例
2018/12/11 Javascript
springboot+vue实现文件上传下载
2020/11/17 Vue.js
[46:53]Secret vs Liquid 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python使用cStringIO实现临时内存文件访问的方法
2015/03/26 Python
详解Python读取配置文件模块ConfigParser
2017/05/11 Python
基于python的Tkinter编写登陆注册界面
2017/06/30 Python
python 生成器协程运算实例
2017/09/04 Python
django站点管理详解
2017/12/12 Python
Tornado高并发处理方法实例代码
2018/01/15 Python
PyQt5 pyqt多线程操作入门
2018/05/05 Python
python实现猜数字小游戏
2020/03/24 Python
Python实现动态循环输出文字功能
2020/05/07 Python
Python趣味实例,实现一个简单的抽奖刮刮卡
2020/07/18 Python
检测用户浏览器是否支持CSS3的方法
2009/08/29 HTML / CSS
施华洛世奇加拿大官网:SWAROVSKI加拿大
2018/06/03 全球购物
留学自荐信的技巧
2013/10/17 职场文书
新学期班主任寄语
2014/01/18 职场文书
户外亲子活动策划方案
2014/02/07 职场文书
《特殊的葬礼》教学反思
2014/04/27 职场文书
班子成员四风问题自我剖析材料
2014/09/29 职场文书
个人借款协议书范本
2014/11/17 职场文书
入党转正介绍人意见
2015/06/03 职场文书
OpenCV-Python实现轮廓的特征值
2021/06/09 Python
浅谈音视频 pts dts基本概念及理解
2022/08/05 数码科技