Answers

• kthorngren Posts: 22,299Questions: 26Answers: 5,127

  September 28

  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 k Posts: 12Questions: 4Answers: 0

  September 28 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
• kthorngren Posts: 22,299Questions: 26Answers: 5,127

  September 28

  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 k Posts: 12Questions: 4Answers: 0

  September 29 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.)
• kthorngren Posts: 22,299Questions: 26Answers: 5,127

  September 29

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

  Kevin
• allan Posts: 65,256Questions: 1Answers: 10,816 Site admin

  September 29

  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 k Posts: 12Questions: 4Answers: 0

  September 29

  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/
• allan Posts: 65,256Questions: 1Answers: 10,816 Site admin

  September 29 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 k Posts: 12Questions: 4Answers: 0

  September 29

  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.