jQuery datatables row.add没有添加隐藏的td属性

I've got a $datatables and $datatables row.add() API working together so I can achieve what I want. Now, I've got an object e.data that will be added as a new row using row.add(). Everything is working fine until one day I needed to add td class="hidden" td. It added successfully but an evil situation came. td class="hidden"td did not happen, tdtd happened. My multi million dollar question is how to retain the class of td when adding it using datatable.

我有一个$ datatables和$ datatables row.add（）API一起工作，所以我可以实现我想要的。现在，我有一个对象e.data，它将使用row.add（）添加为新行。一切正常，直到有一天我需要添加td class =“hidden”td。它成功地增加了但是一个邪恶的情况来了td class =“hidden”td没发生，tdtd发生了。我的数百万美元的问题是如何在使用datatable添加它时保留td类。

Buttons html attributes adds successfully. tds attributes? I don't know why its not showing. Thank you so much!

按钮html属性添加成功。 tds属性？我不知道为什么它没有显示。非常感谢！

Below is the code

以下是代码

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>

2 个解决方案

#1

I FOUND THE ANSWER !!!!! i added

我找到了答案!!!!!我补充道

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

then I added a css file to my project and add this

然后我在我的项目中添加了一个css文件并添加它

.hide_column{
display : none;
}

then the hidden column is now visible in the DOM.

然后隐藏列现在在DOM中可见。

Thanks to Daniel from * jQuery DataTables hide column without removing it from DOM

感谢来自*的Daniel jQuery DataTables隐藏列而不从DOM中删除它

#2

This approach should do what you need:

这种方法应该做你需要的：

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();
});

It lets DataTables do the heavy lifting of rendering and hiding your data. Hope that helps!

它允许DataTables完成渲染和隐藏数据的繁重工作。希望有所帮助！

You'll obviously need to alter the thing that triggers the adding of the row though ;-)

你显然需要改变触发添加行的东西;-)

Working example.

工作实例。

#1