Click here to Skip to main content
15,907,906 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);
 
Share this answer
 
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...

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