1

サーバー上に30000を超えるレコードを持つ大きなデータベースがあります。サーバーにリクエストを送信して、最初の100レコードを取得し、ApiをページングするGooglevisualisationテーブルでそれらを表示します-1ページあたり10レコード。

ここのコードでは、「page」イベントのイベントリスナーを追加し、イベントのpageプロパティをテストしました。最後のページに到達した場合は、さらにデータ（別の100レコード）に対してAJAX呼び出しを行います。

問題は、最後のページに到達した場合、それが1秒間読み込まれ、[次へ]をクリックするのを待たずにすぐに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 に答える