Unable to set target 1 for columnControl

Unable to set target 1 for columnControl

henrik khenrik k Posts: 12Questions: 4Answers: 0

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

  • kthorngrenkthorngren Posts: 22,286Questions: 26Answers: 5,125

    Here is a base test case with columnControl.content.
    https://live.datatables.net/zeyuyoyi/1/edit

    I'm not using a pre-set header in the HTML code, the HTML that the Datatable is initiated to is just an empty

    Not sure what you mean by this. Please update the test case to replicate your issue.

    Was unable to create a testcase in http://live.datatables.net with columnControl activated.

    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

  • henrik khenrik k Posts: 12Questions: 4Answers: 0
    edited September 28

    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:

    <table id="top-left-dt" class="table table-striped">
    

    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

  • kthorngrenkthorngren Posts: 22,286Questions: 26Answers: 5,125

    Take a look at the browser's console and you will see this error:

    Uncaught ReferenceError: jQuery is not defined

    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

    The HTML for the page I have is like this:

    You need a thead for Datatables to initialize. Are you using columns.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:

    Please note that when constructing a header, DataTables can only construct a simple header with a single cell for each column. Complex headers with colspan and rowspan attributes must either already be defined in the document, or be constructed using standard DOM / jQuery methods.

    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

  • henrik khenrik k Posts: 12Questions: 4Answers: 0
    edited September 29

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

  • kthorngrenkthorngren Posts: 22,286Questions: 26Answers: 5,125

    Good point. @allan will need to comment on this.

    Kevin

  • allanallan Posts: 65,162Questions: 1Answers: 10,796 Site admin

    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

  • henrik khenrik k Posts: 12Questions: 4Answers: 0

    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/

  • allanallan Posts: 65,162Questions: 1Answers: 10,796 Site admin
    Answer ✓

    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

      columnControl: [{
        target: 0,
        content: []
      },{
        target: 1,
        content: ['search']
      }]
    

    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 a target: 0. DataTables sees that single row and takes it as the main header!

    Allan

  • henrik khenrik k Posts: 12Questions: 4Answers: 0

    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.

Sign In or Register to comment.