I am trying to convert a 5-tier data into datatables. I want to achieve something like that -> http://live.datatables.net/mukirowi/247/edit. So i'm trying to display a new datatable in the childrow in an AngularJS application. My problem is:
When i try so it works half - it shows the table but without data:
vm.example_dtOptions = create_dt_options();
vm.example_dtColumns = create_dt_columns();
vm.example_dtInstance = {};
function create_dt_options() {
var _data = data;
var _dt_options = DataTableService.create_dt_options_local_data(vm, _data);
_dt_options.rowCallback = rowCallback;
_dt_options.createdRow = createdRow;
return _dt_options;
}
function create_dt_columns() {
var _columns = [
{
className: 'details-control',
orderable: false,
data: null,
defaultContent: ''
},
{data: "clientID"},
{data: "wip"},
{data: "ar"},
{data: "ar0_30"},
{data: "ar31_60"},
{data: "ar61_90"},
{data: "ar91_120"},
{data: "ar121_"},
{data: "suspense"}
];
return _columns;
}
// Callback-Funktion für ganze Zeile (hier: Click-Event auf Zeile)
// Add event listener for opening and closing first level childdetails
function rowCallback( tabRow, data, dataIndex ){
var a;
$( tabRow ).unbind( "click" );
$( tabRow).bind( "click", function(){
$scope.$apply( function(){
// event.stopImmediatePropagation();
var tr = $(tabRow);
var table = vm.example_dtInstance.DataTable;
var row = table.row(tr);
a = row;
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
// Open this row
displayChildOfTable1( row);
tr.addClass('shown');
}
});
$timeout(function(){
// vm.show_child1 = true;
});
} );
}
function createdRow(row, data, dataIndex) {
// Recompiling so we can bind Angular directive
$compile(angular.element(row).contents())($scope);
}
/* -------------------------------- Child1 --------------------------------------------*/
function displayChildOfTable1(row, data){
var string = '<table id="dataTable_child1" class="DTTable2 table kiss-grid">';
string = string + '</table>';
var table = $(string);
// Display it in the child row
row.child(table).show();
/*
var a = row.child(table);
console.log("a",a);*/
// Initialise as a DataTable
var Table2 = table.DataTable({
processing: true,
data: vm.data,
searching: true,
paging: true,
pageLength: 10,
ordering: true,
options: vm.child1_dtOptions, // 676
columns: vm.child1_dtColumns,
instance: vm.child1_dtInstance
})
}
vm.child1_dtOptions = create_dt_options_child1();
vm.child1_dtColumns = create_dt_columns_child1();
vm.child1_dtInstance = {};
function create_dt_options_child1(){
var _data = data_child;
var _dt_options = DataTableService.create_dt_options_local_data( vm, _data );
_dt_options.rowCallback_child = rowCallback_child1;
_dt_options.createdRow_child = createdRow_child1;
return _dt_options;
}
function create_dt_columns_child1(){
var _columns = [
{
className: 'details-control',
orderable: false,
data: null,
defaultContent: ''
},
{ data: "wip",
title: "wip"},
{ data: "ar" },
{ data: "ar0_30" },
{ data: "ar31_60" },
{ data: "ar61_90" },
{ data: "ar91_120" },
{ data: "ar121_" },
{ data: "suspense" }
];
return _columns;
}
function createdRow_child1(row, data, dataIndex) {
// Recompiling so we can bind Angular directive
$compile(angular.element(row).contents())($scope);
}
// Callback-Funktion für ganze Zeile (hier: Click-Event auf Zeile)
// Add event listener for opening and closing second level childdetails
function rowCallback_child1( tabRow, data, dataIndex ){
console.log("hiiii")
$( tabRow ).unbind( "click" );
$( tabRow).bind( "click", function(){
$scope.$apply( function(){
event.stopImmediatePropagation();
console.log("row",row);
console.log("data",data);
console.log("index",dataIndex);
console.log("click");
var tr = $(tabRow);
console.log("tr",tr);
var table = vm.child1_dtInstance.DataTable;
var row = table.row(tr);
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
// Destroy the Child Datatable
// $('#cl' + data.clientID).DataTable().destroy();
}
else {
// Open this row
//displayChildOfTable2( row);
tr.addClass('shown');
}
});
} );
}
but not that way:
vm.example_dtOptions = create_dt_options();
vm.example_dtColumns = create_dt_columns();
vm.example_dtInstance = {};
function create_dt_options() {
var _data = data;
var _dt_options = DataTableService.create_dt_options_local_data(vm, _data);
_dt_options.rowCallback = rowCallback;
_dt_options.createdRow = createdRow;
return _dt_options;
}
function create_dt_columns() {
var _columns = [
{
className: 'details-control',
orderable: false,
data: null,
defaultContent: ''
},
{data: "clientID"},
{data: "wip"},
{data: "ar"},
{data: "ar0_30"},
{data: "ar31_60"},
{data: "ar61_90"},
{data: "ar91_120"},
{data: "ar121_"},
{data: "suspense"}
];
return _columns;
}
// Callback-Funktion für ganze Zeile (hier: Click-Event auf Zeile)
// Add event listener for opening and closing first level childdetails
function rowCallback( tabRow, data, dataIndex ){
var a;
$( tabRow ).unbind( "click" );
$( tabRow).bind( "click", function(){
$scope.$apply( function(){
// event.stopImmediatePropagation();
/*console.log("row",row);
console.log("data",data);
console.log("index",dataIndex);
console.log("click");
*/
var tr = $(tabRow);
// console.log("tr",tr);
var table = vm.example_dtInstance.DataTable;
var row = table.row(tr);
a = row;
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
// Destroy the Child Datatable
// $('#cl' + data.clientID).DataTable().destroy();
}
else {
// Open this row
displayChildOfTable1( row);
//a.child.show();
tr.addClass('shown');
}
});
$timeout(function(){
// vm.show_child1 = true;
});
} );
}
function createdRow(row, data, dataIndex) {
// Recompiling so we can bind Angular directive
$compile(angular.element(row).contents())($scope);
}
/* ---------------------------------------------------------------------------------------------------------------*/
/* -------------------------------- Anfang Definition Child1 Tabelle--------------------------------------------*/
function displayChildOfTable1(row, data){
console.log("hi vom child")
var string = '<table id="dataTable_child1"' +
' datatable=""' + ' dt-options="vm.child1_dtOptions"' +
' dt-columns="vm.child1_dtColumns"' +
' dt-instance="vm.child1_dtInstance"' +
' class="DTTable2 kiss-grid" >';
string = string + '</table>';
var table = $(string);
// Display it in the child row
row.child(table).show();
}
vm.child1_dtOptions = create_dt_options_child1();
vm.child1_dtColumns = create_dt_columns_child1();
vm.child1_dtInstance = {};
function create_dt_options_child1(){
var _data = data_child;
var _dt_options = DataTableService.create_dt_options_local_data( vm, _data );
_dt_options.rowCallback_child = rowCallback_child1;
_dt_options.createdRow_child = createdRow_child1;
return _dt_options;
}
function create_dt_columns_child1(){
var _columns = [
{
className: 'details-control',
orderable: false,
data: null,
defaultContent: ''
},
{ data: "wip",
title: "wip"},
{ data: "ar" },
