Hi,

ich würde gerne ein Datatable über Ajax befüllen.

soweit läuft das auch , aber ich würde nun gerne mit den Child Rows weiter Daten Anzeigen lassen und dazu muss ich diese an eine Funktion übergeben.
Nur bekomme ich irgendwie nciht den zugriff auf die Daten.


html
HTML-Code:
@section('content')
    <div class="containerfluid">
        <div class="row">
            <div class="col-sm-10 col-sm-offset-1">
                <div class="panel panel-default">
                    <div class="panel-heading"><h4>test</h4></div>
                        <table id="users-table" class="display compact hover">
                           <thead>
                               <tr>
                                   <th>url</th>
                                   <th>name</th>
                               </tr>
                           </thead>
                       </table>
                    </div>
                </div>
            </div>
        </div>
@endsection
JS
Code:
@section('page-script')



<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-3.2.1/jszip-2.5.0/dt-1.10.16/b-1.5.1/b-html5-1.5.1/b-print-1.5.1/fh-3.1.3/sl-1.2.4/datatables.min.js"></script>


<script type="text/javascript">


// dropdown menu
function format ( d ) {
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
        '<tr>'+
            '<td>id</td>'+
            '<td>'+d.id+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>url:</td>'+
            '<td>'+d.url+'</td>'+
        '</tr>'+
    '</table>';
}


$(document).ready(function() {
    var table = $('#users-table').DataTable( {
        "ajax": '*****',
        "columns": [
            {
                "className":      'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": ''
            },
            // { "data": "id" },
            // { "data": "url" },
            // { "data": "name" },
            null,
            null,
        ],
        "order": [[1, 'asc']]
    } );

    // Add event listener for opening and closing details
    $('#users-table 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');
        }
    } );
} );

Die Funktionalität des auf und zuklappen klappt einwandfrei, auch die anzeige der Daten in der "header Row" , das problem ist das ich laut anleitung mit {"data" : "id"},{"data" : "url"} die daten dort ja abgeifen soll , das passt aber nciht mit meinem json zusammen .

Json

Code:
{
  • draw: 0,
  • recordsTotal: 3,
  • recordsFiltered: 3,
  • data: [
    • [
      • 1,
      • "test.de",
      • "15"
      ],
    • [
      • 2,
      • "sdafsdf.de",
      • "2"
      ],
    • [
      • 5,
      • "asdfgdf",
      • "2"
      ]
    ],
  • queries: [
    • {
      • query: "select count(*) as aggregate from (select '1' as `row_count` from `test`) count_row_table",
      • bindings: [ ],
      • time: 0.52
      },
    • {
      • query: "select `id`, `url`, `name` from `test`",
      • bindings: [ ],
      • time: 0.41
      }
    ],
  • input: [ ]
}

wie kann ich auf die Daten in dem Json zugreifen und sie an die Funktion format(d) übergeben das ich sie in der Child Row ausgeben kann?

Habt vielen Dank

Gruß