Мне интересно, можно ли добавить динамический столбец (полностью основанный на значении данного индекса) в 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>
Это работает только в том случае, если я знаю значение индекса, например (имя и город), я хотел бы изменить свой код, чтобы он автоматически настраивался на основе содержимого индекса переменной.
Мне интересно, можно ли добавить динамический столбец (полностью основанный на значении данного индекса) в 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,