Why my YUI 2 server side pagination, Datasouce is not called on every click of pagination link

Question

My code looks like below. I am feching the json records from the server side using structs action. it is returning the records fine and i could able to see the table with data. pagination links created fine. when i click next and datasource is called on each click of any link on the pagination. if i click on colum header also, the datasource is being called.

my questions are:

1)When datasource is being called. because i am seeing sometime called and some times not. like when i got from 1page to 2page, datasource is called fine. when i go back to previous pages by clicking 'prev' link, datasource is being called. but after that if i click again on next to go to 2nd page, datasource is not being called. when exactly datasource is called and how many times it will called. is it for every link in the pagination calls datasource?

2)If my datasource returns 100 recods of data and my records per page is set to 25, then do i see the 4 pages. I am confused here with server side pagination and datasource calls. datasource is not called for each page link and next or prev link clicks? if not, when datasource is called? please explain me. I know how many total records are there in the begining and my requirement is showing 25 records per page when ever user clicks on page number or next or prev links. i have the capability to bring corresponding 25 records based on the page number from server side.

3)how to capture the 'next' and 'prev' clicks on the pagination.

my requirement is to dynamically fetch the json data using datasource from the server whenever user click on page number links or next or prev.

Please help me out with this. I am new to YUI. I have to User YUI 2 only since we are already using it.

<div id="dynamicdata"></div>

<script type="text/javascript"> 

YAHOO.example.DynamicData = function() { 
     var myColumnDefs = [ // sortable:true enables sorting
     {key:"PIN", label:"PIN", sortable:true},
     {key:"CODE", label:"CODE", sortable:true}
];

// Customize request sent to server to be able to set total # of records
var generateRequest = function(oState, oSelf) {
    // Get states or use defaults
    oState = oState || { pagination: null, sortedBy: null };
    var sort = (oState.sortedBy) ? oState.sortedBy.key : "PIN";
    var dir = (oState.sortedBy && oState.sortedBy.dir === YAHOO.widget.DataTable.CLASS_DESC) ? "desc" : "asc";
    var startIndex = (oState.pagination) ? oState.pagination.recordOffset : 0;
    var results = (oState.pagination) ? oState.pagination.rowsPerPage : 25;

    var total = YAHOO.util.Dom.get("total").value *1;
    // Validate input
    if(!YAHOO.lang.isNumber(total) || total < 0 || total > 200) {
        YAHOO.util.Dom.get("total").value = 0;
        total = 0;
        alert("Total must be between 0 and 200.");
    }

    // Build custom request
    return  "sort=" + sort +
            "&dir=" + dir +
            "&startIndex=" + startIndex +
            "&results=" + (startIndex + results) +
            "&total=" + total;
};


 // DataTable configuration
var myConfigs = {       
    generateRequest: generateRequest,
    initialRequest: generateRequest(), // Initial request for first page of data
    dynamicData: true, // Enables dynamic server-driven data
    sortedBy : {key:"PIN", dir:YAHOO.widget.DataTable.CLASS_ASC}, // Sets UI initial sort arrow
    paginator: new YAHOO.widget.Paginator({ rowsPerPage:10 }) // Enables pagination 
};


var myDataSource = new YAHOO.util.DataSource("<%=request.getContextPath()%>/results.do?startIndex="+localStartIndex+"&rowsPerPage="+rowsPerPage);
myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;

 myDataSource.responseSchema = {
    resultsList: "data",    
    fields: [
        {key:"SSN"},
        {key:"PIN"}             
    ]
 }

 var myDataTable = new YAHOO.widget.DataTable("dynamicdata", myColumnDefs, myDataSource, myConfigs);
 // DataTable instance
var myDataTable = new YAHOO.widget.DataTable("dynamicdata", myColumnDefs, myDataSource, myConfigs);
// Update totalRecords on the fly with values from server
myDataTable.doBeforeLoadData = function(oRequest, oResponse, oPayload) {
    oPayload.totalRecords = 200;
    return oPayload;
};

 return {
    ds: myDataSource,
    dt: myDataTable
};        
}();

score 0 · Answer 1 · answered Jul 19 '13 at 06:34

As far as I remember, the DataTable will always ask for fresh data whenever it changes pages or sorts by a different column. It doesn't cache previous requests nor does it keep track what it has asked. If you don't see requests arriving on the server side it might be because of caching, but not in DataTable or DataSource but by the browser itself, which is a matter of issuing the proper headers on the server to tell the browser not to cache.

If I am not mistaken, that this is supported by the behavior you describe. The first page is requested twice, once when you first draw the table, once again when you return from page 2. All other pages are never requested twice. Why? Because the first time around the URL formed is slighty different from the URL when you return to it. The browser cache only knows about URLs.

Why my YUI 2 server side pagination, Datasouce is not called on every click of pagination link

1 Answers1