Member 14803832 Ответов: 1

Как добавить в заголовок таблицы динамический datarow, который будет работать с разбиением на страницы


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:


Что я уже пробовал:

https://codepen.io/Dimi98765/pen/WNrxvPj[^]

1 Ответов

Рейтинг:
1

Andre Oosthuizen

Без повторного изобретения колеса, datatables имеет все необходимые вам потребности - разбиение на страницы, строки на странице, опции поиска, заголовки и т. д. все на одном дыхании.

ПОДРОБНЕЕ вот из их документации с примерами кода для каждой функции в javascript/ajax.

Чтобы рассчитать разницу между 2 датами, используйте что-то вроде этого -

<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");


Чтобы создать массив после того, как расчет дат был выполнен, выполните следующие действия: -

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?


Чтобы изменить заголовок "текст", вы можете использовать что-то вроде этого -

headerCell.innerHTML = dates[0][i];
row.appendChild(headerCell);


Member 14803832

Привет, да, я уже читал его. проблема заключается в моем codepen, я сделал простой пример. в своем проекте я использую таблицу с несколькими динамическими событиями, которые datatable не может реализовать. Так что теперь я ищу возможность реализовать его самостоятельно.

Andre Oosthuizen

Если вы говорите, что хотите показать дни года в заголовке, вы имеете в виду, что хотите изменить понедельник, вторник или вы хотите изменить часть "01.01.2020"?

Member 14803832

да, я хочу изменить даты, 01.01.2020, 02.01.2020 и так далее до конца дня

Andre Oosthuizen

Итак, откуда же берутся эти даты? Вам нужно сделать расчет по дате начала и дате окончания, чтобы вычислить дни, или вы хотите вычислить дни, прошедшие до этой даты, если да, то с какой даты?

Member 14803832

это также мой вопрос, поскольку я понимаю, что мне нужен массив данных, чтобы передать его через цикл в таблице...

Andre Oosthuizen

Вы правильно построили массив для заполнения каждого столбца. Вопрос в том, откуда берутся даты, чтобы я мог установить, какие даты использовать? Какова ваша начальная дата, какова ваша конечная дата для каждой колонки?

См. мою правку выше для примера того, как рассчитать разницу между 2 датами.

Member 14803832

например, я хочу добавить в заголовок даты с 01.06.2020 по 05.07.2020 ровно 5 недель(5 страниц)

Member 14803832

а как я могу теке его из консоли и вставить в свой заголовок?

Andre Oosthuizen

Смотрите мою правку выше с некоторыми образцами. вам нужно поиграть с этим, чтобы заставить его работать для вашего приложения. Также смотрите этот сайт для хорошего примера - https://www.aspsnippets.com/Articles/Insert-Header-Cell-TH-element-in-HTML-Table-using-JavaScript.aspx

Member 14803832

хорошо, я попробую это сделать и скажу вам, работает ли это.

но...var mydates = новый массив();
mydates.метод push(["01.01.2020"]);
mydates.метод push(["02.01.2020"]);
mydates.метод push(["03.01.2020"]);

в этом коде вы добавляете данные вручную, а что, если я хочу показать весь год? вручную добавить его в массив было бы не очень смешно...

Andre Oosthuizen

правильно, смотрите ссылку, она проходит через i, чтобы получить все данные, это был пример только для того, чтобы указать вам правильное направление

Member 14803832

посмотрим... я надеюсь, что простой цикл через массив am будет решением проблемы.

легко сказать, что это должна быть одна большая таблица, где два заголовка повторяются после некоторых нормальных...