Append Value to DataTable Column Header?

Append Value to DataTable Column Header?

zgoforthzgoforth Posts: 493Questions: 98Answers: 2

Link to test case: https://jsfiddle.net/BeerusDev/o1tcmxpe/21/
Error messages shown: "jQuery.Deferred exception: Cannot read property 'style' of undefined", "TypeError: Cannot read property 'style' of undefined & "Script Error"
Description of problem: Hello, so before I can even attempt this, I am getting a script error when I make "Friday" not visible and FridayStatus visible. It shows everything but FridayStatus? I am not sure why it is doing that.

So I am changing the format of my DataTable to show the status of everyday (of current week) instead of showing the actual Date. With this being said, I have been given more instruction to have the corresponding date to show in the column header under the "Monday" default header. Is this possible? I haven't seen anything in relation to this?

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 15,721Questions: 25Answers: 3,725

    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

  • zgoforthzgoforth Posts: 493Questions: 98Answers: 2

    @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/

  • zgoforthzgoforth Posts: 493Questions: 98Answers: 2

    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 }
    ]

  • zgoforthzgoforth Posts: 493Questions: 98Answers: 2

    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/

  • kthorngrenkthorngren Posts: 15,721Questions: 25Answers: 3,725

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

    Kevin

  • zgoforthzgoforth Posts: 493Questions: 98Answers: 2

    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?

  • kthorngrenkthorngren Posts: 15,721Questions: 25Answers: 3,725

    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

  • zgoforthzgoforth Posts: 493Questions: 98Answers: 2

    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 :D . 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/

  • kthorngrenkthorngren Posts: 15,721Questions: 25Answers: 3,725
    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

  • zgoforthzgoforth Posts: 493Questions: 98Answers: 2

    @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/

  • zgoforthzgoforth Posts: 493Questions: 98Answers: 2

    I have come across this and seems to be along the right lines, will this append it? https://datatables.net/reference/option/headerCallback

  • zgoforthzgoforth Posts: 493Questions: 98Answers: 2
    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)

  • zgoforthzgoforth Posts: 493Questions: 98Answers: 2

    Update. I got it to work! I will attach my working fiddle here for reference: https://jsfiddle.net/BeerusDev/mznL52p8/133/

  • Swetha9090Swetha9090 Posts: 28Questions: 5Answers: 0

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

Sign In or Register to comment.