when i reached the last page, I make an AJAX call to the server for more data from my database without waiting to click my next button
Question
I've got a big database with over 30 000 records on my server. I make a request to the server giving me the first 100 records and showing them with Googlevisualisation table paging Api - 10 records per page.
In my code here I added an event listener for the "page" event and tested the page property of the event:if I have reached the last page, I make an AJAX call for more data (another 100 records)
The problem is that if I reach the last page it just loads it for a second and it makes immediately the Ajax call without waiting to click next and for that results it doesn't change my page property! 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
Here my code that I tried so far:
<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>
1 answers
solution1
0
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
- Put your logic into a generic function
- Set loadXMLDoc as a pointer to that function
- Pass the page number as part of the query string to the AJAX URL
- If the page number is the last one, then reassign
loadXMLDocto an empty function
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.