文档章节

jquery ajax 分页

ericSM
 ericSM
发布于 2016/06/21 18:53
字数 716
阅读 75
收藏 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
粉丝 16
博文 116
码字总数 92169
作品 0
南京
项目经理
私信 提问
20 个 jQuery 分页插件和教程,附带实例

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

红薯
2012/04/04
14.7K
6
19个 jQuery 分页插件和教程,附带实例

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

凯文加内特
2014/04/30
0
0
21 个最佳的 jQuery 翻页插件

jPages [ Demo || Download ] jPages 是一个客户端的分页插件,但提供很多特性例如自动翻页、键盘和滚动浏览,延迟显示以及完全可定制的导航面板。 Easy pagination with jQuery and Ajax [...

oschina
2013/05/14
10.7K
12
15款提高表格操作的jQuery插件

table表格由于它的浏览器兼容性和复杂的标签嵌套方式,可以算是添加样式最困难的对象之一了。大多数前端er都把网页中的table标签替换为div,主要就是因为div要比table更容易添加CSS样式。但是...

鉴客
2010/08/12
5.7K
1
jQuery 表格工具集

本文搜集了大量 jQuery 表格插件,帮助 Web 设计者更好地驾御 HTML 表格,你可以对表格进行横向和竖向排序,设置固定表头,对表格进行搜索,对大表格进行分页,对表格进行滚动,拖放操作等等...

红薯
2010/04/15
9.4K
10

没有更多内容

加载失败,请刷新页面

加载更多

URL访问网站的网络传输全过程

打开浏览器,在地址栏输入URL,回车,出现网站内容。这是我们几乎每天都在做的事,那这个过程中到底是什么原理呢?HTTP、TCP、DNS、IP这些耳熟能详的名词都在什么时候起着什么作用呢?在这里...

MrBoyce
7分钟前
0
0
都9102年了,还不会Docker?10分钟带你从入门操作到实战上手

Docker简述 Docker是一种OS虚拟化技术,是一个开源的应用容器引擎。它可以让开发者将应用打包到一个可移植的容器中,并且该容器可以运行在几乎所有linux系统中(Windows10目前也原生支持,W...

公众号_Zack说码
8分钟前
1
0
day175-2018-12-12-英语流利阅读-待学习

日本报纸修改二战“慰安妇”描述,引发众怒 雪梨 2018-12-12 1.今日导读 第二次世界大战期间,日本肆意侵略其他国家,所到之处,无数妇女沦为日本士兵肆意践踏的对象。半个多世纪过去了,面对...

飞鱼说编程
10分钟前
1
0
TiDB 源码阅读系列文章(二十一)基于规则的优化 II

在 TiDB 源码阅读系列文章(七)基于规则的优化 一文中,我们介绍了几种 TiDB 中的逻辑优化规则,包括列剪裁,最大最小消除,投影消除,谓词下推和构建节点属性,本篇将继续介绍更多的优化规...

TiDB
16分钟前
0
0
mysql 时间格式化

DATE_FORMAT

1713716445
22分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部