Admin LTE2 Datatables style not working

Question

AdminLTE2 Datatables functionalities works perfectly.But the styling 've not applied for the data tables.and Here is my code,

In Master blade:

@if(config('adminlte.plugins.datatables'))
    <!-- DataTables -->
 <link rel="stylesheet" type="text/css" 
         href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
 @endif

 In my child blade,
      @section('content')
             <div class="box-body">
          <table id="example2" class="table table-bordered table-hover">
            <thead>
            <tr>
              <th>Rendering engine</th>
              <th>Browser</th>
              <th>Platform(s)</th>
              <th>Engine version</th>
              <th>CSS grade</th>
            </tr>
            </thead>
            <tbody>
            <tr>
              <td>Trident</td>
              <td>Internet
                Explorer 4.0
              </td>
              <td>Win 95+</td>
              <td> 4</td>
              <td>X</td>
            </tr>
            <tr>
              <td>Trident</td>
              <td>Internet
                Explorer 5.0
              </td>
              <td>Win 95+</td>
              <td>5</td>
              <td>C</td>
            </tr>                       
            </table>
        </div>
  @stop
 @section('adminlte_js')
 <script>
   $(function () {
 $("#example1, #example2").DataTable();
});
</script>
 @stop

Is anything wrong with linked css files? Can anybody help me to solve this issue?

Answer 1

You have to include bootstrap js and css files. Try this in your child view:

@section('adminlte_css')
    <link rel="stylesheet" type="text/css" 
                 href="//cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css">
@stop

@section('content')
  ...
@stop

@section('adminlte_js')
    <script src="//cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
    <script>
        $(function () {
            $("#example1, #example2").DataTable();
        });
    </script>
@stop