个人中心
gpt4 book ai didi

javascript - 当我到达最后一页时，我向服务器发出 AJAX 调用，以获取数据库中的更多数据，而无需等待单击下一个按钮

转载 作者：行者123 更新时间：2023-11-28 09:26:02 27 4
gpt4 key购买 nike

我的服务器上有一个包含超过 30,000 条记录的大型数据库。我向服务器发出请求，给我前 100 条记录，并使用 Googlevisualization 表分页 Api 显示它们 - 每页 10 条记录。

在我的代码中，我为“page”事件添加了一个事件监听器，并测试了该事件的 page 属性:如果我已到达最后一页，我会进行 AJAX 调用以获取更多数据(另外 100 条记录)

问题是，如果我到达最后一页，它只会加载一秒钟，然后立即进行 Ajax 调用，而无需等待单击下一步，并且对于该结果，它不会更改我的页面属性!我怎样才能做到这一点 - 当我到达最后一个要启用的下一个按钮时，当我单击它时才加载接下来的 100 条记录

这是我到目前为止尝试过的代码:

<html>
    <head> 
     <script type="text/javascript" src="http://www.google.com/jsapi"></script>
        <script type="text/javascript">
        google.load('visualization', '1', {packages: ['table']});
        </script>

    <script>


    var xmlhttp;
    if (window.XMLHttpRequest) 
    {
        xmlhttp = new XMLHttpRequest();
    } else 
    {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    var intRpp=100;
    var intPNum;
    var glPNum;
    var s;  
    var options = {'showRowNumber': true, 'pageSize':intPageSize };     
    var numberOfPages;
    var intPageSize=10;

    function loadXMLDoc(l)
    {       
         intPNum=l;
          s=l;

        xmlhttp.onreadystatechange = function() 
        { 
            if (xmlhttp.readyState==4 && xmlhttp.status==200) 
            {
                //alert(xmlhttp.responseText);
                var xmlObj = xmlhttp.responseXML;   

                var textXML = xmlObj.documentElement.firstChild.firstChild.nodeValue;


                if (window.DOMParser)
                {
                    parser=new DOMParser();
                    var xmlDoc=parser.parseFromString(textXML,"text/xml");
                }
                else // Internet Explorer
                {
                    var xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
                    xmlDoc.async=false;
                    xmlDoc.loadXML(textXML);
                }


                var rec = new Array();
                rec[0]=['Стопански субект', 'Юрид.форма', 'Община', 'Име', 'Роля', 'Страна', 'NACE code', 'NACE text', 'Селище', 'пощ.код','Адрес', 'тел.', 'факс', 'Email', 'web', 'rid','id','activ'];
                var rows = xmlDoc.getElementsByTagName("row");
                rowsn = rows.length;
                for (i=1;i<=rowsn;i++)
                {   
                    var cols=rows[i-1].getElementsByTagName("colunm");
                    colsn=cols.length;
                    rec[i] = new Array();
                    for (var j=0; j<colsn; j++)
                    {   

                        rec[i][j] = cols[j].getAttribute("colvalue");

                    }
                    rec[i][j]='<input type="button" onClick="ajaxDBDelete('+rec[i][15]+');"/>'; 

                }
                tblTst = google.visualization.arrayToDataTable(rec);
                options['page'] = 'event';
                options['pageSize'] = intPageSize;
                options['pagingSymbols'] = {prev: 'prev', next: 'next'};
                options['pagingButtonsConfiguration'] = 'both';

                options['allowHtml'] = 'true'; 
                numberOfPages = intRpp/intPageSize;
                visual = new google.visualization.Table(document.getElementById('table'));
                google.visualization.events.addListener(visual, 'page', function (e){
                options.startPage = e.page;
                if (s>1)
                {
                   glPNum = (numberOfPages * (s-1)) + (e.page+1);
                   document.getElementById('txbNumPage').value = glPNum;
                    options['pagingButtonsConfiguration']='both';
                }
                else 
                {
                glPNum = e.page+1;
                if (glPNum==1) options['pagingButtonsConfiguration']='next';
                else   options['pagingButtonsConfiguration']='both';
                }

                document.getElementById('txbNumPage').value = glPNum;
                visual.draw(tblTst, options);
                if (e.page == numberOfPages-1)
                {
                    loadXMLDoc(s+1);
                    options.startPage = 0;


                }
                else 
                {

                    if((e.page==0)&&(s>1))
                        {   
                            loadXMLDoc(s-1);
                            options.startPage=numberOfPages-1;
                        }
                }


                });

                visual.draw(tblTst, options);


            }

        }

        //alert (intRpp);
        var url = "http://78.130.187.38:8080/axis2/services/bucat2/SelectFromDB?intRpp=" +intRpp + "&pageNum="+intPNum;
        //alert (url);
        xmlhttp.open("GET", url, true);
        xmlhttp.send(); 

    }



</script>
</head>
<body onload= "loadXMLDoc(1);">
<br>
<br>

<div id="table"></div>
<br/>
<button type="button" name="btnFP" onClick="loadXMLDoc(1);">FIRST PAGE</button>
<input type="input" id="txbNumPage" value=1 />
<button type="button" name="btnLP" onClick="ajaxDBLast();">LAST PAGE</button>
<br>
<div id='proba'>
</div>

</body>
</html>

最佳答案

how can i make this way - when I reach the last my next button to be enabled and when i click it only then to load the next 100 records

  • 将您的逻辑放入通用函数中
  • 将 loadXMLDoc 设置为指向该函数的指针
  • 将页码作为查询字符串的一部分传递到 AJAX URL
  • 如果页码是最后一页，则将 loadXMLDoc 重新分配给空函数

关于javascript - 当我到达最后一页时，我向服务器发出 AJAX 调用，以获取数据库中的更多数据，而无需等待单击下一个按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14374518/

27 4 0
文章推荐： css - 带有字形和文本的 ASP.NET MVC 导航栏
文章推荐： javascript - 用动画滚动到中心
文章推荐： javascript - CORS 预检选项请求返回错误，但 POST 仍在发送
文章推荐： javascript - GMail Contexual Gadget - 多种模式可匹配多个条件
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com