如何在 Laravel 8 中添加數據表 AJAX 分頁

使用分頁，更容易在頁面上顯示大量數據。

您可以使用和不使用 AJAX 創建分頁。

有許多 jQuery 插件可用於添加分頁。其中之一是數據表。

在本教程中，我將展示如何在沒有 Laravel 8 中的 Laravel 包的情況下添加 Datatables AJAX 分頁。

1. 數據庫配置

打開.env文件。

指定主機、數據庫名稱、用戶名和密碼。

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=tutorial
DB_USERNAME=root
DB_PASSWORD=

---

2.創建表

• Employees使用遷移創建一個新表並添加一些記錄。

php artisan make:migration create_employees_table

• database/migration/現在，從項目根目錄導航到文件夾。
• 找到一個以 結尾的 PHP 文件create_employees_table並打開它。
• 在方法中定義表結構up()。

public function up()
{
    Schema::create('employees', function (Blueprint $table) {
        $table->id();
        $table->string('username');
        $table->string('name');
        $table->string('email');
        $table->timestamps();
    });
}

• 運行遷移 -

php artisan migrate

• 表已創建並在其中添加一些記錄。

---

3. 下載

• 從這裡下載 DataTables 庫 並下載 jQuery 庫。
• 提取文件public/夾中下載的文件。
• 此外，將 jQuery 庫複製到public/文件夾中。
• 您還可以使用 CDN –

<!-- Datatable CSS -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css"/>

<!-- jQuery Library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!-- Datatable JS -->
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>

---

4. 型號

• 創建Employees模型。

php artisan make:model Employees

• 打開 app/Models/Employees.php 文件。
• 使用該屬性指定可批量分配的模型屬性 - 用戶名、姓名和電子郵件$filliable。

完成的代碼

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Employees extends Model
{
    use HasFactory;

    protected $fillable = [
       'username','name','email'
    ];
}

---

5. 路線

• 打開routes/web.php文件。
• 定義 2 條路線 –
  • / - 加載索引視圖。
  • /getEmployees –這用於發送 AJAX POST 請求以獲取數據表數據。

<?php
use Illuminate\Support\Facades\Route; 
use App\Http\Controllers\EmployeesController; 

Route::get('/', [EmployeesController::class, 'index']); 
Route::get('/getEmployees', [EmployeesController::class, 'getEmployees'])->name('getEmployees');

---

6.控制器

• 創建 EmployeesController 控制器。

php artisan make:controller EmployeesController

• 打開 app/Http/Controllers/EmployeesController.php 文件。
• 導入 Employees 模型。

創建 2 個方法 –

• index() -加載index視圖。
• getEmployees() - 此方法用於處理 DataTables AJAX 請求。

讀取 DataTables 值並將它們分配給變量。

從表中計算有和沒有搜索過濾器的總記錄並'employees'分配給變量。$totalRecords$totalRecordswithFilter

從表中獲取記錄'employees'並分配給$records變量。

循環獲取的數據並 在初始化 DataTables 時使用選項$data 中指定的鍵初始化 Array  。'columns'

$response使用所需值初始化 Array。

以 JSON 格式返回$response數組。

完成的代碼

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Employees;

class EmployeesController extends Controller
{
     public function index(){

         // Load index view
         return view('index');
     }

     // Fetch records
     public function getEmployees(Request $request){

        ## Read value
        $draw = $request->get('draw');
        $start = $request->get("start");
        $rowperpage = $request->get("length"); // Rows display per page

        $columnIndex_arr = $request->get('order');
        $columnName_arr = $request->get('columns');
        $order_arr = $request->get('order');
        $search_arr = $request->get('search');

        $columnIndex = $columnIndex_arr[0]['column']; // Column index
        $columnName = $columnName_arr[$columnIndex]['data']; // Column name
        $columnSortOrder = $order_arr[0]['dir']; // asc or desc
        $searchValue = $search_arr['value']; // Search value

        // Total records
        $totalRecords = Employees::select('count(*) as allcount')->count();
        $totalRecordswithFilter = Employees::select('count(*) as allcount')->where('name', 'like', '%' .$searchValue . '%')->count();

        // Fetch records
        $records = Employees::orderBy($columnName,$columnSortOrder)
               ->where('employees.name', 'like', '%' .$searchValue . '%')
              ->select('employees.*')
              ->skip($start)
              ->take($rowperpage)
              ->get();

        $data_arr = array();

        foreach($records as $record){
           $id = $record->id;
           $username = $record->username;
           $name = $record->name;
           $email = $record->email;

           $data_arr[] = array(
               "id" => $id,
               "username" => $username,
               "name" => $name,
               "email" => $email
           );
        }

        $response = array(
           "draw" => intval($draw),
           "iTotalRecords" => $totalRecords,
           "iTotalDisplayRecords" => $totalRecordswithFilter,
           "aaData" => $data_arr
        );

        return response()->json($response); 
     }
}

---

7.查看

index.blade.php 在 文件夾中創建文件resources/views/ 。

包括 DataTables 和 jQuery 庫。

創建<table id='empTable' >.

jQuery 腳本 –

• 在 上初始化數據表#empTable。
• 設置處理：true，serverSide：true。
• 將 AJAX URL 設置為{{route('getEmployees')}}.
• With 'columns'選項指定需要從 AJAX 響應中讀取的鍵名。

完成的代碼

<!DOCTYPE html>
<html>
<head>
     <title>Datatables AJAX pagination with Search and Sort in Laravel 8</title>

     <!-- Meta -->
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <meta charset="utf-8">

     <!-- Datatable CSS -->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css"/>

     <!-- jQuery Library -->
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

     <!-- Datatable JS -->
     <script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>

</head>
<body>

    <table id='empTable' width='100%' border="1" style='border-collapse: collapse;'>
        <thead>
            <tr>
                 <td>S.no</td>
                 <td>Username</td>
                 <td>Name</td>
                 <td>Email</td>
            </tr>
         </thead>
     </table>

     <!-- Script -->
     <script type="text/javascript"> 
     $(document).ready(function(){

         // DataTable
        $('#empTable').DataTable({
             processing: true,
             serverSide: true,
             ajax: "{{route('getEmployees')}}",
             columns: [
                 { data: 'id' },
                 { data: 'username' },
                 { data: 'name' },
                 { data: 'email' },
             ]
         });

      });
      </script>
</body>
</html>

---

8. 演示

查看演示

---

9. 結論

確保以定義的格式返回 DataTables 響應，否則不會加載數據。

如果您在添加 DataTables 時發現任何錯誤，請使用瀏覽器網絡選項卡通過查看 AJAX 請求響應進行調試。

來源：  https ://makitweb.com

#php #laravel 

What is GEEK

Buddha Community

Php how to delete multiple rows through checkbox using ajax in laravel

First thing, we will need a table and i am creating products table for this example. So run the following query to create table.

CREATE TABLE `products` (
 `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
 `name` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
 `description` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL,
 `created_at` timestamp NULL DEFAULT CURRENT_TIMESTAMP,
 `updated_at` datetime DEFAULT NULL,
 PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci

Next, we will need to insert some dummy records in this table that will be deleted.

INSERT INTO `products` (`name`, `description`) VALUES

('Test product 1', 'Product description example1'),

('Test product 2', 'Product description example2'),

('Test product 3', 'Product description example3'),

('Test product 4', 'Product description example4'),

('Test product 5', 'Product description example5');

Now we are redy to create a model corresponding to this products table. Here we will create Product model. So let’s create a model file Product.php file under app directory and put the code below.

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Product extends Model
{
    protected $fillable = [
        'name','description'
    ];
}

Step 2: Create Route

Now, in this second step we will create some routes to handle the request for this example. So opeen routes/web.php file and copy the routes as given below.

routes/web.php

Route::get('product', 'ProductController@index');
Route::delete('product/{id}', ['as'=>'product.destroy','uses'=>'ProductController@destroy']);
Route::delete('delete-multiple-product', ['as'=>'product.multiple-delete','uses'=>'ProductController@deleteMultiple']);

#laravel #delete multiple rows in laravel using ajax #laravel ajax delete #laravel ajax multiple checkbox delete #laravel delete multiple rows #laravel delete records using ajax #laravel multiple checkbox delete rows #laravel multiple delete

Laravel 8 Tutorial for Beginners

Hello everyone! I just updated this tutorial for Laravel 8. In this tutorial, we’ll go through the basics of the Laravel framework by building a simple blogging system. Note that this tutorial is only for beginners who are interested in web development but don’t know where to start. Check it out if you are interested: Laravel Tutorial For Beginners

Laravel is a very powerful framework that follows the MVC structure. It is designed for web developers who need a simple, elegant yet powerful toolkit to build a fully-featured website.

#laravel 8 tutorial #laravel 8 tutorial crud #laravel 8 tutorial point #laravel 8 auth tutorial #laravel 8 project example #laravel 8 tutorial for beginners

Laravel 8 New Features | Release Notes - Tuts Make

In this post, i will show you what’s new in laravel 8 version.

#What’s new in Laravel 8?

• 1 - Change Path Of Default Models Directory
• 2 - Removed Controllers Namespace Prefix
• 3 - Enhancements on php artisan serve
• 4 - Enhanced Rate Limiting
• 5 - Enhanced on Route Caching
• 6 - Update on Pagination Design
• 8 - Dynamic Blade Componenets
• 7 - Update Syntax for Closure Based Event Listeners
• 8 - Queueable Model Event Listeners
• 9 - Maintenance mode: secret access
• 10 - Maintenance mode: pre-rendered page
• 11 - Queued job batching
• 12 - Queue backoff()
• 13 - Laravel Factory

https://www.tutsmake.com/laravel-8-new-features-release-notes/

#laravel 8 features #laravel 8 release date #laravel 8 tutorial #news - laravel 8 new features #what's new in laravel 8 #laravel 8 release notes

Laravel 8 Form Validation Tutorial

Laravel 8 form validation example. In this tutorial, i will show you how to submit form with validation in laravel 8.

And you will learn how to store form data in laravel 8. Also validate form data before store to db.

How to Validate Form Data in Laravel 8

1. Step 1 – Install Laravel 8 Application
2. Step 2 – Configuring Database using Env File
3. Step 3 – Create Model & Migration File For Form
4. Step 4 – Create Routes
5. Step 5 – Creating Controller
6. Step 6 – Create Blade File For Form
7. Step 7 – Start Development Server
8. Step 8 – Run Laravel 8 Form Validation App On Browser

https://laratutorials.com/laravel-8-form-validation-example-tutorial/

#laravel 8 form validation #laravel 8 form validation tutorial #laravel 8 form validation - google search #how to validate form data in laravel 8 #form validation in laravel 8

Laravel 8 Tutorial For Beginners Step by Step

#laravel #laravel 8 tutoral #laravel 8 tutorial for beginners #laravel 8 tutorial for beginners step by step #laravel 8 tutorial from scratch