Datatables получают значения из таблицы отображения (не исходная таблица, заданная параметром данных) - PullRequest
Новая
       26

Datatables получают значения из таблицы отображения (не исходная таблица, заданная параметром данных)

1 голос
/ 04 апреля 2020

Я немного запутался в работе с таблицами данных. Я создал упрощенный пример с массивом объектов (каждая строка, содержащая одну временную метку) в качестве источника данных и создал из него 4 столбца данных: 

$('#myTable').DataTable({
        "columns": [{
          "title": "Date",
          "data": "createTime",
          "orderData": 1,
          "render": function(data,type,row,meta){return moment.unix(data).format(moment.localeData().longDateFormat('LL'));}
      },
      {
          "title": "0_hidden_createTime",
          "data": "createTime",
          "visible": false,
          "searchable": false
      },
      {
          "title": "Button Column",
          "className": "dt-right",
          "render": function(data,type,row,meta){return '<button onclick="doIt($(this).closest(\'tr\'));return false;">Press Me</button>';}
      },
      {
        "title": "hidden_id",
        "visible": false,
        "render": function(data,type,row,meta){return new Date().getTime();}
      }],
      data: [
        {
          "createTime": 1570032790
        },
        {
            "createTime": 1572711189
        },
        {
            "createTime": 1575303183
        },
        {
            "createTime": 1577981593
        },
        {
            "createTime": 1580660000
        },
        {
            "createTime": 1583165589
        },
        {
            "createTime": 1585843981
        }
      ]
    });

Лог c за 4 столбцами:

  • Дата: дата в формате даты из отметки времени источника данных, упорядоченная по скрытому столбцу
  • 0_hidden_createTime: столбец orderby для столбца «Дата»
  • Колонка кнопки: кнопка для выполнить действие для каждой строки
  • hidden_id: столбец, который содержит уникальный идентификатор (здесь упрощен временной меткой), который я буду использовать позже

Теперь, после нажатия на кнопку I хотел бы получить эти скрытые значения, чтобы сделать что-то с этим. Но, кажется, очень трудно получить эти ценности. Я уже видел, что это, возможно, находится внутри объекта "context": 

function doIt(row){
  $('#myTable').DataTable().rows(row).data().context[0]
}

Но я не могу найти никаких полезных документов о том, как извлечь скрытые значения. Можете ли вы открыть этот черный ящик для меня? Я ожидал бы простой вызов, такой как .rows().data(), для всех значений, фактически находящихся в видимой таблице (например, получение вышеуказанных 4 строк и значений)

Оцените его.

1 Ответ

0 голосов
/ 06 апреля 2020

Итак, после того как ответа пока нет, я создал хак, чтобы получить все нужные мне значения. Конечно, есть гораздо лучший способ, но до тех пор, это рабочее решение. Эта функция собирает значение, видимое на экране, из таблицы данных. Он также будет собирать значения из скрытых столбцов, установленных либо defaultContent, либо отображать fn.

Имейте в виду, это работает в нашем конкретном случае c (ie. Мы используем входные данные как массив объектов и т. Д. на), если вы делаете это по-другому, функция может сломаться. 

/**
   * Function returns the value for a specific row and specific column. Unless specified by @forceVisibleValue, the 
   * function will return the column from input data if existing.
   *
   * @el:                   HMTLElement: from within the table, typically a clicked button
   * @column:               String: The target column name, can be from both sources - initial data or visible table
   * @forceVisibleValue:    Boolean: Force the method to return the visible column if exists (just incase your input data and output data has the same column name.
   */
  getDataFromColumn: function(el,column,forceVisibleValue){

    var row = $(el).closest('tr'),
        tableId = $(el).closest('table').attr('id'),
        table = $('#'+tableId).DataTable(),
        row = table.rows(row),
        value = row.data()[0][column];

    if(!forceVisibleValue && value)
      return value;

    if(!value || forceVisibleValue){
      //maybe one of the hidden columns
      var aoCols = row.context[0].aoColumns;
      for(var colIdx in aoCols){
        if(aoCols[colIdx]['title'] == column){
          if(aoCols[colIdx]['sDefaultContent'])
            return aoCols[colIdx]['sDefaultContent'];
          else if(aoCols[colIdx]['render']){
            var data = aoCols[colIdx]['data'] ? row.data()[0][aoCols[colIdx]['data']] : null,
                rowIdx = row[0][0],
                colIdx = table.context[0].oInit.columns.findIndex(function(obj){return obj.title == column;});
            return aoCols[colIdx]['render'].call(this,data,aoCols[colIdx]['sType'],row.data()[0],{settings: row.context[0], row: rowIdx, col: colIdx});
          } else
            return null;
        }
      }
    }
    return null;
  }
...