Child rows (show extra / detailed information) with server-side

andreavellone

Hi, i'm trying to have some extra information but the show/hide function don't run. The error is "table is not defined", I can't see the problem..
This is the debug: http://debug.datatables.net/egonaj
This is the code:

    <script type="text/javascript" language="javascript" class="init">
    

/* Formatting function for row details - modify as you need */
function format ( d ) {
    // `d` is the original data object for the row
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
        '<tr>'+
            '<td>Materiali:</td>'+
            '<td>'+d.Materiali_id+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Extension number:</td>'+
            '<td>'+d.costi_materiali+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Extra info:</td>'+
            '<td>'+d.costi_materiali+'</td>'+
        '</tr>'+
    '</table>';
}

var editor; // use a global for the submit and return data rendering in the examples

$(document).ready(function() {
    editor = new $.fn.dataTable.Editor( {
        ajax: "../php/db-temis-ol.php",
        table: "#example",
        fields: [ 
            
            {
                label: "OL:",
                name: "ol.ol",
                
            }, {
                label: "Fase:",
                name: "ol.fase"
            }, {
                label: "Centrale:",
                name: "ol.centrale"
            }, {
                label: "Data Inizio:",
                name: "ol.Data_Inizio",
                type:  'datetime',
                def:   function () { return new Date(); 
            }}, {
                label: "Data Fine:",
                name: "ol.Data_Fine",
                type:  'datetime',
                def:   function () { return new Date(); 
            }}, {
                label: "Cliente:",
                name: "ol.cliente_id",
                type: "select"
            },{
                label:     "Fatturato:",
                name:      "ol.fatturato",
                type:      "checkbox",
                separator: "|",
                options:   [
                    { label: '', value: 1 }
                ]
            }
            
        ]
    } );



    $('#example').DataTable( {
        dom: "Bfrtip",
        ajax: "../php/db-temis-ol.php",
        order: [[ 2, 'desc' ]],
        columns: [
            {
                data: null,
                defaultContent: '',
                className: 'select-checkbox',
                orderable: false
            },
            
             {
                "className":      'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": ''
            },
            
            { data: "ol.id",
            
            render: function ( data, type, row ) {
              return 'OL-' + data;
            }
            },
            { data: "ol.fase" },
            { data: "ol.centrale" },
            { data: "ol.Data_Inizio"},
            { data: "ol.Data_Fine" },
            { data: "clienti.nome", editField: "ol.cliente_id" },
            
            {
                data:   "ol.fatturato",
                render: function ( data, type, row ) {
                    if ( type === 'display' ) {
                        return '<input type="checkbox" class="editor-active">';
                    }
                    return data;
                },
                className: "dt-body-center"
            }

            
            
            
        ],
        
        autoFill: {
            columns: ':not(:first-child):not(:nth-child(2))',
            editor:  editor
        },
        keys: {
            columns: ':not(:first-child):not(:nth-child(2))',
            editor:  editor
        },
        select: {
            style:    'os',
            selector: 'td:first-child',
            blurable: true
        },
        
        
        
        
                buttons: [
        
        {
                    extend: "create",
                    text:"+",
                    editor: editor,
                    className: 'btn btn-success waves-effect waves-light m-r-5',
                    action: function (e, dt, node, config) {
 
                        //var id = $("#id").val();
                       // var DebtorId = $('#SearchDebtorInvoice').data('debtorId');
 
                        editor
                                .create(false)
                                
                                .set('ol.ol')
                                .set('ol.fase')
                                .set('ol.centrale')
                                .set('ol.Data_Inizio')
                                .set('ol.Data_Fine')
                                .set('ol.cliente_id')
                                
                                

                                .submit();
 
                    }  
                },
        
        
            { extend: "create", editor: editor },
            { extend: "edit",   editor: editor },
            { extend: "remove", editor: editor },
            {
                extend: 'collection',
                text: 'Export',
                buttons: [
                    "copy",
                    "excel",
                    "csv",
                    "pdf",
                    "print"
                    
                ]
            }
            
            
            
        ], 
        
        rowCallback: function ( row, data ) {
            // Set the checked state of the checkbox in the table
            $('input.editor-active', row).prop( 'checked', data.ol.fatturato == 1 );
        }
    } );
 
    $('#example').on( 'change', 'input.editor-active', function () {
        editor
            .edit( $(this).closest('tr'), false )
            .set( 'active', $(this).prop( 'checked' ) ? 1 : 0 )
            .submit();
        
    } );
    
    
  // Add event listener for opening and closing details
    $('#example tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row( tr );
 
        if ( row.child.isShown() ) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            // Open this row
            row.child( format(row.data()) ).show();
            tr.addClass('shown');
        }
    } );
    
    
} );



    </script>
</head>
<body class="dt-example">

    <div class="container">
    <? include '../../menu.php'; ?>
        <section>
            <h1>Gestione OL</span></h1>
            <div class="info">
                <p>Editor has three different Editor modes:</p>
                
            </div>
            <div class="demo-html"></div>
            <table id="example" class="display" cellspacing="0" width="100%">
                <thead>
                    <tr>
                        <th></th>
                        <th></th>
                        <th>OL</th>
                        <th>Fase</th>
                        <th>Centrale</th>
                        <th>Inizio</th>
                        <th>Fine</th>
                        <th>Cliente</th>
                        <th>Fatturato</th>
                        
                        
                </tr>
                </thead>
            </table>
            
</body>
</html>

allan

Change:

$('#example').DataTable( {

to be:

var table = $('#example').DataTable( {

The error message was correct. The table variable wasn't defined.

Allan

andreavellone

It is true, thank you very much