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 相关文章推荐
html+javascript实现可拖动可提交的弹出层对话框效果
Aug 05 Javascript
Jquery easyui 下loaing效果示例代码
Aug 12 Javascript
JavaScript字符串对象的concat方法实例(用于连接两个或多个字符串)
Oct 16 Javascript
javascript中使用正则表达式清理table样式的代码
Apr 01 Javascript
jQuery EasyUI之DataGrid使用实例详解
Jan 04 Javascript
javascript实现随机显示星星特效
Jan 28 Javascript
jQuery获取及设置表单input各种类型值的方法小结
May 24 Javascript
使用canvas及js简单生成验证码方法
Apr 02 Javascript
Vue-router结合transition实现app前进后退动画切换效果的实例
Oct 11 Javascript
详解vue+css3做交互特效的方法
Nov 20 Javascript
node.js到底要不要加分号浅析
Jul 11 Javascript
JavaScript 正则应用详解【模式、欲查、反向引用等】
May 13 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的memcached客户端memcached
2011/06/14 PHP
PHP的curl实现get,post和cookie(实例介绍)
2013/06/17 PHP
PHP实现15位身份证号转18位的方法分析
2019/10/16 PHP
转换json格式的日期为Javascript对象的函数
2010/07/13 Javascript
IE8中动态创建script标签onload无效的解决方法
2014/12/22 Javascript
jquery实现简单的表单验证
2015/11/17 Javascript
JS实现倒计时(天数、时、分、秒)
2016/11/16 Javascript
javascript 使用正则test( )第一次是 true,第二次是false
2017/02/22 Javascript
微信小程序封装http访问网络库实例代码
2017/05/24 Javascript
微信小程序 密码输入(源码下载)
2017/06/27 Javascript
微信小程序icon组件使用详解
2018/01/31 Javascript
vue+axios新手实践实现登陆的示例代码
2018/06/06 Javascript
基于React+Redux的SSR实现方法
2018/07/03 Javascript
JavaScript中 ES6变量的结构赋值
2018/07/10 Javascript
Vue2.2.0+新特性整理及注意事项
2018/08/22 Javascript
js blob类型url的视频下载问题的解决
2019/11/29 Javascript
python根据给定文件返回文件名和扩展名的方法
2015/03/27 Python
如何在Python函数执行前后增加额外的行为
2016/10/20 Python
python+tkinter编写电脑桌面放大镜程序实例代码
2018/01/16 Python
python方法生成txt标签文件的实例代码
2018/05/10 Python
解决pycharm 误删掉项目文件的处理方法
2018/10/22 Python
浅谈numpy生成数组的零值问题
2018/11/12 Python
Python Tornado核心及相关原理详解
2020/06/24 Python
PyCharm 2020.2下配置Anaconda环境的方法步骤
2020/09/23 Python
python Scrapy框架原理解析
2021/01/04 Python
《颐和园》教学反思
2014/02/26 职场文书
电子商务专业求职信
2014/07/10 职场文书
2014年社区妇联工作总结
2014/12/02 职场文书
小学中等生评语
2014/12/29 职场文书
2015年乡镇发展党员工作总结
2015/03/31 职场文书
2015中秋节晚会主持词
2015/07/01 职场文书
小学体育组工作总结2015
2015/07/21 职场文书
《学会看病》教学反思
2016/02/17 职场文书
导游词之宁夏贺兰山岩画
2019/11/08 职场文书
php 获取音视频时长,PHP 利用getid3 获取音频文件时长等数据
2021/04/01 PHP
深入理解go缓存库freecache的使用
2022/02/15 Golang