Lyavel 9 Yajraサーバ側のデータチュートリアル

6014 ワード
laravel javascript beginners tutorial テキストリンク
このブログでは、ララベル9を使用してサーバ側のデータを知ることになります.データテーブルは、高度な検索機能を持つテーブルにデータを表示するjQueryライブラリで最も重要なプラグインの一つです.
DataTablesは、テーブルに大きなデータを表示するために非常に重要です.データテーブルの主な利点は、ユーザーがデータをフィルタリングする高度な検索機能を与え、それはまた、並べ替え、ページ付け、検索などのユーザーフレンドリーな機能の多くを提供し、他の機能は、当社のWebページのデータベースデータを処理するために.
サーバー側のDataTablesのためにyajra/laravel datatables oracleパッケージを使用します.

Step 1 : Laravelプロジェクトのインストール


まず、次のコマンドを実行して、新しいLaravelプロジェクトを作成します.
composer create-project --prefer-dist laravel/laravel laravel-datatable-example
または、Laravelインストーラをグローバルな作曲家依存関係としてインストールした場合、
laravel new laravel-datatable-example

ステップ2 :データベースの詳細設定


インストール後、プロジェクトのルートディレクトリに移動します.ENVファイル、次のようにデータベースの詳細を設定します.
DB_CONNECTION=mysql 
DB_HOST=127.0.0.1 
DB_PORT=3306 
DB_DATABASE=<DATABASE NAME>
DB_USERNAME=<DATABASE USERNAME>
DB_PASSWORD=<DATABASE PASSWORD>

ステップ3：インストールYajraデータ


Yajraデータをインストールするには、作曲者コマンドを実行する必要があります.端末を開き、このコマンドを入力して実行します.
composer require yajra/laravel-datatables-oracle:"~9.0"
このパッケージは、jQueryプラグインのDataTablesのサーバー側のパフォーマンスをAjaxを使用してeloquent ORM、クエリビルダー、またはコレクションを使用して処理します.

ステップ4 :ダミーデータの作成


この手順では、tinkerファクトリを使用していくつかのダミーユーザーを作成します.では以下のコマンドを使ってダミーレコードを作成しましょう.
まず、このコマンドを使用してオープンティンカー
php artisan tinker
次のコマンドを実行してダミーレコードを作成する
User::factory()->count(500)->create()

ステップ5 :ルートを追加


このステップでは、データファイルレイアウトファイルとデータ取得用の別のルートを作成する必要があります.だからあなたのルート/ウェブを開きます.PHPファイルと次のルートを追加します.
<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\UserController;

Route::get('users', [UserController::class, 'index'])->name('users.index');

ステップ6 :作成コントローラ


現時点では、ユーザーコントローラとして新しいコントローラを作成する必要があります.このコントローラはレイアウトを管理し、データリクエストを受け取り、応答を返すので、コントローラーファイルの内容を以下に示します:
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\User;
use DataTables;

class UserController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */

    public function index(Request $request)
    {
        if ($request->ajax()) {
            $data = User::select('id','name','email')->get();
            return Datatables::of($data)->addIndexColumn()
                ->addColumn('action', function($row){
                    $btn = '<a href="javascript:void(0)" class="btn btn-primary btn-sm">View</a>';
                    return $btn;
                })
                ->rawColumns(['action'])
                ->make(true);
        }

        return view('users');
    }
}

ステップ7：ブレードファイルを作成する


最後に、ユーザーを作成しましょう.ブレード.レイアウト用のPHP ( resource/views/users . blade . php )ここでデザインコードを作成し、次のコードを作成します.
<!DOCTYPE html>
<html>
<head>
    <title>Laravel 9 Server Side Datatables Tutorial</title>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
    <link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet">
    <link href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
    <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-12 table-responsive">
            <table class="table table-bordered user_datatable">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Email</th>
                        <th width="100px">Action</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
  $(function () {
    var table = $('.user_datatable').DataTable({
        processing: true,
        serverSide: true,
        ajax: "{{ route('users.index') }}",
        columns: [
            {data: 'id', name: 'id'},
            {data: 'name', name: 'name'},
            {data: 'email', name: 'email'},
            {data: 'action', name: 'action', orderable: false, searchable: false},
        ]
    });
  });
</script>
</html>
次のコマンドを実行する準備ができました.
php artisan serve
ブラウザで以下のURLを開くことができます
http://localhost:8000/users
このブログを読んでくれてありがとう.
ハーバーパラシュート
カートに追加ボタンを追加するカートに追加する