Welcome toVigges Developer Community-Open, Learning,Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.4k views
in Technique[技术] by (71.8m points)

jquery - Nested Table in Childrows doesnt work with dynamic data

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" },
  

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)
等待大神解答

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to Vigges Developer Community for programmer and developer-Open, Learning and Share
...