JQery easyUI 滚动分页

var s1 = new Date().getTime();
     $(document).ready(function(){
        var flag = true;
        //鼠标滑轮滚动事件的处理
        var scrollFunc=function(e){
            var s2 = new Date().getTime();
            console.log(s2);
            if(s2-s1<500) return;//控制滚轮滑动翻页的时间差
            var direct=0;
            e=e || window.event;
            if(e.wheelDelta){//IE/Opera/Chrome
                if(flag){
                    s1 = new Date().getTime();              
                    pageTurring(e.wheelDelta);
                }else{
                    flag = true;
                }
            }else if(e.detail){//Firefox
                s1 = new Date().getTime();
                pagepageTurringFirefox(e.detail);

}
            // ScrollText(direct);
        };

//注册事件
        if(document.addEventListener){
            document.addEventListener(‘DOMMouseScroll‘,scrollFunc,false);
        }
        window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome

//其他浏览器翻页,根据参数的进行翻页(负数为下一页,)
        function pageTurring(e){
            flag = false;
            var grid = $(‘#dgairbox‘); 
            var options = grid.datagrid(‘getPager‘).data("pagination").options; 
            var pageNum = options.pageNumber;//当前页数 
            var total = options.total; 
            var max = Math.ceil(total/options.pageSize);

if(e<0){
                $(‘#dgairbox‘).datagrid(‘gotoPage‘, {
                    page: pageNum+1 > max ? 1:pageNum+1,
                    callback: function(page){
                        // console.log(page);
                    }
                });
            }else if(e>0){
                $(‘#dgairbox‘).datagrid(‘gotoPage‘, {
                    page: pageNum-1 <= 0 ? max:pageNum-1,
                    callback: function(page){
                        //console.log(page);
                    }
                });
            }
        }
        //火狐翻页,根据参数的进行翻页(正数为下一页,)
        function pagepageTurringFirefox(e){
            var grid = $(‘#dgairbox‘); 
                var options = grid.datagrid(‘getPager‘).data("pagination").options; 
            var pageNum = options.pageNumber;//当前页数 
            var total = options.total; 
            var max = Math.ceil(total/options.pageSize);
            if(e>0){
                $(‘#dgairbox‘).datagrid(‘gotoPage‘, {
                    page: pageNum+1 > max ? 1:pageNum+1,
                    callback: function(page){
                        // console.log(page);
                    }
                });
            }else if(e<0){
                $(‘#dgairbox‘).datagrid(‘gotoPage‘, {
                    page: pageNum-1 <= 0 ? max:pageNum-1,
                    callback: function(page){
                        //console.log(page);
                    }
                });
            }
        }
    });

原文地址:https://www.cnblogs.com/Eric-5279/p/9217341.html

时间: 2024-10-10 09:41:25

JQery easyUI 滚动分页的相关文章

EasyUI Datagrid 分页

EasyUI Datagrid 分页,两种情况 第一种,向后台请求数据,点击分页请求一次,点击排序请求一次.使用表格自带的ajax. box.datagrid({ url: '', //后台请求地址 queryParams: {'name':'','age':''},//向后台传参 width: '100%', height: '500px', fitColumns: true, singleSelect:true, remoteSort:true, pageList : [ 5, 10, 20

jqgrid 滚动分页

有时,我们不想在底部显示分页信息,而是通过用户滚动鼠标,当鼠标滚到到底自动加载下一页数据,再滚动再加载直至数据全部加载完毕.如何配置? 设置 scroll:true   emptyrecords用于在滚动到数据全部加载完毕后的提示 emptyrecords:"已经到底了" $("#jqGrid").jqGrid({ ... scroll: true,//是否启动滚动分页 emptyrecords: '没有数据了',//滚到到底以后的提示文 ... }); 如果配置为

移动端web 滚动分页

前端代码: <script type="text/javascript"> var page = 2; //当前页的页码 var flagNoData = false; //false var allpage = @Model.PageCount; //总页码,会从后台获取 function showAjax(currentIndex) { $.ajax({ url: "@Url.Action("GetEmployeeData", "

EasyUI + Struts2 + Ajax 显示 easyui datagrid 分页效果

1.Html代码 1 <script type="text/javascript" src="/js/easyui/jquery.min.js"></script> 2 <script type="text/javascript" src="/js/easyui/jquery.easyui.min.js"></script> 3 <script type="tex

asp.net mvc easyui datagrid分页

提到 asp.net mvc 中的分页,很多是在用aspnetpager,和easyui datagrid结合的分页却不多,本文介绍的是利用easyui 中默认的分页控件,实现asp.net mvc分页. easyui datagrid分页要求数据采用的格式 :{total:2,row:[]}, 在asp.net mvc 中服务器端只要返回这符合这样格式的json数据就好. 页面前端: 服务器端: 附带asp.net 结合 easyui 增删改查的例子: asp.net mvc easyui d

easyui datagrid分页要点总结

easyui的datagird插件比较好用,也很方便.网上也有很多热的网友贴出了使用代码,但是很少有网友指出在使用过程应该注意的地方,让我实在搞不清分页应该怎么使用.我就说下使用分页功能中要注意的一个小地方. 1.首先你的html得有个table标签 <table id="tt" ></table> 在js页面加载代码中$(document).ready({})加入代码: $('#tt').datagrid({ singleSelect:true, //True

jquery easyui datagrid 分页 详解

前些天用jquery easyui的table easyui-datagrid做分页显示的时候,折腾了很久,后来终于解决了.其实不难,最主要我不是很熟悉前端的东西. table easyui-datagrid分页 有一个附加的分页控件,只需后台获取分页控件自动提交的两个参数rows(每页显示的记录数)和page(当前第几页)然后读取相应页数的记录,和总记录数total一块返回即可. 1.界面 2.前端代码 <table id="dg" title="文章管理"

EasyUI 页面分页

DAO package com.hanqi.dao; import java.util.ArrayList; import java.util.List; import org.hibernate.Session; import org.hibernate.SessionFactory; import org.hibernate.Transaction; import org.hibernate.boot.registry.StandardServiceRegistryBuilder; impo

easyui datagrid 分页略解

easyui datagrid 本身自带了分页功能. 但是这个需要你自己控制. 在后台可以得到两个datagrid的参数,rows 和page.其中rows是每页要显示的个数,page是第几页.单纯的设置rows是不行 的,datagrid真正显示的是你 从数据库里得到的真正条数,应该用rows当查询条件,得到rows条才行. 传到前台的json传应该是这样的: {"total":50,"rows":[{"sex":"nan16&quo