为什么我的YUI 2服务器端分页,每次点击分页链接都不会调用数据源

时间:2013-07-18 17:50:47

标签: yui

我的代码如下所示。我正在使用结构操作从服务器端获取json记录。它正在返回记录,我能够看到包含数据的表格。分页链接创建很好。当我点击下一步并在每次点击分页上的任何链接时调用数据源。如果我也点击colum标头,则会调用数据源。

我的问题是:

1)调用数据源时。因为我看到某个时候被召唤,有时却没有。就像我从1页到2页,数据源被称为罚款。当我通过点击'prev'链接回到之前的页面时,正在调用数据源。但之后如果我再次点击下一步转到第二页,则不会调用数据源。何时调用数据源以及调用它的次数。它是否适用于分页调用datasource中的每个链接?

2)如果我的数据源返回100个数据记录并且我的每页记录设置为25,那么我是否看到4页。我在这里与服务器端分页和数据源调用混淆。 不为每个页面链接和下一个或上一个链接点击调用数据源?如果没有,何时调用datasource?请解释一下。我知道开头有多少总记录,而且当用户点击页码或下一个或上一个链接时,我的要求是每页显示25条记录。我有能力根据服务器端的页码带来相应的25条记录。

3)如何捕捉分页的“下一个”和“上一个”点击次数。

我的要求是每当用户点击页码链接或下一个或上一个时,使用来自服务器的数据源动态获取json数据。

请帮我解决这个问题。我是YUI的新手。因为我们已经在使用它,所以我必须使用用户YUI 2。

<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
};        
}();

1 个答案:

答案 0 :(得分:0)

据我所知,DataTable会在每次更改页面或按其他列排序时始终要求提供新数据。它不会缓存先前的请求,也不会跟踪它的要求。如果你没有看到在服务器端到达的请求,可能是因为缓存,而不是在DataTable或DataSource中,而是由浏览器本身,这是在服务器上发出正确的标头告诉浏览器不要缓存的问题

如果我没有记错的话,你所描述的行为会支持这一点。第一页被请求两次,一次是在您第一次绘制表时,再次是从第2页返回时。所有其他页面都不会被请求两次。为什么?因为第一次形成的URL与返回它时的URL略有不同。浏览器缓存只知道URL。