文档章节

jquery ajax 分页

ericSM
 ericSM
发布于 2016/06/21 18:53
字数 716
阅读 72
收藏 6

记录下前端分页中的分页

jquery ajax 消息分页

var Msg = Msg || {};

Msg.notice = {
    start: 0,
    perPage: 2,
    total: '',
    url :  '/api2/workflow/together/',
    urlCur : window.location.pathname.split('/'),

    init: function() {
        var _this = this;
        _this.addData();
    },
    clickMore: function() {
        var _this = this;
        _this.start = _this.start + Msg.notice.perPage;
        if (_this.start < _this.total) {
            _this.addData();
        }
    },
    addData: function()
    {
        var paging = {},
            _this = this;
        paging.start = _this.start;
        paging.perPage = Msg.notice.perPage;
        Common.ajax(
            'GET',
            Msg.notice.url + 'comm/',
            false,
            'JSON',
            {
                userId: Msg.notice.urlCur[3],
                paging: paging
            },
            function(obJson) {
                if (obJson.status !== 'error' && obJson.result) {
                    //渲染页面数据
                    _this.total = parseInt(obJson.result.count, 10);
                    _this.addAllList(obJson.result);
                    _this._morebutton(obJson.count);
                } else {
                    $('#hudonggoutong').text('暂无内容!');
                }
            }
        );
    },
    addAllList: function(res) {
        var htmlStr = '',
            data = res.data;
        $.each(data, function(k, v) {
            htmlStr += '<div class="todolist-list-row-b">';
            htmlStr += '<a class="title user-color" data-commission-status="" data-instance-status=""' +
                'data-editable="true" data-node-id="WorkNode_1" data-instance-id="11203"' +
                'data-workflow-id="ChaLvLeiJiHuaShenQin">' + v.appTitle + '</a>';
            htmlStr += '<div class="created-by"><span class="at-user">' + v.modifier + '</span>' +
                '<span class="at-user user-color">@</span><span class="at-user">' + v.receiver + '</span> ' +
                '<span class="at-user">' + v.msg + '</span><span class="time">' + v.time + '</span></div>';
            htmlStr += '<div class="clear"></div></div>';
        });

        $('#hudonggoutong-list').append(htmlStr);
    },
    _morebutton: function(total) {
        var start = this.start + this.perPage;

        if (+start < + total) {
            //显示more
            $('.moreDivNotice').show();
        } else {
            $('.moreDivNotice').hide();
        }
    }
};

$(function() {
    var _this = this;
    $('#moreSpanNotice').on('click', function() {
        Msg.notice.clickMore();
    });
});

 

jquery ajax 流程分页中流程类别分页,分页中的分页

var Workflow = Workflow || {};

Workflow = {
    start: 0,
    perPage: 2,
    startApp: 0,
    perPageApp: 5,
    total: '',
    url :  '/api2/workflow/together/',
    urlCur : window.location.pathname.split('/'),

    init: function() {
        var _this = this;
        _this.addData();
    },
    clickMore: function() {
        var _this = this;
        _this.start = _this.start + Workflow.perPage;
        if (_this.start < _this.total) {
            _this.addData();
        }
    },
    clickMoreApp: function(appObj, bgColor, left_right, dataCount, moreApp) {
        var _this = this;
        if (+appObj.start_definition_id < +dataCount) {
            _this.addAppData(appObj, bgColor, left_right, dataCount, moreApp);
        }
    },
    addData: function()
    {
        var paging = {},
            _this = this;
        paging.start = _this.start;
        paging.perPage = Workflow.perPage;
        Common.ajax(
            'GET',
            Workflow.url + 'all/',
            false,
            'JSON',
            {
                userId: Workflow.urlCur[3],
                paging: paging
            },
            function(obJson) {
                if (obJson.status !== 'error' && obJson.result) {
                    //渲染页面数据
                    _this.total = parseInt(obJson.result.count, 10);
                    _this.addAllList(obJson.result);
                    _this._morebutton(obJson.result.count);
                } else {
                    $('#gongtonggongzuo').text('暂无内容!');
                }
            }
        );
    },
    addAllList: function(res) {
        var _this = this,
            htmlStr = '',
            left_right = 'left',
            bgColor = 'blue',
            data = res.data;
        $.each(data, function(key, val) {
            switch (key % 4)
            {
                case 0:
                    bgColor = 'blue';
                    break;
                case 1:
                    bgColor = 'green';
                    left_right = 'right';
                    break;
                case 2:
                    bgColor = 'yellow';
                    break;
                case 3:
                    bgColor = 'red';
                    left_right = 'right';
                    break;
                default:
            }

            _this.addAppData(val, bgColor, left_right);

        });

        $('#gongtonggongzuo-list').append(htmlStr);
    },
    _morebutton: function(total) {
        var start = this.start + this.perPage;
        if (+start < + total) {
            //显示more
            $('.moreDivWorkflow').show();
        } else {
            $('.moreDivWorkflow').hide();
        }
    },
    _moreAppButton: function(definition_id, start, total) {
        start += Workflow.perPageApp;
        if (+start < + total) {
            //显示more
            $('#moreDivWorkflowApp_' + definition_id + '').show();
        } else {
            $('#moreDivWorkflowApp_' + definition_id + '').hide();
        }
    },
    addAppData: function(appObj, bgColor, left_right, dataCount, moreApp)
    {
        var paging = {},
            _this = this;
        bgColor = typeof bgColor === 'undefined' ? '' : bgColor;
        paging.start = typeof appObj.start_definition_id === 'undefined' ?
            +_this.startApp : +appObj.start_definition_id;
        paging.perPage = Workflow.perPageApp;
        Common.ajax(
            'GET',
            Workflow.url + 'app/',
            false,
            'JSON',
            {
                definitionId: appObj.definition_id,
                userId: Workflow.urlCur[3],
                paging: paging
            },
            function(obJson) {
                if (obJson.status !== 'error' && obJson.result) {
                    //渲染页面数据
                    _this.totalApp = parseInt(obJson.result.count, 10);
                    _this.addAppAllList(appObj, obJson.result, bgColor, left_right, moreApp);
                    _this._moreAppButton(appObj.definition_id,  paging.start, obJson.result.dataCount);
                } else {
                    $('#gongtonggongzuo').text('暂无内容!');
                }
            }
        );
    },
    addAppAllListOne: function(data) {
        var  htmlOneStr = '';
        $.each(data, function(k, v) {
            htmlOneStr += '<div class="todolist-list-row-b gongtonggongzuo-left">';
            htmlOneStr += '<a class="title user-color" data-commission-status="" data-instance-status=""' +
                'data-editable="true" data-node-id="WorkNode_1" ' +
                'data-instance-id=' + v.instance_id + ' data-workflow-id="ChaLvLeiJiHuaShenQin"> ' +
                v.title + '</a>';
            htmlOneStr += '<span class="time">' + v.created_at + '</span><div class="clear"></div></div>';
        });
        return htmlOneStr;
    },
    addAppAllList: function(appObj, val, bgColor, left_right, moreApp) {
        var htmlStrBefore = '',
            htmlStr = '',
            htmlOneStr = '',
            htmlStrAfter = '',
            _this = this,
            data = val.data;
        if (moreApp) {
            htmlOneStr = _this.addAppAllListOne(data);
            $('#moreDivWorkflowApp_GongZuoJiaoBan').before(htmlOneStr);
        } else {
            htmlStrBefore += '<div class="todolist-block board-skin-' + bgColor + ' todolist-' + left_right + '">';
            htmlStrBefore += '<div class="todolist-record todolist-skin-green">' +
                '<div class="todolist-list-row-a"><div class="menu-name menu-' + bgColor + '">' +
                appObj.definition_title +
                '(' + appObj.dataCount + '条)</div>' +
                '<div class="clear"></div>' +
                '</div>';
            htmlOneStr = _this.addAppAllListOne(data);
            htmlStrAfter += '<div id="moreDivWorkflowApp_' + appObj.definition_id + '"' +
                'class="moreDiv moreDivWorkflowApp" data-bgColor="' + bgColor + '" data-left_right="' +
                left_right + '" ' +
                'data-definition_id="' + appObj.definition_id + '" data-definition_title="' +
                appObj.definition_title + '" ' +
                'data-dataCount="' + appObj.dataCount + '"> ' +
                '<span id="moreSpanWorkflowApp" class="moreSpanWorkflowApp">查看更多</span></div>';
            htmlStrAfter += '</div></div>';
            htmlStr = htmlStrBefore + htmlOneStr + htmlStrAfter;
            $('#gongtonggongzuo-list').append(htmlStr);
        }
    },
};

$(function() {
    var _this = this;
    $('#moreSpanWorkflow').on('click', function() {
        Workflow.clickMore();
    });
    $('.moreSpanWorkflowApp').on('click', function() {
        var appObj = {},
            definition_id = $(this).parent().attr('data-definition_id'),
            definition_title = $(this).parent().attr('data-definition_title'),
            left_right = $(this).parent().attr('data-left_right'),
            bgColor = $(this).parent().attr('data-bgcolor'),
            dataCount = $(this).parent().attr('data-datacount');
        appObj = {
            definition_id: definition_id,
            definition_title: definition_title,
            dataCount : dataCount,
            start_definition_id: $(this).parent().siblings().length - 1
        };

        Workflow.clickMoreApp(appObj, bgColor, left_right, dataCount, true);
    });
});

© 著作权归作者所有

共有 人打赏支持
ericSM
粉丝 14
博文 116
码字总数 92169
作品 0
南京
项目经理
19个 jQuery 分页插件和教程,附带实例

在这篇文章中我们将向你介绍 20 个最棒的 jQuery 分页插件以及教程,并提供在线演示。 1.客户端的jQuery 分页插件jPages jPages 是一个客户端的分页插件,但提供很多特性例如自动翻页、键盘和...

凯文加内特
2014/04/30
0
0
jquery常用的插件1000收集

花N长时间积累的Jquery插件,希望大家喜欢。大家还有什么新的插件,请留言,我们一并收录。 感谢大家的支持。 1.accordion类 基于jQuery开发,非常简单的水平方向折叠控件。 Horizontal acc...

Alic
2011/03/07
0
6
jQuery1.4的15个新特性实例精讲

jQuery 1.4 的发布超乎大家的预期,这次并非简单的修修补补,1.4 包含了很多新特性、功能增强和性能提升!本文即向您介绍这些可能对你十分有用的新特性和优化增强。 你可以立刻下载jQuery 1....

monxu
2010/02/20
0
0
很不错的jQuery学习资料和实例

很不错的jQuery学习资料和实例,分享给大家。 这些都是学习Jquery很不错的资料,整理了一下,分享给大家。 希望能对大家的学习有帮助。 帕兰 Noupe带来的51个最佳jQuery教程和实例 , 向大家介...

晨曦之光
2012/03/09
0
0
[转]240多个jQuery插件

Query 是继 prototype 之后又一个优秀的 Javascript 框架。其宗旨是—写更少的代码,做更多的事情。它是轻量级的 js 库(压缩后只有21k) ,这是其它的 js 库所不及 的,它兼容 CSS3,还兼容各种...

穿越星辰
2010/05/13
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

RabbitMQ在CentOS环境安装

1.废话不多说准备一台虚拟机,系统为centos,我这里使用的系统版本如下图所示:

凌晨一点
54分钟前
0
0
线程池相关

在java.util.concurrent包下,提供了一系列与线程池相关的类。 使用线程池的好处 降低资源消耗。通过重复利用已创建的线程降低线程创建和销毁造成的消耗; 提高响应速度。当任务到达时,任务...

edwardGe
55分钟前
0
0
学习大数据这三个关键技术是一定要掌握!

大数据时代全面来临,大数据、人工智能等技术引领科技创新潮流,获得国家政策大力支持,前景广阔。学习大数据技术的人自然是络绎不绝, 学习大数据虽然是一个趋势,但也要注意大数据培训课程...

董黎明
今天
0
0
jetbrains 上传代码到github

设置中找github 获取token 验证是否成功 测试git 生成key,一路回车即可 ssh-keygen -t rsa -C “youremail@example.com” 打开pub复制key,需要再次输入一次密码 验证是否成功,输入yes即可...

阿豪boy
今天
0
0
分布式服务框架(拾遗)

前言 现在的大部分工程都已经是基于分布式架构来处理。所以这里对分布式框架做一个简单的总结 常用的RPC框架 RPC框架原理 RPC(Remote Procedure Call,远程过程调用)一般用来实现部署在不同...

kukudeku
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部