Как реализовать datatables в laravel 5.5 - PullRequest
Новая
       10

Как реализовать datatables в laravel 5.5

0 голосов
/ 01 октября 2019

Я жестко закодировал некоторые данные выборки, чтобы проверить, имеет ли место дата-данные о погоде или нет

table.blade.php 

@extends('layouts.app')
@section('content')
<div class="container">
  <div class="row">
     <!--<div class="col-md-8  col-md-offset-2">-->
     <div class="col-md-12">
        <div class="panel panel-default">
           <div class="panel-heading">table</div>
           <div class="panel-body">
              @if (session('status'))
              <div class="alert alert-success">
                 {{ session('status') }}
              </div>
              @endif
<table class="table" id="table">
   <thead>
       <tr>
           <th class="text-center">First Name</th>
           <th class="text-center">Last Name</th>
           <th class="text-center">Email</th>
       </tr>
   </thead>
   <tbody>
       <tr>
           <td>1</td>
           <td>2</td>
           <td>3</td>
       </tr>       
   </tbody>
</table>
</div>
        </div>
     </div>
  </div>
</div>
@endsection

Инициализация css / js на странице заголовка 

<head>
<script src="//code.jquery.com/jquery-1.12.3.js"></script>
<script src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script    src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css"> 
</head>

Javascript 

<script>
 $(document).ready(function() {
   $('#table').DataTable();
} );
</script>

Нет ошибок, но не отображаются параметры подкачки и поиска

Ответы [ 5 ]

0 голосов
/ 01 октября 2019

Ваши данные пытаются загрузить до завершения загрузки страницы. Отложите ваши скрипты, чтобы они загружались только после загрузки страницы: 

<script src="//code.jquery.com/jquery-1.12.3.js" defer></script>
<script src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js" defer></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js" defer></script>
0 голосов
/ 01 октября 2019

Попробуйте добавить в свой макет урожай. 

@yield('scripts')

На своей странице разместите раздел ('scripts'): 

@section('scripts')
<script>
        $(document).ready(function() {
          $('#table').DataTable();
       } );
       </script>
@stop
0 голосов
/ 01 октября 2019

Два способа: 1) файл env в поле имени базы данных 2) соединение файла database.php в поле имени базы данных

0 голосов
/ 01 октября 2019

Я выполнил разбиение по страницам, используя следующий код, но не полную библиотеку данных / данных.
Добавьте следующий код рядом с тегом </table>.

table.blade.php 

 {!! $viewalltask->links() !!}

Обновление также контроллера

controller.php 

public function viewalltask()
{
    $viewalltask = DB::table('tasks')->paginate(5);
    return view('viewalltask', ['viewalltask' => $viewalltask]);
}
0 голосов
/ 01 октября 2019

Я думаю, js файлы загружены неправильно. 

<script src="https://code.jquery.com/jquery-1.12.3.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"> 
</script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"> 
</script>
<link rel="stylesheet" 
href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" 
href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css">
...