Click here to Skip to main content
14,929,655 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I'm trying to implement table with dynamic data and pagination, it works more or less good but i do not know how to implement in header of my table dynamic data. in my case it should be days of the year.

the idea is to change in every page header and show in every week a new data. it should also work with "previous" and "next" links. As i understand I should set a stard and end date, but how can I really binde it with my table? Does somebody have any idea?

here is an Example:


What I have tried:

https://codepen.io/Dimi98765/pen/WNrxvPj[^]
Posted
Updated 16-Jun-20 1:00am
v2

1 solution

Without re-inventing the wheel, datatables has every need you might require - pagination, rows per page, search option, headers etc. all in one go.

READ MORE here from their documentation with sample code for each function in javascript/ajax.

To calculate the difference between 2 dates, use something like this -

<pre lang="Javascript">
const date1 = new Date('7/13/2010');
const date2 = new Date('12/15/2010');
const diffTime = Math.abs(date2 - date1);
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); 
console.log(diffTime + " milliseconds");
console.log(diffDays + " days");


To create teh array AFTER the dates calculation was done, do thi -

JavaScript
var mydates = new Array();
mydates.push(["01.01.2020"]);
mydates.push(["02.01.2020"]);
mydates.push(["03.01.2020"]);
//This is the data you are talking about?


To change the header "text", you can use something like this -

JavaScript
headerCell.innerHTML = dates[0][i];
row.appendChild(headerCell);
   
v4
Comments
Member 14803832 16-Jun-20 7:44am
   
Hi, yes I've already read it. the problem is in my codepen, I've made a simple example. in my project I'm using table with several dynamic events what datatable can not implement. So now I'm looking for possibilit to implement it by myself.
Andre Oosthuizen 16-Jun-20 7:52am
   
If you say you want to show the days of year in header, do you mean you want to change MONDAY, TUESDAY or do you want to change the "01.01.2020" part?
Member 14803832 16-Jun-20 8:07am
   
yes I want to change dates, 01.01.2020, 02.01.2020 and so on until the enddate
Andre Oosthuizen 16-Jun-20 8:12am
   
Ok, so where is the dates coming from? You need to do a calculation on the start date and the end date to calculate the days OR do you want to calculate the days past to this date shown, if so from what date then?
Member 14803832 16-Jun-20 8:31am
   
this is also my question, as i understand I need an array of data to pass it thru loop in a table...
Andre Oosthuizen 16-Jun-20 8:36am
   
You are correct to build an array to fill each column. Question is, where does the dates come from so I can establish what dates to use? What is your start date, what is your end date for each column?

See my edit above for an example on how to calculate the difference between 2 dates.
Member 14803832 16-Jun-20 8:46am
   
for example I want to add to the header dates from 01.06.2020 until 05.07.2020 exactley 5 weeks(5 pages)
Member 14803832 16-Jun-20 8:47am
   
an how can i teke it from console and insert into my header?
Andre Oosthuizen 16-Jun-20 8:48am
   
See my edit above with some samples. you need to play with this to make it work for your application. Also see this site for a good example - https://www.aspsnippets.com/Articles/Insert-Header-Cell-TH-element-in-HTML-Table-using-JavaScript.aspx
Member 14803832 16-Jun-20 8:53am
   
ok, will try this out, and tell You if it works.

but...var mydates = new Array();
mydates.push(["01.01.2020"]);
mydates.push(["02.01.2020"]);
mydates.push(["03.01.2020"]);

in this code You're addin data manually, what if I want to show the whole year? manually add it in an array would be not really funny...
Andre Oosthuizen 16-Jun-20 9:04am
   
correct, see the link, it loops through i to get all data, this was an example only to point you in the right direction
Member 14803832 16-Jun-20 9:10am
   
we will see... i hope simple loop thru am array will be a solution.

easy to say it should be one big table where two headers repeat themself after some normal 's...

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900