Answers

• kthorngren Posts: 21,341Questions: 26Answers: 4,954

  May 2021

  Uncaught TypeError: Cannot read property 'style' of undefined

  You have 12 columns defined in HTML and, it looks like, 14 columns defined with columns. They need to have the same number. Or if you want Datatables to build the columns, since you are using columns.title, you can remove the HTML thead.

  the corresponding date to show in the column header under the "Monday" default header.

  If you have this information before Datatables initialization you can use columns.title to set the header text. Or you can use standard jQuery or Javascript methods to update the appropriate th text with what you want. Datatables does not have an API to update the header text.

  Kevin
• zgoforth Posts: 493Questions: 98Answers: 2

  May 2021

  @kthorngren thank you for your response, I tried the columns,title option, but then I realized it isn't compatible with dynamic values (Strictly HTML).

  As for the JS/jQuery methods, where would I implement that into my script? I have so many different functions it is kind of confusing?

  I cannot use
  document.getElementById(th").innerHTML = "New text!"; as that doesn't support dynamic values.

  I would have to use something along the lines of ? But this still appends HTML
  $('#myTable> thead tr').append('<th> Column 4</th>');

  http://jsfiddle.net/v8dkx0uz/
• zgoforth Posts: 493Questions: 98Answers: 2

  May 2021

  So with the https://datatables.net/reference/option/columns.title columns.title Option that you recommended, would I be able to add a data value for example
  https://jsfiddle.net/BeerusDev/mznL52p8/97/

  "columnDefs": [
  { "title": data.Monday, "targets": 3 }
  ]
• zgoforth Posts: 493Questions: 98Answers: 2

  May 2021

  UPDATE:

  I applied IDs to all of the of the <th> that I want to append Dates to.
  After the rows().every() function completed I added a columns().every() api to read through the columns, then to append data.Monday value to the <th> with $('#mondayAppend').text(data.Monday); @ line 375 but nothing happens after I try to test it, as well as there are no errors or messages in the console.

  Heres my most up to date fiddle: https://jsfiddle.net/BeerusDev/mznL52p8/104/
• kthorngren Posts: 21,341Questions: 26Answers: 4,954

  May 2021

  You will still use the columns.data option to define your object based data. Use both in the same column definition.

  Kevin
• zgoforth Posts: 493Questions: 98Answers: 2

  May 2021

  Just checked that option out, and I am going to be honest. I am a little confused on it. So in my "columns" definition, i.e. {"data": "MondayStatus"}, same applies for the rest of the days, I should append it in the definition?
• kthorngren Posts: 21,341Questions: 26Answers: 4,954

  May 2021

  Yes, you will have something like this:

  columns: [
    { .... },
    {"data": "MondayStatus",
      "title": "Monday Status",
      //. Any remaining options for this column goes here, such as columns.render
    },
    { .... },
  ]
  

  Kevin
• zgoforth Posts: 493Questions: 98Answers: 2

  May 2021

  Ok, so I tried doing the following and as expected posts nothing in the header.

  { "data": "MondayStatus",
                    "title": ""    ,
                 render: function (data){
                  $('#mondayAppend').text(data.Monday);
                 }
                 },
  

  I have searched and search for something even closely relevant to what I am trying to do and I cannot find anything. I read that whole columns option page, and I couldn't figure out what to do. This is the final piece to this project and it is irritating me that I cannot figure it out . Am I atleast somewhat on the right track? I know I will most likely need a columns.render function
  https://jsfiddle.net/BeerusDev/mznL52p8/114/
• kthorngren Posts: 21,341Questions: 26Answers: 4,954

  May 2021 Answer ✓

  The columns.title accepts a string that is used to set the column header title. Are you trying to set it based on data in the column? Please explain what you are trying to do.

  Kevin
• zgoforth Posts: 493Questions: 98Answers: 2

  May 2021

  @kthorngren yes, the "Day" Status that is hidden (i.e. Monday, Tuesday, Wednesday, Thrusday, Friday) contains a date value formatted like so "MM/DD/YYYY". The MondayStatus data is showing as column data which contains 6 possible values. Once the rows are collapsed, you can see the status under each day column, and if you hover over it, a tooltip pops up and displays the Location the employee was at on that day as well as the date, but I am trying to place the date as the column header

  https://jsfiddle.net/BeerusDev/mznL52p8/117/
• zgoforth Posts: 493Questions: 98Answers: 2

  May 2021

  I have come across this and seems to be along the right lines, will this append it? https://datatables.net/reference/option/headerCallback
• zgoforth Posts: 493Questions: 98Answers: 2

  May 2021 edited May 2021

  Update: I tried implementing the headerCallback function, like I found from this old question on the forums: http://live.datatables.net/reqevigo/1/edit. Here this person was able to append a date above the name header, and that is exactly what I want to do. except have the data.Monday over the monday status, then each next day with the corresponding day/status (and no green behind the newly appended header). Here is my example, but nothing happens when I implement the headerCallback function, here is my fiddle: https://jsfiddle.net/BeerusDev/mznL52p8/127/ (the callback function is located at line 109)
• zgoforth Posts: 493Questions: 98Answers: 2

  May 2021

  Update. I got it to work! I will attach my working fiddle here for reference: https://jsfiddle.net/BeerusDev/mznL52p8/133/
• Swetha9090 Posts: 28Questions: 5Answers: 0

  January 2022

  @zgoforth ur fiddle is not found could u please add it again