jQuery datatables row.add不添加td屬性隱藏

Question

我有$datatables和$datatables row.add() API一起工作，所以我可以實現我想要的。現在，我有一個對象e.data，將使用row.add()作爲新行添加。一切都很好，直到有一天我需要添加td class="hidden" td。它增加了成功，但一個邪惡的情況來了。 td class="hidden"td沒有發生，tdtd發生。我的數百萬美元的問題是如何在使用數據表添加它時保留td的類。

按鈕的html屬性添加成功。 tds屬性？我不知道爲什麼它沒有顯示。 非常感謝！

下面是代碼

if (e.success == "TrueAdd") { 
 
       var table = $('#product-table').DataTable(); 
 
       var arr = $.map(e.data, function (value, index) { return [value]; }); 
 
       
 
       var newValue = [arr[0], '<td style="visibility:hidden">' + arr[1] + '</td>', arr[2], arr[3], arr[4], arr[5], arr[6], arr[7], arr[8], 
 
       '<button type="button" class="btn-edit btn btn-info btn-default">Edit</button>', 
 
       '<button type="button" class="btn-delete btn btn-info btn-default">Delete</button>']; 
 
       table.row.add(newValue).draw(false);    
 
      }

<table id="product-table" class="table">       
 
      <thead> 
 
       <tr> 
 
        <th>Product Id</th> 
 
        <th class="hidden">CategoryId</th> 
 
        <th>Category</th> 
 
        <th>Manufacturer</th> 
 
        <th>Name</th> 
 
        <th>Description</th> 
 
        <th>Model</th> 
 
        <th>Released Date</th> 
 
        <th>Released Year</th> 
 
        <th>Action</th> 
 
        <th></th> 
 
       </tr> 
 
      </thead> 
 
      <tbody>                 
 
       @foreach (var item in Model.ProductList) 
 
       { 
 
        <tr>      
 
         <td>@item.Id</td> 
 
         <td>@item.CategoryId</td> 
 
         <td>@item.CategoryDescription</td> 
 
         <td>@item.ManufacturerId</td> 
 
         <td>@item.Name</td> 
 
         <td>@item.Description</td> 
 
         <td>@item.Model</td> 
 
         <td>@item.ReleasedDate</td> 
 
         <td>@item.ReleasedYear</td> 
 
         <td><button type="button" class="btn-edit btn btn-info btn-default">Edit</button></td>       
 
         <td><button type="button" class="btn-delete btn btn-info btn-default">Delete</button></td> 
 
        </tr> 
 
       } 
 
      </tbody>   
 
     </table>

Answer 1

我找到了答案!!!!!我加入

"columnDefs": [ 
      { className: "hide_column", "targets": [1] } 
      ] 

然後我添加了一個CSS文件到我的項目，並添加這個

.hide_column{ 
display : none; 

}

那麼隱藏的列是目前在DOM可見。

感謝丹尼爾從計算器jQuery DataTables hide column without removing it from DOM

Answer 2

這種方法應該做你需要的東西：

let num = 4, 
    table = $("#product-table").DataTable({ 
     columnDefs: [{ 
      "targets": [1], 
      "visible": false 
     }, { 
      "targets": [9], 
      "render":() => $("<button></button>", { 
       "type": "button", 
       "class": "btn-edit btn btn-info btn-default", 
       "text": "Edit" 
      }).prop("outerHTML") 
     }, { 
      "targets": [10], 
      "render":() => $("<button></button>", { 
       "type": "button", 
       "class": "btn-delete btn btn-info btn-default", 
       "text": "Delete" 
      }).prop("outerHTML") 
     }] 
    }); 
$("#AddRow").on("click",() => { 
    let newRow = [ 
     num + " Id", 
     num + " CategoryId", 
     num + " CategoryDescription", 
     num + " ManufacturerId", 
     num + " Name", 
     num + " Description", 
     num + " Model", 
     num + " ReleasedDate", 
     num + " ReleasedYear", 
     num, 
     num]; 
    num++; 
    table.row.add(newRow).draw(); 
}); 

它可以讓數據表做渲染和隱藏數據的繁重。希望有所幫助！

顯然需要改變觸發行雖然;-)

工作example的添加的東西。