Dynatable broke with Dynamic HTML Headers

Question

I have created a Dynatable, I have dynamically crafted the Table Headers. Dynatable gives an error when it is run as it cant find the Headers in the HTML.

ERROR:Uncaught Error: Couldn't find any columns headers in 'thead tr th,td'. If your header row is different, specify the selector in the table: headRowSelector option.

SEE FIDDLE: https://jsfiddle.net/0ycqnaxg/6/

It does work somewhat if the HTML contains:

Working FIDDLE: https://jsfiddle.net/0ycqnaxg/9/

<thead>
    <th>FirstName</th>
    <th>LastName</th>
  </thead>

But i have left the thead blank in order to allow the dynamic creation.

The reason why is here https://github.com/alfajango/jquery-dynatable/blob/master/jquery.dynatable.js#L447 It expects to be able to calculate `$columns.length` otherwise it throws an error — DWB, Mar 23 '15 at 12:03
the array length property does work though? hResponse.length = 3 — platinums, Mar 23 '15 at 12:54
It's not the length of your javascript array that Dynatable looks for, it specifically searches for `th` and `td` elements that exist on the DOM. As long as `obj.$element.find(settings.table.headRowSelector).children('th,td');` (mearning there are no elements that are found - this code can be found in the link above) returns `null` you will get the same error which is why populating the table doesn't return an error — DWB, Mar 23 '15 at 13:01
I see but, i have recreated the same structure using $('#my-table thead').append('' + value + ''); I still dont understand why Dynatable cannot see it. If I view source on the rendered pages, the items are there, It works if i create them manually using the same structure, am i missing something here? — platinums, Mar 23 '15 at 22:20

score 2 · Accepted Answer · answered Jul 21 '15 at 14:43

For some reason, Dynatable uses 'thead tr' as the headRowSelector when the headers are created dynamically and it searches for 'th' under that. The easy solution is to explicitely specify 'thead' as the headRowSelector.

$('#my-table').dynatable({
    table: {
        headRowSelector:'thead',
    },
    dataset: {
        records: columns
    }
});

score 1 · Answer 2 · answered Mar 26 '15 at 17:57

1

I have switched to using Datatables. Its the solution for me, just not the exact solution to this question. For future reference, datatables allows you to create the headers dynamically based on an array of column headers;

$('#example thead tr,tfoot tr').append('<th>' + value + '</th>');

answered Mar 26 '15 at 17:57

platinums

634
1
10
21

the OP requires a solution using dynatables – sitilge Jan 09 '17 at 08:22

Dynatable broke with Dynamic HTML Headers

2 Answers2