2009-06-16 26 views
0

動的データのサーバーサイドページネーションの使用方法を理解しようとしています(例:http://developer.yahoo.com/yui/examples/datatable/dt_dynamicdata.html参照)。Yui Datatable with AutoComplete and Pagination

私の問題は、私はページネーションをしようとすると、私の要求があり、私は私の要求をカスタマイズすることはできませんです。 QCT-list.htmlsort = geneid & DIR = ASC &のstartIndex = 50 &結果= 25

要求? QCT-するlist.html名= CD4 &シンボル= CD4 &開始= 0 &限界= 25又は QCT-する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; 
     } 

誰かがデータテーブルに改ページを使用する方法と、要求をカスタマイズする方法を説明できますか?

答えて

1

ように周りoConfigsとmyRequestBuilderのdeclaraionを交換する必要があると思います。 QCT-する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; 
} 
+0

マイRequestBuilderは今、正常に動作します 、私は私が必要とする要求を取得します残念ながら、次のエラーが発生しました。 I [T]が定義されていません (L){return this.getLastTdEl(L);}}} retu ... == D.CLASS_ASC)? D.CLASS_DESC:D.CLASS_ASC; このエラーについて考えてみましょうか? 私のエラーが見つかりました。 問題はコントローラから発生します。 最初のリクエストではすべてうまくいっていますが、ページネーションを使用すると、コントローラはtotalRecordsを変更して、rowsPerPageと同じ値を返します。 これは上記のエラーを生成します... –

+0

私はこのバグを修正しました。今度は、私のコントローラは各クエリに対して同じtotalRecordsを返します。そして、すべてが良いです。 –

0

私はあなたが私はほとんどそれが私のページネーションを動作させるために管理

var myRequestBuilder = ... 

var oConfigs = ...