1

我的服务器上有一个包含 30 000 多条记录的大型数据库。我向服务器发出请求，向我提供前 100 条记录，并使用 Googlevisualisation 表分页 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>
4

1 回答 1

0

我怎样才能做到这一点-当我到达最后一个要启用的下一个按钮时，当我单击它时才加载接下来的 100 条记录

  • 将您的逻辑放入通用函数中
  • 将 loadXMLDoc 设置为指向该函数的指针
  • 将页码作为查询字符串的一部分传递给 AJAX URL
  • 如果页码是最后一个，则重新分配loadXMLDoc给一个空函数
于 2013-12-05T03:32:04.820 回答