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 相关文章推荐
根据地区不同显示时间的javascript代码
Aug 13 Javascript
jquery下json数组的操作实现代码
Aug 09 Javascript
jQuery操作select的实例代码
Jun 14 Javascript
javascript常见数据验证插件大全
Aug 03 Javascript
浏览器复制插件zeroclipboard使用指南
Mar 26 Javascript
用jQuery获取table中行id和td值的实现代码
May 19 Javascript
jQuery Ajax 上传文件处理方式介绍(推荐)
Jun 30 Javascript
JavaScript中使用webuploader实现上传视频功能(demo)
Apr 10 Javascript
ES6学习教程之块级作用域详解
Oct 09 Javascript
vue父组件向子组件(props)传递数据的方法
Jan 02 Javascript
js捆绑TypeScript声明文件的方法教程
Apr 13 Javascript
d3绘制基本的柱形图的实现代码
Dec 12 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
简单的cookie计数器实现源码
2013/06/07 PHP
php使用ob_flush不能每隔一秒输出原理分析
2015/06/02 PHP
php实现XML和数组的相互转化功能示例
2017/02/08 PHP
关于__defineGetter__ 和__defineSetter__的说明
2007/05/12 Javascript
Web开发者必备的12款超赞jQuery插件
2010/12/03 Javascript
GridView中获取被点击行中的DropDownList和TextBox中的值
2013/07/18 Javascript
jquery的flexigrid无法显示数据提示获取到数据
2013/07/19 Javascript
jquery获取一组checkbox的值(实例代码)
2013/11/04 Javascript
正则表达式中特殊符号及正则表达式的几种方法总结(replace,test,search)
2013/11/26 Javascript
JS完整获取IE浏览器信息包括类型、版本、语言等等
2014/05/22 Javascript
HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
2016/01/26 Javascript
js输出数据精确到小数点后n位代码
2016/07/02 Javascript
bootstrap 表单验证使用方法
2017/01/11 Javascript
ES6学习笔记之正则表达式和字符串正则方法分析
2017/04/25 Javascript
weex里Vuex state使用storage持久化详解
2017/09/09 Javascript
vue中遇到的坑之变化检测问题(数组相关)
2017/10/13 Javascript
解决vue的变量在settimeout内部效果失效的问题
2018/08/30 Javascript
JavaScript数据结构与算法之二叉树添加/删除节点操作示例
2019/03/01 Javascript
webpack结合express实现自动刷新的方法
2019/05/07 Javascript
js+html+css实现手动轮播和自动轮播
2020/12/30 Javascript
Python深入学习之内存管理
2014/08/31 Python
python 计算两个日期相差多少个月实例代码
2017/05/24 Python
Python super()函数使用及多重继承
2020/05/06 Python
PyQt5 文本输入框自动补全QLineEdit的实现示例
2020/05/13 Python
浅谈keras保存模型中的save()和save_weights()区别
2020/05/21 Python
台湾旅游网站:灿星旅游
2018/10/11 全球购物
玲玲的画教学反思
2014/02/04 职场文书
联欢晚会主持词
2014/03/25 职场文书
职务任命书范本
2014/06/05 职场文书
新闻学专业职业生涯规划范文:我的人生我做主
2014/09/12 职场文书
2014年加油站工作总结
2014/12/04 职场文书
教师节大会主持词
2015/07/06 职场文书
如何做好工作总结!
2019/04/10 职场文书
HTML+CSS 实现顶部导航栏菜单制作
2021/06/03 HTML / CSS
MySQL中order by的使用详情
2021/11/17 MySQL
nginx设置资源请求目录的方式详解
2022/05/30 Servers