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
JS
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
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ß
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
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ß