jQuery datatables row.add is not adding td attribute hidden

Question

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.

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

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>

Perhaps use DataTable to create your buttons rather than hardcode them, them add your array but without the markup? — annoyingmouse, Mar 03 '17 at 20:49
buttons are'nt the problem, the is what the problem is , i need to make td hidden everytime i append something, but a blank space is showing when im appending a span class hidden to the new td. — loki_thor, Mar 04 '17 at 10:48

score 1 · Accepted Answer · edited Jul 08 '18 at 13:07

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

.hide_column{
display : none;
}

then the hidden column is now visible in the DOM.

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

edited Jul 08 '18 at 13:07

Siddharth

9,349
16
86
148

answered Mar 07 '17 at 04:12

loki_thor

49
1
9

annoyingmouse · Answer 2 · 2017-03-04T14:16:20.000

0

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!

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

Working example.

edited Mar 04 '17 at 14:16

answered Mar 04 '17 at 14:09

annoyingmouse

5,524
1
27
45

thnks , ill try this – loki_thor Mar 05 '17 at 23:04
hi thnks annoyingmouse, The problem from the very beginning still exist. The category id is missing in debugging mode using firefox. We should be able to see it right. I need that id so I can use it for something else. – loki_thor Mar 06 '17 at 03:53
I'm not sure I understand your requirements. When the buttons are clicked, you want to access all the data from the relevant row? This should be easy enough with adding an event listener on the row and working with the data from that row, check the updated JSFiddle. If that's not what you're after then please explain further. – annoyingmouse Mar 06 '17 at 07:40
hide column when appending, this is my main concern. I want column to be invisible on viewing and visible in Inspect element or Inspector at the same time, The problem is you can hide it in viewing but when inspecting the element td is not there. The column you picked to be hidden – loki_thor Mar 07 '17 at 02:36
datatable is suppose to make things easier.. this is so complex to maintain.. the next devleoper have no idea why all this code has been written to "just hide a column" – Siddharth Jul 08 '18 at 13:07

jQuery datatables row.add is not adding td attribute hidden

2 Answers2