2013-03-23 73 views
1

我是新來的Datatables ...Datatables:顯示子行的摘要行

我做了一個網格行,每個都有子(詳細)行。我正在使用來自mysql數據庫的服務器端數據。它以包含所有子行的JSON的形式返回。 我需要創建「主」網格行,總結子行中的列。我不確定數據表是否可以做到這一點或如何完成...

我想通過在JQuery函數中獲取JSON開始。然後使用循環來總結我需要的數據,並將其作爲數組數據傳遞給網格。最後我渲染網格。

這是最佳實踐還是數據表能夠以更智能的方式做到這一點?

- 亞行的概念,在這裏可以看到:http://datatables.net/blog/Drill-down_rows -

+0

不清楚你的子行的意思,你可以發佈你的代碼?因爲我知道你不需要循環它。 – OQJF 2013-03-23 12:03:39

+0

子行我的意思是「詳細行」或「向下鑽取」行。這是我想要的概念: http://datatables.net/blog/Drill-down_rows 對不起,我還沒有任何代碼可以發佈... – olefrank 2013-03-23 16:26:11

回答

1

我已經完成了這樣的事情。我返回了我需要的所有數據,並將「細節」信息放入隱藏div的最後一列。然後使用行單擊將該信息放入詳細信息行中。

//In the example the table the first column has a plus icon that gets replace with a minus icon 
// the last column added a hidden div that contained the details. 
$("#results").dataTable({ 
    "fnCreatedRow": function (nRow, aData, iDataIndex) { 
     //Attach the on click event to the row 
     var oTable = this; 
     $("td:eq(0) span", nRow).on("click", function() { 
      //First column has a image with the jQuery UI plus icon 
      if ($(this).hasClass("ui-icon-circle-plus")) { 
       //The details information is stored in the last column in a hidden div with the class wrapper 
       //Grab the hidden information and append that to the new row. 
       oTable.fnOpen(nRow, $(".wraper", nRow).html(), "details"); 
      } else { 
       oTable.fnClose(nRow); 
      } 
      $(this).toggleClass("ui-icon-circle-plus ui-icon-circle-minus"); 
     }); 
    } 
});