1.   阿里云服务器1888元代金券领取
  2.   本网站所有源码包解压密码:www.youhutong.com
会员登录  帮助问答

layPage分页组件 使用教程方法+案例

小川 特效组件
查看演示   下载源码  
【温馨提示】源码包解压密码:www.youhutong.com

layPage是一款前端JS分页组件,适用于异步分页,又可用于传统的整页刷新跳页,还支持信息流加载,并且可无缝迁移至Node.js平台。layPage不依赖于任何第三方库,直接拿来用即可。

1.layPage分页组件 使用教程方法+案例:

【使用方法:】:

<script>
/******************************************************/
/*************分页框架   实际使用讲解案例**************/
/******************************************************
【说明:】
    1、  html头部引入JQuery.js 和 laypage.js 两个JS文件
    2、  定义一个JS方法acrtionPage();
    3、  定义好需要显示内容的DIV的ID   和页码显示DIV的ID
    4、  在他们的下面直接调用JS方法:
         acrtionPage('服务器请求地址','内容显示区父ID','分页页码显示区父ID');

*******************************************************
第一步:
    <script src="./js/jquery.js"><\/script>
    <script src="./js/laypage/laypage.js"><\/script>
*******************************************************
第二步:
    <div id="page-data-content"></div>
    <div class="pagination" id="page"></div>
*******************************************************
第三步:
    <script>acrtionPage('服务器请求地址','内容显示区父ID','分页页码显示区父ID');<\/script>
*******************************************************
第四步:  
    定义JS方法  
*******************************************************/
/**
 * 获取分页数据
 * author:xiaochuan
 * @param url  服务器请求地址
 * @param id1  内容显示区父ID
 * @param id2  分页页码显示区父ID
 * @param curr 当前页码
 */
function acrtionPage(url,id1,id2,curr){
    $.post(url, {
        key1:'参数1',key2:'参数2',key3:'参数3',page: curr || 1  //可以传递自己需要的参数
    }, function(res){
        var obj=eval("("+res+")");//转换为json对象
        var data = obj.data;
        var str = '';
        for (var i = 0; i < data.length; i++) {
            //html组装数据  生成字符串
        };
        if(str == ''){
            str = '<div style="text-align:center;">暂无数据</div>';
            $('#'+id2).hide();
        }
        $('#'+id1).html(str);
        laypage({
            cont: id2, 
            pages: obj.total, //总页数
            skin: '#AF0000',
            curr: curr || 1, 
            //点击分页后的触发回调方法
            jump: function(obj, first){ 
                if(!first){ 
                    //点击跳页触发函数自身,并传递当前页:obj.curr
                    articlePage(url,id1,id2,obj.curr);
                }
            }
        });
    });
}
</script>


 浏览器启用弹出窗口过滤功能,将无法跳转到下载页。在浏览器地址栏右边符号提示处点击允许就可以了!
查看演示   下载源码  
【温馨提示】源码包解压密码:www.youhutong.com
升级为VIP会员,有效期内免费下载本站所有VIP源码  点击升级为VIP

转载请注明来源地址:小川编程 » http://www.youhutong.com/index.php/article/index/61.html

郑重声明:
1、本站源码仅供个人学习研究和交流使用,请于下载后二十四小时内删除
2、本站大多资源来源于高价购买、互联网、会员分享,仅供学习交流使用,本站不提供任何技术支持
3、如侵犯到任何版权问题,请立即告知本站,本站将及时删除并致以最深的歉意
4、如有侵犯您的版权,请提交软件证书、图片地址、源码链接和联系方式到Email:youhutong@youhutong.com

( 2 )个小伙伴在吐槽
    登录帐号  如果已经登录请刷新! 发表我的评论
    表情