Unable to set target 1 for columnControl
Unable to set target 1 for columnControl

Link to test case:
Was unable to create a testcase in http://live.datatables.net with columnControl activated. The columncontrol didn't seem to load at all when using the sample code from the columnControl pages.
Debugger code (debug.datatables.net):
Error messages shown:
[Error] TypeError: undefined is not an object (evaluating 'header[target][column]')
__column_header (datatables.js:8734)
iterator (datatables.js:7190)
(anonym funktion) (datatables.js:7408)
(anonym funktion) (datatables.js:7280)
(anonym funktion) (datatables.js:28189)
ColumnControl (datatables.js:28064)
(anonym funktion) (datatables.js:28287)
(anonym funktion) (datatables.js:10168)
iterator (datatables.js:7190)
(anonym funktion) (datatables.js:7280)
(anonym funktion) (datatables.js:28275)
dispatch (jquery-3.7.1.min.js:2:40041)
trigger (jquery-3.7.1.min.js:2:70130)
(anonym funktion) (jquery-3.7.1.min.js:2:70734)
each (jquery-3.7.1.min.js:2:3134)
_fnCallbackFire (datatables.js:6708)
(anonym funktion) (datatables.js:4850)
_fnLoadState (datatables.js:6328)
_fnInitialise (datatables.js:4818)
(anonym funktion) (datatables.js:491)
each (jquery-3.7.1.min.js:2:3134)
DataTable (datatables.js:90)
(anonym funktion) (datatables.js:14065)
DataTable (datatables.js:69)
drawDatatable (datatablesControls.js:165)
primaryButton (areas.js:107)
userDialogResult (userDialog.js:471)
dispatch (jquery-3.7.1.min.js:2:40041)
trigger (jquery-3.7.1.min.js:2:70130)
(anonym funktion) (jquery-3.7.1.min.js:2:70734)
each (jquery-3.7.1.min.js:2:3134)
(anonym funktion) (userDialog.js:67:102)
dispatch (jquery-3.7.1.min.js:2:40041)
Description of problem:
When I'm setting { target: 0, content: ['search'] } , the columnControl initiates and works as expected.
But when setting target to 1m the initiation results in the error above.
I'm not using a pre-set header in the HTML code, the HTML that the Datatable is initiated to is just an empty
<
table>.
Using Datatables v.2.3.4 with ColumnControl v1.10.
This question has an accepted answers - jump to answer
Answers
Here is a base test case with
columnControl.content
.https://live.datatables.net/zeyuyoyi/1/edit
Not sure what you mean by this. Please update the test case to replicate your issue.
Next time post a link to your test case so we can help get it going. Sounds like you didn't add the ColumnControl library. Either use Add Library in the JS Bin and make sure to move the added libraries so they load in the proper order. Or use the Download Builder to generate the needed CDNs for the test case.
Kevin
I have activated the columnControl library, but the columnControl don't seems to be initated, see:
https://live.datatables.net/wovopate/1/edit
The HTML for the page I have is like this:
When initiating a new Datatable, I'm referencing to the dom id 'top-left-dt'. Before initiating, this table is without headers and rows inside.
Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide
Take a look at the browser's console and you will see this error:
It's due to trying to load columncontrol.js before jquery.js. As I mentioned above the added libraries need to be reordered for proper loading. Here is the updated test case:
https://live.datatables.net/wovopate/2/edit
You need a
thead
for Datatables to initialize. Are you usingcolumns.title
to create the header? Maybe like this test case:https://live.datatables.net/zeyuyoyi/2/edit
If this is the case then it looks like columnControl is trying to access the second row header that is not created by
columns.title
. This is the error shown in the debugger:This is from the
columns.title
docs:Assuming this is what you are doing you will need to create the complex header before initializing Datatables as described in the docs. If you are doing something different then please update my test case to show the issue.
Kevin
Ok, thanks for your update. With reordering the script references in the live editor I was able to get the columnControl working (in the live editor, not in our internal app).
In the documentation for columnControl it states:
It is important to note that if you specify a row which doesn't exist in the table's HTML, ColumnControl will create the row for you automatically, with the correct number of cells for the number of columns in the table (one per column).
Therefore I was under belief that columnControl WAS able to create the extra header row for the search on initiation.
What does the referenced text from the documenation refer to? (Since I obviously misunderstood that sentence.)
Good point. @allan will need to comment on this.
Kevin
Yes, ColumnControl will create a target row in the header or footer if it doesn't already exist - see this example, where the second
tr
doesn't exist in the table header, until ColumnControl creates it.Is that what you are referring to?
Thanks,
Allan
I was believing due to the formulation in the documentation, obviously wrongly, that we we're able to create a table from JS, without a precreated header with a search header from columnControl,
see:
https://live.datatables.net/wovopate/6/
No, that should have worked. I think you've found a bug I'm afraid!
That might one might actually be a little tricky to fix, however, there is a simple workaround: https://live.datatables.net/wovopate/7/edit
That will cause ColumnControl to create an empty first row header. The problem is that it was creating
target: 1
, but not checking if there is, or isn't atarget: 0
. DataTables sees that single row and takes it as the main header!Allan
Thanks, with adding the extra object for the initial header row in the columnControl initiation made our internal app to be working as expected!
I'll add this extra object until you can find a definite fix, and the current workaround is actually ok to be living with.