分页 - 通过HTML表格行自动循环

时间:2015-07-07 16:29:54

标签: javascript jquery html

我有一个有效的HTML页面(不是我的专长),我主要做ERP,但这是我正在进行的一个自定义添加。我使用预处理器(ERP)在HTML表中填充数据。当我在编写HTML文件时,在另一个程序中,我正在填充桌面顶部/底部。在Javascript中,我是当前自动刷新和自动滚动。

我想切换到使用分页(仅限表格)并将每页显示的行数限制为30.我仍然想要自动刷新,但只有在它击中表格中的最后一组行之后。我查找的每个示例都显示了使用" Navigation"的示例,我不想这样做。我希望自动化它,有点像在机场循环飞行时间。

我真的可以使用一些帮助。以下是我的代码。

$(window).load( function() {
        var iWidth = $(document).width()*0.055-getScrollBarWidth();
        var iCellWidth = ($(document).width() - ($(document).width()*0.05-    iWidth))/13;

        $(".data-cell").css("width",iCellWidth+"px");
        $(".red-cells").css("width",iCellWidth+"px");
        $(".orange-cells").css("width",iCellWidth+"px");
        $(".yellow-cells").css("width",iCellWidth+"px");
        $(".mist-cells").css("width",iCellWidth+"px");
        $(".blue-cells").css("width",iCellWidth+"px");
        $(".gray-cells").css("width",iCellWidth+"px");
        $(".cyan-cells").css("width",iCellWidth+"px");
        $(".magenta-cells").css("width",iCellWidth+"px");
        $( ".TFtable tr td:nth-last-child(1)" ).css("width",iWidth+"px");

        pageScroll();
    });

    function getScrollBarWidth () {
        var inner = document.createElement('p');
        inner.style.width = "100%";
        inner.style.height = "200px";

        var outer = document.createElement('div');
        outer.style.position = "absolute";
        outer.style.top = "0px";
        outer.style.left = "0px";
        outer.style.visibility = "hidden";
        outer.style.width = "200px";
        outer.style.height = "150px";
        outer.style.overflow = "hidden";
        outer.appendChild (inner);

        document.body.appendChild (outer);
        var w1 = inner.offsetWidth;
        outer.style.overflow = 'scroll';
        var w2 = inner.offsetWidth;
        if (w1 == w2) w2 = outer.clientWidth;

        document.body.removeChild (outer);

        return (w1 - w2);
    };

    function pageScroll() {
        window.setInterval(function() {
        var elem = document.getElementById('MainDiv');
        var oldTop = elem.scrollTop;

        elem.scrollTop = elem.scrollTop+1;

        if(elem.scrollTop==oldTop)
            elem.scrollTop=0;
        }, 100);
    }
     setTimeout(function () { location.reload(1); }, 600000);

1 个答案:

答案 0 :(得分:0)

我刚刚将其更改为使用通配符创建控制表行限制的单独HTML文件,然后使用window.location指向下一页的setTimeOut。还使用通配符控制setTimeOUT的毫秒数。

新版本,注释掉滚动并仅传递值代替通配符达毫秒,以及到下一页的位置路径。它完美地循环。仍然不像我见过的表格分页那样干净。

/*      function pageScroll() {
        window.setInterval(function() {
        var elem = document.getElementById('MainDiv');
        var oldTop = elem.scrollTop;

        elem.scrollTop = elem.scrollTop+1;

        if(elem.scrollTop==oldTop)
            elem.scrollTop=0;
        }, 100);
    } */
     //setTimeout(function () { location.reload(1); }, 600000);
            //this section of JS will sleep for a set # of minutes, then redirect to next page, sleep time and redirect path controlled in GAB
    //sleep and redirect
    setTimeout(function () { window.location = "#redirect" }, #sleep);