Ankündigung

Einklappen
Keine Ankündigung bisher.

im Laravel Projekt, Datatables via AJAX befüllen

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • im Laravel Projekt, Datatables via AJAX befüllen

    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ß

Lädt...
X