Web Analytics Made Easy - StatCounter
Главная Блог Таблицы данных Laravel - Ajax, столбец, кнопки, настройка

Таблицы данных Laravel - Ajax, столбец, кнопки, настройка

Таблицы данных Laravel - Ajax, столбец, кнопки, настройка

Введение

jQuery datatable очень популярен для перечисления данных в веб-приложении с различными интерактивными функциями, такими как поиск в реальном времени, разбиение на страницы, сортировка и многое другое. Если вы хотите использовать таблицы данных jQuery в своем приложении laravel, здесь я собираюсь показать вам, как использовать таблицы данных jQuery в laravel и как работать с таблицами данных laravel ajax, таблицами данных laravel на стороне сервера, настройкой таблиц данных и т. д. В этом учебном посте я буду использовать популярный пакет laravel для таблиц данных с именем yajra/laravel-datatables, чтобы упростить нашу задачу. Давайте начнем.

Laravel yajra/laravel-datatables шаги AJAX

  1. Установите пакет yajra / laravel-datatables.
  2. Определите маршруты.
  3. Сделайте контроллер для datatable.
  4. Сделайте просмотр и добавьте библиотеки Js.
  5. Код для таблиц данных jQuery.

1. Установите пакет yajra / laravel-datatables

Во-первых, мы должны установить пакет yajra/laravel-datatables с помощью команды composer.

composer require yajra/laravel-datatables-oracle:"~9.0" 

2. Определите маршруты

Теперь давайте определим эти два маршрута в файле маршрута web.php. Вы можете изменить конечные точки маршрута в соответствии с вашим приложением.

Route::get('api/customers','CustomerController@data'); Route::get('customers','CustomerController@index'); 

3. Сделайте контроллер для datatable

Теперь создайте контроллер для обработки представления и передачи данных в наши таблицы данных jQuery. Выполните команду artisan ниже, чтобы создать контроллер.

php artisan make:controller CustomerController 

Сделайте код в контроллере:

<?php namespace App\Http\Controllers; use App\Customer; class CustomerController extends Controller { public function index() { return view('customers'); } public function data() { $customers = Customer::all(); return datatables()->of($customers)->toJson(); } } 

Посмотрите из метода индекса, который мы просто возвращаем customers простое представление, которое мы создадим позже, а из метода данных мы возвращаем данные JSON для передачи их в таблицы данных jQuery. Здесь мы только что использовали datatables () -> of ($ data) -> toJson (); вы можете найти больше вариантов в документации yajra/laravel-datatables.

С помощью метода datatables () -> of () из пакета yajra/larave-datatables мы получим отформатированный JSON в конечной точке example.com/api/customers, как показано ниже. Так что нам не нужно ничего делать с формированием данных.

{ "draw": 0, "recordsTotal": 20, "recordsFiltered": 20, "data": [ { "id": 1, "name": "Kenya", "email": "Cheyenne.Nolan94@hotmail.com", "phone": "910-845479", "dob": "1982-10-22" }, { "id": 2, "name": "Madisen", "email": "Soledad.Schumm23@yahoo.com", "phone": "910-450685", "dob": "1984-09-19" }, ... ... } 

4. Сделайте просмотр и добавьте библиотеки JS

Создайте представление customers.blade.php внутри каталога resources/views и добавьте зависимости JS. Для данных jQuery требуется библиотека jQuery. Итак, мы должны сначала добавить его, а затем файл данных CSS и JS. Давайте сделаем это.

Вы можете добавить файлы библиотеки CSS и JS в свой главный файл макета, здесь я добавляю их в файл customers.blade.php для учебных целей.

@extends('layouts.app') @section('content') <div class="container"> <div class="row"> <div class="col-md-8"> <h3>Customers</h3> <hr> <table id="customers" class="table table-bordered table-condensed table-striped" > <thead> <tr> <th>ID</th> <th>Name</th> <th>Phone</th> <th>DOB</th> </tr> </thead> </table> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet"> <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script> <!-- our script will be here --> </div> </div> </div> @endsection 

5. Код для таблиц данных jQuery

Теперь добавьте приведенный ниже код в конец файла customers.blade.php для отображения данных в интерактивной таблице данных jQuery. Для laravel datatables AJAX установите значение AJAX нашей конечной точки API для получения данных о клиентах и установите значение true для серверной стороны yajra/laravel-datatables.

$(document).ready(function() { $.noConflict(); $('#customers').DataTable({ ajax: '', serverSide: true, processing: true, columns: [ {data: 'id', name: 'id'}, {data: 'name', name: 'name'}, {data: 'phone', name: 'phone'}, {data: 'dob', name: 'dob'} ] }); }) 

Вывод Laravel-Datatable

Просмотрите example.com/customers, и вы получите результат, похожий на приведенный снимок экрана.

Вывод Laravel-Datatable

Настройка Laravel Datatables

Добавить настраиваемый столбец в таблицы данных

Чтобы добавить настраиваемый столбец в данные API yajra/laravel-datatables, используйте метод addColumn ('coumn_name', callback). Предположим, нам нужен еще один столбец для таких действий, как редактирование, кнопка удаления.

public function data() { $customers = Customer::all(); return datatables()->of($customers) ->addColumn('action', function ($row) { $html = '<a href="#" class="btn btn-xs btn-secondary">Edit</a> '; $html .= '<button data-rowid="'.$row->id.'" class="btn btn-xs btn-danger">Del</button>'; return $html; })->toJson(); } 

В таблице разметки HTML добавьте столбец

<th>Action</th> 

Добавьте столбец в массив columns скрипта.

{data: 'action', name: 'action'}, 

Вывод Laravel-Datatable

Отключить поиск и сортировку для определенного столбца

Чтобы отключить поиск и сортировку для определенного столбца, добавьте значение для orderable и searchable для поиска false.

{data: 'action', name: 'action', orderable: false, searchable: false}, 

Добавить пользовательский образ загрузчика AJAX в таблицы данных

Чтобы добавить пользовательское изображение загрузчика AJAX в таблицы данных jQuery, добавьте изображение с oLanguage в скрипт.

oLanguage: { sProcessing: "<img src='image_url_here'>" }, 

Таблицы данных предварительно отсортированные данные с определенным столбцом

Чтобы отображать данные таблиц данных с предварительно отсортированными по определенному столбцу, добавьте свойство aaSorting.

aaSorting: [[0, "desc"]], 

Здесь 0 относится к первому столбцу таблиц данных.

Надеюсь, этот учебный пост поможет вам интегрировать данные jQuery с пакетом yajra/laravel-datatables. Если вы найдете этот пост полезным для вас, поделитесь им с другими, чтобы им помогли.

Источник

Laravel Datatables - Ajax, Column, Buttons, Customization