I have a YUI DataTable (YUI 2.8.0r4) with AJAX pagination. Each row in the table links to a details/editing page and I want to link from that details page back to the list page that includes the record from the details page. So I have to a) offset the AJAX data correctly and b) tell YAHOO.widget.Paginator which page to select.
According to my reading of the YUI API docs, I have to pass in the initialPage configuration option. I've attempted this, but it doesn't take (the data from AJAX is correctly offset, but the paginator thinks I'm on page 1, so clicking "next" takes me from e.g. page 6 to page 2.
What am I not doing (or doing wrong)?
Here's my DataTable building code:
(function() {
var columns = [
{key: "retailer", label: "Retailer", sortable: false, width: 80},
{key: "publisher", label: "Publisher", sortable: false, width: 300},
{key: "description", label: "Description", sortable: false, width: 300}
];
var source = new YAHOO.util.DataSource("/sales_data.json?");
source.responseType = YAHOO.util.DataSource.TYPE_JSON;
source.responseSchema = {
resultsList: "records",
fields: [
{key: "url"},
{key: "retailer"},
{key: "publisher"},
{key: "description"}
],
metaFields: { totalRecords: "totalRecords" }
};
var LoadingDT = function(div, cols, src, opts) {
LoadingDT.superclass.constructor.call(
this, div, cols, src, opts);
// hide the message tbody
this._elMsgTbody.style.display = "none";
};
YAHOO.extend(LoadingDT, YAHOO.widget.DataTable, {
showTableMessage: function(msg) {
$('sales_table_overlay').clonePosition($('sales_table').down('table')).
show();
},
hideTableMessage: function() {
$('sales_table_overlay').hide();
}
});
var table = new LoadingDT("sales_table", columns, source, {
initialRequest: "startIndex=125&results=25",
dynamicData: true,
paginator: new YAHOO.widget.Paginator({rowsPerPage: 25, initialPage: 6})
});
table.handleDataReturnPayload = function(oRequest, oResponse, oPayload) {
oPayload.totalRecords = oResponse.meta.totalRecords;
return oPayload;
};
})();
