Question

我已经有$datatables和$datatables row.add() API协同工作，因此我可以实现我想要的目标。现在，我已经使用e.data将对象row.add()添加为新行。一切正常，直到有一天我需要添加td class="hidden" td。它成功地增加了但是出现了一个邪恶的情td class="hidden"td没有发生，tdtd发生了。我的数百万美元的问题是如何在使用数据表添加它时保留td类。

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

以下是代码

＆＃13;

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

＆＃13;

 <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>

＆＃13;

Answer 1

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

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

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

.hide_column{
display : none;
}

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

感谢来自stackoverflow jQuery DataTables hide column without removing it from DOM

的Daniel

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。

jQuery数据表row.add没有添加隐藏的td属性

2 个答案: