Jqueryデータテーブルの現在の詳細

Question

JSONから返されたDataTableは、行をクリックして詳細を展開したJSON戻り値を持ち、JSONからリストをロードします。これを行うには、exampleに従ってください。

私はそれがデータテーブルの行のシーケンスであるかのように、それを隠すことなく、詳細をロードするように拡張するためのオプションと崩壊を持つことができませんどのように知っていただきたいと思い

、詳しくは常に表示されている必要があり

Column1| Column2| Column3| 
Value1 Value2 Value3 
    Detail1| Detail2| Detail3| 
    ValueD1 ValueD2 ValueD3 

UPDATE - JSONここ

$scope.list = [ 
      { 
       id:1, 
       name: "Ze", 
       listDetail: [ 
        { 
         id:1, 
         description: "lt" 
        }, 
        { 
         id:2, 
         description: "lt 3" 
        }, 
       ] 
      }, 
      { 
       id:2, 
       name: "Ze 2", 
       listDetail: [ 
        { 
         id:3, 
         description: "lt 1" 
        }, 
        { 
         id:4, 
         description: "lt 4" 
        }, 
       ] 
      } 
     ]; 

Answer 1

、それが動作するはずです：ここでは

を、JSで動作するはずのソリューションです上のように：

• JSON

{ "draw": 2, "recordsTotal": 3, "recordsFiltered": 3, "data": [{ "type": "normal", "description": "Zenaida", "name": "Frank", "age": "Software Engineer", "location": "New York" }, { "type": "detail", "detail": "first detail" }, { "type": "detail", "detail": "second detail" }, { "type": "detail", "detail": "third detail" }, { "type": "normal", "description": "zerrz", "name": "paul", "age": "Software breaker", "location": "Lodon" }, { "type": "detail", "detail": "third detail" }, { "type": "normal", "description": "Zenaida", "name": "Frank", "age": "Software Engineer", "location": "New York" }, { "type": "detail", "detail": "second detail" }, { "type": "detail", "detail": "third detail" }] }

• JS

$('#example').dataTable({ "processing": true, "serverSide": true, "ajax": "YourAjaxSource", "columns": [ //You have to manually bind your column since the first value is not to be displayed { "data": "details" }, { "data": "description" }, { "data": "name" }, { "data": "age" }, { "data": "location" } ], "fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull) { switch (aData[0]) { //first value indicates if its a detail row or a normal row case 'normal': // if its a normal row, just display the cells without the first detail one $(nRow).find('td')[0].style.display = 'none'; break; case 'detail': //else display none of the cells except the detail one with take up 5 cells $(nRow).find('td')[1].style.display = 'none'; $(nRow).find('td')[2].style.display = 'none'; $(nRow).find('td')[3].style.display = 'none'; $(nRow).find('td')[4].style.display = 'none'; $(nRow).find('td')[0].colSpan = '5'; //Your number of column break; } } });

それが動作する方法は、各行がtechnicly詳細を持っています+正常細胞。

最後に詳細行のための私ができるようにするためにセルの数の属性COLSPANを与えることが行ごとに行の種類を確認し、そして（他は空であるので）のみ必要なセルを表示描画それは行の幅をすべて取る。

私はそれをテストしていないのでgl & hf;）何か問題があるならば、コメントすることを躊躇しないでください。

必要に応じて調整してください。