DataTable не заполняется значениями текстового поля, передаваемыми как новые столбцы в таблице.

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

let test1 = (document.getElementById("idtest1") as HTMLInputElement).value;
   let test2 =(document.getElementById("idtest2") as HTMLInputElement).value;
    this.dtOptions = {
      pagingType: "full_numbers",
      pageLength: 10,
      scrollCollapse: true,
      processing: true,
      destroy: true,
      scrollY:'50vh',
      columns: [
        { data: "index" },
        { data: "firstname" },
        { data: "lastname" },
        {data: null, defaultContent: test1},
        {data: null, defaultContent: test2},
      ],

Stackblitz


datatable jquery angular-datatables
person Rajasekhar    schedule 11.02.2021    source источник

Ответы (1)


arrow_upward
2
arrow_downward

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

Вы можете убедиться в этом сами, добавив текст по умолчанию в поля ввода:

<input type="text" id="idtest1" value="initial test text">

Теперь вы увидите исходный тестовый текст в DataTable.

И вы продолжите видеть его, даже если пользователь изменит значение или полностью удалит его.

Вам нужно переместить эту функцию в событие click, прикрепленное к кнопке Click to load table.

person andrewjames    schedule 11.02.2021