Create header from javascript
Create header from javascript
Beginner1
Posts: 6Questions: 1Answers: 0
Hello Members,
I hope you can help me in the correct direction.
My Datatable will be dynamic. I would like to create the Datatable from javascript, it is possible?
1) I would like to create a table like in this example from javascript: https://jsfiddle.net/p9n3kdy0/
2) I would like to set height/width individual for the three header rows. One height/width for first header row, one height/width for second header row and one height/width for third header row
3) I would like to have different backgrond color for Saturday and Sunday columns.
Regards R
This discussion has been closed.
Answers
This example shows how to create complex headers. You can use CSS to manipulate the styling.
I updated your example by adding jquery.js and initializing the Datatable. I commented out the
tbodyas it was causing errors in Datables since its not valid.https://jsfiddle.net/3gjmpnef/
Kevin
Hello,thanks for the answer kthorngren.
I need some more help with number 1,2,3. If it is possible to do?
Number 1 I provided an example.
Maybe you can give 2 and 3 a try in the example and if you have questions let us know.
Kevin
Hello kthorngren,
The example that I would like to do from javascript is what I provided
https://jsfiddle.net/p9n3kdy0.
2,3. I have played around with it, but I can not figure out how to do it. I keep on trying.
Did you look at the example I provided? Its an update of yours loading Datatables.
https://jsfiddle.net/3gjmpnef/
Kevin
I updated the example to show some basic/standard CSS to change the header row heights. Look at the CSS tab to see how it sets the height of the first two rows.
It also sets the background color of the Sat and Sun cells by using the classname
weekend.These are standard CSS settings. You can look at Stack Overflow if you need more specific settings. Also you can right click an element and use the Inspect tool to see what is applied and what the selectors are if you need to override something.
Updated example:
https://jsfiddle.net/ts9w6ez3/1/
Kevin
Thanks Kevin! I can see the example now.
I can change the "week" row by this line
$('table tr>th:first + th').html('Week 22');
How can I change the Mo/Tu row? and the date row?
You are asking standard HTML and Javascript questions. As I mentioned you will find better answers on Stack Overflow. Please ask any Datatables specific questions here.
Kevin
OK. The first question (number 1) is also HTML? And do not belong here?
Sounded like you were asking how to use complex headers with Datatables. I showed this site's example and updated your test case to show how. That belongs.
The point is that there are better places to research questions that aren't specific to Datatables. Those sites have more people answering questions and are specifically setup for the more general questions. Asking them here is ok but we might refer you to other forums to find the answers if Datatables is not involved.
Kevin
1) I would like to create a table like in this example from javascript: https://jsfiddle.net/p9n3kdy0/
I think the question is quite strait forward?
But we skip it.
Here is one of many SO threads that discuss building a dynamic table with multiple headers. This SO thread might also be helpful.
Kevin