Динамическое добавление столбцов в Datatables

Мне интересно, можно ли добавить динамический столбец (полностью основанный на значении данного индекса) в datatables. Вот что я имею до сих пор:

$(function(){
  window.clearInterval(window.poll_fetch);
  //$('.directory-text').text('Directories');
  //$('#directory_list').DataTable().destroy();
  contacts_data = $('.directory-page').data('contactList').data[0];
  console.log(contacts_data);
  $('.phonebook-title').text(contacts_data.group_name);
  $.each(contacts_data.variables,function(key,value){
    $('#directory_contact_list tr').append('<th>'+key+'</th>');
  })
  var directoryContactListTable = $('#directory_contact_list').DataTable({
       //"processing": true,
       //"serverSide": true,
       //"order" : [[ 3, "desc" ]],
       "language" : {
        "paginate": {
          "previous": '<',
          "next": '>'
        },
        "search": "",
        "searchPlaceholder": "Search group"

      },

      "ajax" : {
        "url": window.apiURL+'api/groups/one/'+contacts_data.group_id+'/'+window.userID,
        "type": "POST",
        "headers": {
          Authorization: window.currentUser+' '+window.apiKey
        }
      },
      "columns" : [
      { "data": "msisdn"},
      {"data":"variables",
       render:function(data,type,row){
        return data.Name;
       }
      },
      {"data":"variables",
       render:function(data,type,row){
        return data.City;
       }
      }
    ],
    "initComplete": function(settings, json) {
      console.log(json.data);
      if (json.data.length > 0) {
        $('#directory_list_container').removeClass('hidden');
        $('#no-data-container').addClass('hidden');
      } else {
        $('#directory_list_container').addClass('hidden');
        $('#no-data-container').removeClass('hidden');
      }
    }
  });

  $(document).off('click','.btn-new-directory');
  $(document).unbind('click','.btn-new-directory');
  $(document).off('click', '.btn-new-directory').on('click','.btn-new-directory', function(){
    console.log('Clicked "New Directory" button.');
    $('#new-directory-modal .modal-content').load(window.baseURL+'directory/directory-create-phonebook-form');
      // $('#new-directory-modal').modal('show');
    });

});
<table id="directory_contact_list" class="display tally-list" cellspacing="0" width="100%">
            <thead>
                <tr>
                   <th>Mobile Number</th>
                </tr>
            </thead>
        </table>

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

jquery,datatables,

0

Ответов: 0

Динамическое добавление столбцов в Datatables

Мне интересно, можно ли добавить динамический столбец (полностью основанный на значении данного индекса) в datatables. Вот что я имею до сих пор:

$(function(){
  window.clearInterval(window.poll_fetch);
  //$('.directory-text').text('Directories');
  //$('#directory_list').DataTable().destroy();
  contacts_data = $('.directory-page').data('contactList').data[0];
  console.log(contacts_data);
  $('.phonebook-title').text(contacts_data.group_name);
  $.each(contacts_data.variables,function(key,value){
    $('#directory_contact_list tr').append('<th>'+key+'</th>');
  })
  var directoryContactListTable = $('#directory_contact_list').DataTable({
       //"processing": true,
       //"serverSide": true,
       //"order" : [[ 3, "desc" ]],
       "language" : {
        "paginate": {
          "previous": '<',
          "next": '>'
        },
        "search": "",
        "searchPlaceholder": "Search group"

      },

      "ajax" : {
        "url": window.apiURL+'api/groups/one/'+contacts_data.group_id+'/'+window.userID,
        "type": "POST",
        "headers": {
          Authorization: window.currentUser+' '+window.apiKey
        }
      },
      "columns" : [
      { "data": "msisdn"},
      {"data":"variables",
       render:function(data,type,row){
        return data.Name;
       }
      },
      {"data":"variables",
       render:function(data,type,row){
        return data.City;
       }
      }
    ],
    "initComplete": function(settings, json) {
      console.log(json.data);
      if (json.data.length > 0) {
        $('#directory_list_container').removeClass('hidden');
        $('#no-data-container').addClass('hidden');
      } else {
        $('#directory_list_container').addClass('hidden');
        $('#no-data-container').removeClass('hidden');
      }
    }
  });

  $(document).off('click','.btn-new-directory');
  $(document).unbind('click','.btn-new-directory');
  $(document).off('click', '.btn-new-directory').on('click','.btn-new-directory', function(){
    console.log('Clicked "New Directory" button.');
    $('#new-directory-modal .modal-content').load(window.baseURL+'directory/directory-create-phonebook-form');
      // $('#new-directory-modal').modal('show');
    });

});
<table id="directory_contact_list" class="display tally-list" cellspacing="0" width="100%">
            <thead>
                <tr>
                   <th>Mobile Number</th>
                </tr>
            </thead>
        </table>

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

00JQuery, DataTables,
Похожие вопросы
Яндекс.Метрика