记录项目中用的laypage分页代码

最终才觉得,好记性不如烂笔头,毕竟已经不是刚毕业时候的巅峰了,精力有所下降,很多时候记不住东西。

参考url:http://www.layui.com/laypage/

直接上代码了

<script src="/assets/js/laypage/laypage.js"></script>

进入页面时,默认加载第一页;定时器每隔60秒取新数据:

    $(document).ready(function () {
        initPaganation();
        setInterval(function() {
            initPaganation();
    }, 60000);
    });

定义全局变量,保存当前页码:

    var pageConf = {
        currentPage: 1,
        pageSize: 10
    };
    function initPaganation() {
        var filter = getQueryAccount();

        var tableForSubTraderSearchArrays = $("#tableForSubTraderSearch input");

        var filter_stockCode = tableForSubTraderSearchArrays.eq(0).val();
        $.ajax({
            type: "POST",
            dataType: "json",
            url: "/*.do",
            data: {
                currentPage: pageConf.currentPage,
                pageSize: pageConf.pageSize,
                filter_subAccountNo: filter.checkedSubAccountId,
                filter_stockCode: filter_stockCode,
                isCalcSubTraders: filter.isCalcSubTraders
            },
            success: function (data) {
                hideLoading();
                if (data.state == 2) {
                    return;
                }

                var totalSize = data.size;
                var totalPage;
                if (totalSize % pageConf.pageSize == 0) {
                    totalPage = totalSize / pageConf.pageSize;
                } else {
                    totalPage = totalSize / pageConf.pageSize + 1;
                }
                laypage({
                    cont: $("#paganation"), //容器。值支持id名、原生dom对象,jquery对象,
                    pages: totalPage, //总页数
                    curr:pageConf.currentPage,//当跳转到其他页后,全局变量被修改,这边就能根据之前的页码保证刷新后依然还是之前的那一页;比如刷新前停在第二页,那么刷新后仍能保持在第二页
                    skip: true, //是否开启跳页
                    skin: ‘#AF0000‘,
                    groups: 5, //连续显示分页数
                    jump: function (obj, first) { //触发分页后的回调
                        if (!first) { //点击跳页触发函数自身,并传递当前页:obj.curr
                            pageConf.currentPage = obj.curr;
//                            debugger
                            searchList(pageConf.currentPage, pageConf.pageSize);
                        }
                    }
                });
                responseHandle(data);
            }

        });
    }
    function searchList(currentPage, pageSize) {
//        showLoading();
        var filter = getQueryAccount();
        var arrays = $("#tableForSubTraderSearch input");

        var filter_stockCode = arrays.eq(0).val();
        var filter_deadlineStartTime = arrays.eq(1).val();
        var filter_deadlineEndTime = arrays.eq(2).val();
        $.ajax({
            type: "POST",
            dataType: "json",
            url: "/*.do",//此处的请求路径和上面的是一样的
            data: {
                currentPage: currentPage,
                pageSize: pageSize,
                filter_subAccountNo: filter.checkedSubAccountId,
                filter_stockCode: filter_stockCode,
                isCalcSubTraders: filter.isCalcSubTraders
            },
            success: responseHandle
        });

    }
    function responseHandle(data) {
        if (data.state != 0) {
            $(".s-tab-table  tr:not(:first)").html("");
            return;
        }    //process data
    }
时间: 2024-07-29 18:41:34

记录项目中用的laypage分页代码的相关文章

JAVA Web项目中用到Redis的代码调试

JAVA Web项目中用到Redis的代码调试方法 在项目开发中用到了Redis,需要调试输出数据的正确性, 方法一:修改代码,暂时不从Redis取数据 方法二:清除Redis数据库中的所有key 登录Redis服务器,切换目录到Redis的目录: cd /opt/redis-2.8.13/src/ 清除Redis数据库中的所有key ./redis-cli flushall

JAVAEE——BOS物流项目05:OCUpload、POI、pinyin4J、重构分页代码、分区添加、combobox

1 学习计划 1.实现区域导入功能 n OCUpload一键上传插件使用 n 将文件上传到Action n POI简介 n 使用POI解析Excel文件 n 完成数据库操作 n 使用pinyin4J生成简码和城市编码 2.区域分页查询 n 页面调整 n 服务端实现 3.重构分页代码 n BaseAction n 子类Action 4.分区添加功能 n 什么是分区 n 页面调整(combobox使用) n 服务端实现 2 实现区域导入功能 2.1 jquery OCUpload一键上传插件使用 O

拿来主义:layPage分页插件的使用

布衣之谈 所谓插件,大概就是项目中可插可拔的比较小功能化的组件:这些功能组件若能力可及,自己也可以完成——也即自己造轮子,但翻看各种技术社区,相关领域的神人们往往会有更好的实现方案贡献出来,这个时候你只需要满怀崇敬之心.感激之情,在遵循别人的使用约定的前提下拿过来应用在自己的项目中即可,省却了很多自造车轮的成本.就像苹果造机,虽名苹果,但其零部件全都是世界各地各个功能厂商共同贡献的结果.编程亦是此理,博主入编程的坑稍晚,但也越发的感觉到,在各种功能组件以及技术框架越来越普遍且适用的今天,正是依靠

转载:分页原理+分页代码+分页类制作

分页显示是一种非常常见的浏览和显示大量数据的方法,属于web编程中最常处理的事件之一.对于web编程的老手来说,编写这种代码实在是和呼吸一样自然,但是对于初学者来说,常常对这个问题摸不着头绪,因此特地撰写此文对这个问题进行详细的讲解. 一.分页原理:       所谓分页显示,也就是将数据库中的结果集人为的分成一段一段的来显示,这里需要两个初始的参数: 每页多少条记录($PageSize)?       当前是第几页($CurrentPageID)? 现在只要再给我一个结果集,我就可以显示某段特

iOS 项目中用到的一些开源库和第三方组件

iOS 项目中用到的一些 iOS 开源库和第三方组件 分享一下我目前所在公司 iOS 项目中用到的一些 iOS 开源库和第三方组件, 感谢开源, 减少了我们的劳动力, 节约了我们大量的时间, 让我们有更多的时间和精力能更加专注的做好自己的产品 用到的组件 1.通过CocoaPods安装 项目名称 项目信息 AFNetworking 网络请求组件 FMDB 本地数据库组件 SDWebImage 多个缩略图缓存组件 UICKeyChainStore 存放用户账号密码组件 Reachability 监

分页原理+分页代码+分页类制作

分页显示是一种非常常见的浏览和显示大量数据的方法,属于web编程中最常处理的事件之一.对于web编程的老手来说,编写这种代码实在是和呼吸一样自然,但是对于初学者来说,常常对这个问题摸不着头绪,因此特地撰写此文对这个问题进行详细的讲解. 一.分页原理:       所谓分页显示,也就是将数据库中的结果集人为的分成一段一段的来显示,这里需要两个初始的参数: 每页多少条记录($PageSize)?       当前是第几页($CurrentPageID)? 现在只要再给我一个结果集,我就可以显示某段特

angular.js分页代码的实例

对于大多数web应用来说显示项目列表是一种很常见的任务.通常情况下,我们的数据会比较多,无法很好地显示在单个页面中.在这种情况下,我们需要把数据以页的方式来展示,同时带有转到上一页和下一页的功能.现在在学习angular,使用angularjs 分页,基于 directive 实现,样式使用的 bootstrap,直接在 html代码中加入 标签即可调用. 先来看下效果图 实例代码 1 app.directive('pagePagination', function(){ 2 return {

php 分页原理+分页代码+分页类制作

分页显示是一种非常常见的浏览和显示大量数据的方法,属于web编程中最常处理的事件之一.对于web编程的老手来说,编写这种代码实在是和呼吸一样自然,但是对于初学者来说,常常对这个问题摸不着头绪,因此特地撰写此文对这个问题进行详细的讲解. 一.分页原理:       所谓分页显示,也就是将数据库中的结果集人为的分成一段一段的来显示,这里需要两个初始的参数: 每页多少条记录($PageSize)?       当前是第几页($CurrentPageID)? 现在只要再给我一个结果集,我就可以显示某段特

项目中用到的那些方便流行的库-强烈推荐

简介 本文主要对我们项目中的使用过的一些库流行库做些介绍,后期再对其中的一些库,如RxJava,RxAndroid,retrofit ,androidannotations,react-native,做细节的分析,到时候再附上使用的demo. 本文中提到的库,都是目前流行的,而且使用量比较大,是非常好用的库,强烈推荐~ Rx系列 ReactiveX是ReactiveExtensions的缩写,简写为Rx,Rx是一个编程模型,目标是提供一致的编程接口,帮助开发者更方便的处理异步数据流,Rx库支持