Why "scrollY" remove id attribute from table when I initialize the DataTable?

agg9505

I want to Show 100 entries and I want a scroll in the table, when I add the scrollY attribute the DataTable lost the id. I have a checkbox in the column name, which I use to change checked value of checkbox, does it affect?

HTML

<table id="InventoryDataTable" class="display table-bordered table-condensed" cellspacing="0" style="width:100%">
                            <thead>
                                <tr>
                                    <th>
                                        @Resources.Select
                                        <label class="css-input css-checkbox css-checkbox-primary"> <input type="checkbox" id="SelectAll"><span></span></label>
                                    </th>
                                    <th>
                                        @Resources.EntryNum
                                    </th>
                                    <th>
                                        @Resources.Date
                                    </th>
                                    <th>
                                        @Resources.Quantity
                                    </th>
                                    <th>
                                        @Resources.Inventory
                                    </th>
                                    <th>
                                        @Resources.Material
                                    </th>
                                    <th>
                                        @Resources.LotNumber
                                    </th>
                                    <th>
                                        @Resources.Location
                                    </th>
                                    <th>
                                        @Resources.PO
                                    </th>
                                    <th>
                                        @Resources.SpaDesc
                                    </th>
                                    <th>
                                        @Resources.EngDesc
                                    </th>
                                    <th>
                                        @Resources.UnitCost
                                    </th>
                                    <th>
                                        @Resources.TotalCost
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                

                            </tbody>
                        </table>

$('#InventoryDataTable').dataTable({
          "scrollY": "500px",
            "scrollCollapse": true,
           "aLengthMenu": [[100], [100]],
            "paging": true,
            "ordering": false,
            ajax: "EntryDetail/GetEntryDetailForOrder/",
            columns: [
                {
                    "data": "Id", "visible": true,
                    render: function (data, type, row) {
                        if (type === 'display') {
                            return '  <input  type="hidden" id="Id" name="Id" value="' + row.ID + '">' + '<label class="css-input css-checkbox css-checkbox-primary"> <input type="checkbox" id="id[]"><span></span></label>'
                        }
                        return data;
                    },
                    className: "dt-body-center"
                }
                 { "data": "InventoryOrder", "visible": true },
                 { "data": "Material", "visible": true },
                  { "data": "LotNumber", "visible": true },
                   { "data": "Location", "visible": true },
                    { "data": "PO", "visible": true },
                     { "data": "SpaDesc", "visible": true },
                      { "data": "EngDesc", "visible": true },
                       { "data": "UnitCost", "visible": true },
                        { "data": "TotalCost", "visible": true }


            ]
        });

kthorngren

I put together a test case based on your above code and it seems to work. I have checkboxes
http://live.datatables.net/ajax-objects/1/edit

Adding scrollY shouldn't affect your checkboxes. Please update the test case or create your own showing the issue for troubleshooting.

Do you see console errors?

Kevin

agg9505

I have no errors my table shows correctly, but in the html the

<

table>
lost the atribute id and I need the id to work with selectors
With "scrollY"

<table class="display table-bordered table-condensed table-scrollable dataTable no-footer" cellspacing="0" style="width: 1341px; margin-left: 0px;" role="grid"></table>

Without "scrollY"

<table id="InventoryDataTable" class="display table-bordered table-condensed table-scrollable dataTable no-footer" cellspacing="0" style="width: 100%;" role="grid" aria-describedby="InventoryDataTable_info"> </table>

How can I fix this?

kthorngren

Looks like I didn't save my example and misunderstood your issue. Looks like the Datatable scroll examples do the same as you describe:

https://datatables.net/examples/basic_init/index.html

But the zero config example leaves the id. @Allan will need to comment.

Kevin

allan

When scrolling is enabled the table is split into two or three components parts to allow it to scroll. The header, body and optionally footer.

The table's id remains on the tbody section which you can see in this example.

You can use table().header() to get the thead element of the table, regardless of scrolling enablement.

Allan