يوي DataTable ومع الإكمال التلقائي وترقيم الصفحات
-
05-07-2019 - |
سؤال
وأنا أحاول أن أفهم كيف ترقيم الصفحات استخدام من جانب الملقم البيانات الحيوي (أرى سبيل المثال: <لأ href = "http://developer.yahoo.com/yui/examples/datatable/dt_dynamicdata.html" يختلط = "نوفولو noreferrer "> http://developer.yahoo.com/yui/examples/datatable/dt_dynamicdata.html ).
ومشكلتي هي أنني لا يمكن تخصيص طلبي، عندما أحاول ترقيم الصفحات، طلبي هو: كيو سي تي-list.htmlsort = geneid ودير = تصاعدي وstartIndex = 50 & النتيجة = 25
ويجب أن يكون الطلب على الشكل التالي: كيو سي تي-list.html؟ اسم = CD4 ورمز = CD4 وتبدأ = 0 & الحد = 25 أو كيو سي تي-list.html؟ اسم = CD4 ورمز = CD4 وبدء = 25 والحد = 50 ...
وهنا هو نسخة (جزء) من قانون بلدي:
var myColumnDefs = [
{key:"geneid", label:"Gene", sortable:true},
{key:"name", label:"Name", sortable:true},
{key:"symbol", label:"Symbol", sortable:true},
{key:"lastupdated", label:"Last Updated", formatter:"date", sortable:true},
{key:"lastmodified", label:"Last Modified", formatter:"date", sortable:true}
];
var myDataSource = new YAHOO.util.DataSource("qct-list.html");
myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
myDataSource.connXhrMode = "queueRequests";
myDataSource.responseSchema = {
resultsList: "geneItemList",
fields: ["col","qv","limit","start","geneid","name","symbol","lastupdated","lastmodified"],
metaFields: {
totalRecords: "totalRecords" // Access to value in the server response
}
};
var qctPaginator = new YAHOO.widget.Paginator({
rowsPerPage: 25,
totalRecords : YAHOO.widget.Paginator.VALUE_UNLIMITED,
template: YAHOO.widget.Paginator.TEMPLATE_ROWS_PER_PAGE,
rowsPerPageOptions: [25,50,75,100]
});
var myRequestBuilder = function(ostate, oSelf) {
oState = oState || {pagination:null};
var name = Dom.get('dt_input_name').value;
var symbol = Dom.get('dt_input_symbol').value;
var start = (oState.pagination) ? oState.pagination.recordOffset : 0;
var limit = (oState.pagination) ? oState.pagination.rowsPerPage : 25;
return "?name=" + name + "&symbol"+ symbol + "&start=" + start + "&limit=" + limit;
}
var oConfigs = {
dynamicData: true, // Enables dynamic server-driven data
selectionMode: "single",
paginator: qctPaginator ,
generateRequest : myRequestBuilder,
paginationEventHandler : YAHOO.widget.DataTable.handleDataSourcePagination,
initialRequest: "?name=&symbol=&start=0&limit="
};
var myGeneListTable = new YAHOO.widget.DataTable("geneListTable", myColumnDefs, myDataSource, oConfigs);
myGeneListTable.handleDataReturnPayload = function(oRequest, oResponse, oPayload) {
oPayload.totalRecords = oResponse.meta.totalRecords;
return oPayload;
}
ويمكن للشخص شرح كيفية استخدام ترقيم الصفحات مع DataTable ووكيفية تخصيص الطلب؟
المحلول
وأنا تقريبا تمكنت من جعله يعمل بلدي ترقيم الصفحات. بلدي RequestBuilder يعمل الآن على ما يرام، وأحصل على طلب أحتاج: كيو سي تي-list.html؟ اسم = فيروسات ورمز = وبدء = 25 والحد = 25
وهنا القانون الجديد:
var myColumnDefs = [
{key:"geneid", label:"Gene", sortable:true},
{key:"name", label:"Name", sortable:true},
{key:"symbol", label:"Symbol", sortable:true},
{key:"lastupdated", label:"Last Updated", formatter:"date", sortable:true},
{key:"lastmodified", label:"Last Modified", formatter:"date", sortable:true}
];
var myDataSource = new YAHOO.util.DataSource("qct-list.html");
myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
myDataSource.connXhrMode = "queueRequests";
myDataSource.responseSchema = {
resultsList: "geneItemList",
fields: ["col","qv","limit","start","geneid","name","symbol","lastupdated","lastmodified"],
metaFields: {
totalRecords: "totalRecords" // Access to value in the server response
}
};
var qctPaginator = new YAHOO.widget.Paginator({
rowsPerPage: 25,
rowsPerPageOptions: [25,50,75,100]
});
var myRequestBuilder = function(oState,oSelf)
{
oState = oState || {pagination:null, sortedBy:null};
// var sort = (oState.sortedBy) ? oState.sortedBy.key : "geneid";
// var dir = (oState.sortedBy && oState.sortedBy.dir === YAHOO.widget.DataTable.CLASS_DESC) ? "desc" : "asc";
var start = (oState.pagination != null) ? oState.pagination.recordOffset : 0;
var limit = (oState.pagination != null) ? oState.pagination.rowsPerPage : 25;
var name = Dom.get('dt_input_name').value || "";
var symbol = Dom.get('dt_input_symbol').value || "";
return '?name='+ name + '&symbol=' + symbol + '&start='+ start + '&limit=' + limit;
}
var oConfigs = {
initialRequest: "?name=interferon&symbol=&start=&limit=",
dynamicData: true, // Enables dynamic server-driven data
selectionMode: "single",
paginator: qctPaginator,
generateRequest : myRequestBuilder
};
var myGeneListTable = new YAHOO.widget.DataTable("geneListTable", myColumnDefs, myDataSource, oConfigs);
myGeneListTable.handleDataReturnPayload = function(oRequest, oResponse, oPayload) {
if (oPayload == undefined) {
oPayload = {};
}
oPayload.totalRecords = oResponse.meta.totalRecords;
return oPayload;
}
نصائح أخرى
وأعتقد أنك بحاجة لمبادلة إعلان oConfigs وبلدي RequestBuilder حول بحيث
var myRequestBuilder = ...
var oConfigs = ...