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

Раз в неделю мы отправляем дайджест с самыми популярными статьями. Подпишитесь на наши новости и мы сделаем для вас бесплатно аудит вашего сайта.