文档章节

jquery ajax 分页

ericSM
 ericSM
发布于 2016/06/21 18:53
字数 716
阅读 69
收藏 6
点赞 0
评论 0

记录下前端分页中的分页

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
博文 115
码字总数 91706
作品 0
南京
项目经理
多功能下拉分页选择插件 - SelectPage

多功能下拉选择插件 SelectPage 简洁而强大的下拉分页选择器;支持远程数据(AJAX)、 autocomplete、键盘快速导航操作、分页展示、多选标签、i18n国际化支持等多功能的选择器插件 入门指南、...

TerryZ ⋅ 2017/06/13 ⋅ 10

JAVAWeb对ajax中get与post的使用

JAVAWeb对ajax中get与post的使用 01.使用背景及ajax的介绍 在进行javaWeb的开发中难免会遇到异步请求的情况,为了使网站局部的信息发生变化,而不影响整个页面的话,博主知道的也只用ajax了。...

meiqi0538 ⋅ 04/04 ⋅ 0

使用easyui的DataGrid实现即时编辑(CRUD)

首先来个users.sql /MySQL Data TransferSource Host: localhostSource Database: mydbTarget Host: localhostTarget Database: mydbDate: 2011/6/3 13:59:12/ SET FOREIGNKEYCHECKS=0; -- T......

styleman ⋅ 05/10 ⋅ 0

来学着写自己的“jQuery”

jQuery是一套跨浏览器的JavaScript库,简化HTML与JavaScript之间的操作 jQuery是开源软件,使用MIT许可证授权。jQuery的语法设计使得许多操作变得容易,如操作文档对象(document)、选择文档...

YyzclYang ⋅ 05/24 ⋅ 0

纯 js 让浏览器不缓存 ajax 请求

开发「bufpay.com 个人即时到账收款平台」支付页面需要用到 ajax 轮询订单的支付状态。 现在浏览器对 ajax 的缓存策略遵循 http response header 里面的缓存设置,为了保证每次轮询需要获取最...

ianyway ⋅ 06/14 ⋅ 0

Ajax 跨域难题 - 原生 JS 和 jQuery 的实现对比

讲解顺序: AJAX 的概念及由来 JS 和 jQuery 中的 ajax 浏览器机制 AJAX 跨域 AJAX 的概念 在讲解 AJAX 的概念之前,我先提一个问题。 这是一个典型的 B/S 模式。 PS. B/S结构(Browser/Ser...

梁音 ⋅ 前天 ⋅ 0

jQuery学习笔记--选择器和事件

以下内容参考 W3school 简书 你要是问我什么是jQuery 那可以这么两句话概括: jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。 要学jQuery最好有点javaScript的基础 ...

codingcoge ⋅ 05/17 ⋅ 0

JavaScript异步精讲,让你更加明白Js的执行流程!

JavaScript异步精讲,让你更加明白Js的执行流程! 问题点 什么是单线程,和异步有什么关系 什么是 event-loop jQuery的Deferred Promise 的基本使用和原理 async/await(和 Promise的区别、联...

推荐码发放 ⋅ 05/28 ⋅ 0

dabeng/OrgChart

Native JavaScript(ES6) Version Web Components Version Foreword First of all, thanks a lot for wesnolte's great work -- jOrgChart. The thought that using nested tables to build o......

dabeng ⋅ 06/07 ⋅ 0

vue中axios处理http发送请求的示例(Post和get)

axios中文文档:https://github.com/mzabriskie/axios#using-applicationx-www-form-urlencoded-format 1、安装 node方式 设置index.js: 或者使用cdn方式 2.get请求 3.Post请求 4.执行多个请......

xiaoge2016 ⋅ 05/04 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

分布式数据库中间件DDM的实现原理

随着数据量不断增大,传统的架构模式难以解决业务量不断增长所带来的问题,特别是在业务成线性、甚至指数级上升的情况。此时我们不得不通过水平扩展,把数据库放到不同服务器上来解决问题,也...

中间件小哥 ⋅ 11分钟前 ⋅ 0

字符编码那点事:快速理解ASCII、Unicode、GBK和UTF-8

原作者:阮一峰(ruanyifeng.com),现重新整理发布,感谢原作者的无私分享。 1、引言 今天中午,我突然想搞清楚 Unicode 和 UTF-8 之间的关系,就开始查资料。 这个问题比我想象的复杂,午饭...

JackJiang- ⋅ 18分钟前 ⋅ 0

Spring Cloud构建微服务架构:服务消费(基础)

使用LoadBalancerClient 在Spring Cloud Commons中提供了大量的与服务治理相关的抽象接口,包括DiscoveryClient、这里我们即将介绍的LoadBalancerClient等。对于这些接口的定义我们在上一篇介...

itcloud ⋅ 19分钟前 ⋅ 0

MaxCompute产品最新进展 -- 从马力到计算力

摘要:本文从马力作为功率衡量标准为切入点,介绍了大数据领域的计算力衡量标准TPCBB以及MaxCompute2.0在Big Bench上的卓越表现。同时详细地分享了取得优异成绩背后的产品在最新有哪些进展,...

猫耳m ⋅ 19分钟前 ⋅ 0

Linux系统

声明:本栏目所使用的素材都是凯哥学堂VIP学员所写,学员有权匿名,对文章有最终解释权;凯哥学堂旨在促进VIP学员互相学习的基础上公开笔记。 Linux系统: Unix:是C语言转做出来的,最早的网...

凯哥学堂 ⋅ 19分钟前 ⋅ 0

13.1 设置更改root密码 13.2 连接mysql 13.3 mysql常用命令

13.1 设置更改root密码 启动MySQL数据库 [root@linux-10 ~]# /etc/init.d/mysqld startStarting MySQL SUCCESS! 由于MySQL的相关命令的所在路径不在系统的环境变量中,因此需要将路径添...

影夜Linux ⋅ 22分钟前 ⋅ 0

jeesite shiro+redis实现cache和session共享

jeesite这个开源框架本身集成的有shiro+redis来实现cache和session共享,但是需要修改一下文件配置即可 首先找到spring-context-shiro.xml文件 找到bean id为sessionDAO,将其修改为如下 <!...

wangxujun59 ⋅ 22分钟前 ⋅ 0

基本JNI搭建

1、编写Java代码 首先我们需要编写自己的java代码 public class Hello { static{ System.loadLibrary("hello-jni"); } public native String sayHello();} 2、把...

国仔饼 ⋅ 24分钟前 ⋅ 0

MaxCompute产品最新进展 -- 从马力到计算力

摘要:本文从马力作为功率衡量标准为切入点,介绍了大数据领域的计算力衡量标准TPCBB以及MaxCompute2.0在Big Bench上的卓越表现。同时详细地分享了取得优异成绩背后的产品在最新有哪些进展,...

阿里云云栖社区 ⋅ 28分钟前 ⋅ 0

AppDelegate 设置Root相关

self.window = UIWindow.init(frame: UIScreen.main.bounds) self.window?.backgroundColor = UIColor.white self.window?.makeKeyAndVisible() self.window?.rootViewController = RootTabB......

west_zll ⋅ 36分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部