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 类时保留它。

Buttons 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 中可见。

感谢来自 stackoverflow 的 Daniel 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();
});

它可以让 DataTables 完成渲染和隐藏数据的繁重工作。希望对您有所帮助！

您显然需要更改触发添加行的内容；-)

工作example。