DEV Community


Posted on

Expandable Yajra DataTable Laravel

var table = $('#users-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: '{{ url("users-data") }}',
        columns: [
                "className":      'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": ''
            {data: 'id', name: 'id'},
            {data: 'name', name: 'name'},
            {data: 'email', name: 'email'},
            {data: 'created_at', name: 'created_at'},
            {data: 'updated_at', name: 'updated_at'}
        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
        else {
            // Open this row
            row.child( format( ).show();

    /* Formatting function for row details - modify as you need */
    function format ( d ) {
        // `d` is the original data object for the row
        return '<table class="table">'+
                '<td>Full name:</td>'+
                '<td>Extra info:</td>'+
                '<td>And any further details here (images etc)...</td>'+
On your controller

public function getUsersData()
        $users = User::select(['id', 'name', 'email', 'created_at', 'updated_at']);

        return Datatables::of($users)->make(true);

Enter fullscreen mode Exit fullscreen mode

Top comments (0)