[
{
    "name": "Tiger Nixon",
    "position": "System Architect",
    "salary": "$320,800",
    "start_date": "2011/04/25",
    "office": "Edinburgh",
    "extn": "5421"
},
...

var table = $('#t2').DataTable( {
    "ajax": {
        "url": "<?php echo base_url(); ?>index.php/reporteJson/getReporteAllJson",
        "dataSrc": ""
    },
columns: [
    {
        className:      'details-control',
        orderable:      false,
        data:           null,
        defaultContent: ''
    },

        { "data": "CCODIGOCLIENTE" },
        { "data": "CRAZONSOCIAL" },
        { "data": "PENDIENTE" },
        { "data": "veintiunov" },
        { "data": "catorcev" },
        { "data": "sietev" },
        { "data": "siete" },
        { "data": "catorce" },
        { "data": "veintiuno" },
        { "data": "mes" },
        { "data": "bimestre" },
        { "data": "trimestre" }
],
order: [[1, 'asc']]

$('#t2 tbody').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = table.row( tr );

if ( row.child.isShown() ) {
    row.child.hide();
    tr.removeClass('shown');
}
else {
    row.child( format(row.data()) ).show();
    tr.addClass('shown');
}

function format ( rowData ) {
    var div = $('<div/>')
        .addClass( 'loading' )
        .text( 'Loading...' );

    $.ajax( {
        url: '<?php echo base_url(); ?>index.php/reporteJson/getReporteAll',
        dataSrc: '',
        dataType: 'json',
        success: function ( json ) {
            div
                .html( json.html )
                .removeClass( 'loading' );
        }
    } );

    return div;
}