table

//index.blade.php==========================================

@extends('layouts.app')
 @section('content')
<div class="panel panel-primary">
    <div class="panel-heading">
      <h3 class="panel-title">Daftar Permintaan
          <a href="{{ route('permintaan.create') }}" class="btn btn-success pull-right modal-show" style="margin-top: -8px;" title="Create Permitaan"><i class="icon-plus"></i> Create</a>
      </h3>
    </div>
    <div class="panel-body">
          <table id="datatable" class="table table-hover" style="width:100%">
              <thead>
                  <tr>
                    <th>No</th>
                    <th>Kode</th>
                    <th>Tanggal Permintaan</th>
                    <th>Status</th>
                    <th>Action</th>
                  </tr>
              </thead>
              <tbody>

              </tbody>
              <tfoot>
                  <tr>
                    <th>No</th>
                    <th>Kode</th>
                    <th>Tanggal Permintaan</th>
                    <th>Status</th>
                    <th>Action</th>
                  </tr>
              </tfoot>
          </table>
    </div>
</div>
@endsection

@push('scripts')
    <script src="{{ asset('js/daftarpermintaan.js') }}"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.12/handlebars.min.js"></script>
    <script>
    var template = Handlebars.compile($("#details-template").html());
    console.log(  );
    var table = $('#datatable').DataTable({
            processing: true,
            serverSide: true,
            ajax: "{{ route('table.daftarpermintaan') }}",
            columns: [
                {
                    "className":      'details-control',
                    "orderable":      false,
                    "searchable":      false,
                    "data":           null,
                    "defaultContent": ''
                },
                {data: 'DT_Row_Index', name: 'kode_permintaan'},
                {data: 'kode_permintaan', name: 'kode_permintaan'},
                {data: 'tgl_permintaan', name: 'tgl_permintaan'},
                {data: 'status_permintaan', name: 'status_permintaan'}
            ],
            order: [[1, 'asc']]
        });

        // Add event listener for opening and closing details
        $('#datatable tbody').on('click', 'td.details-control', function () {
            var tr = $(this).closest('tr');
            var row = table.row(tr);
            var tableId = 'posts-' + row.data().id;

            if (row.child.isShown()) {
                // This row is already open - close it
                row.child.hide();
                tr.removeClass('shown');
            } else {
                // Open this row
                row.child(template(row.data())).show();
                initTable(tableId, row.data());
                tr.addClass('shown');
                tr.next().find('td').addClass('no-padding bg-gray');
            }
        });

        function initTable(tableId, data) {
            $('#' + tableId).DataTable({
                processing: true,
                serverSide: true,
                ajax: data.details_url,
                columns: [
                    { data: 'id', name: 'id' },
                    { data: 'title', name: 'title' }
                ]
            })
        }
    </script>

    <script id="details-template" type="text/x-handlebars-template">
        <div class="label label-info">Use's Posts</div>
        <table class="table details-table" >
            <thead>
            <tr>
                <th>Id</th>
                <th>Title</th>
            </tr>
            </thead>
        </table>
    </script>

@endpush

//End index.blade.php==========================================

//Ctroller.php==========================================

<?php

namespace App\Http\Controllers;
use App\Permintaan;
use App\Barang;
use App\Detailpermintaan;
use DataTables;
use DB;
use Session;
use Illuminate\Http\Request;

class DaftarpermintaanController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        return view('pages.daftarpermintaan.index');
    }

    public function getMasterData()
    {
        $model = Permintaan::query();

        return Datatables::of($model)
            ->addColumn('details_url', function($model) {
                return url('/table/daftarpermintaan' . $model->kode_permintaan);
            })
            ->addIndexColumn()
            ->make(true);
    }

    public function getDetailsData($kode_permintaan)
    {
        $posts = permintaan::find($kode_permintaan)->posts();

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

}

//End Ctroller.php==========================================


////route==========================================

Route::resource('/daftarpermintaan', 'DaftarpermintaanController');

Route::get('/table/daftarpermintaan', 'DaftarpermintaanController@getMasterData')->name('table.daftarpermintaan');