# Phân trang trong Laravel kết hợp sử dụng Ajax, pagination full (ok)

#### Tham khảo thêm ví dụ 👇 <https://laraget.com/blog/how-to-create-an-ajax-pagination-using-laravel>

### Ví dụ 1: (sử dụng cách tách thành data.blade.php khiến nó mỗi lần ấn link nó không bị lag)

<figure><img src="/files/sqYJId7YlZv0h29oEEHd" alt=""><figcaption></figcaption></figure>

C:\xampp\htdocs\datvietcoconut\database\factories\ProductFactory.php

```php
<?php
namespace Database\Factories;
use Illuminate\Database\Eloquent\Factories\Factory;
class ProductFactory extends Factory
{
  /**
   * Define the model's default state.
   *
   * @return array
   */
  public function definition()
  {
    return [
      "name" => $this->faker->name(),
      "status" => $this->faker->randomElement(['Pending', 'Wait', 'Active'])
    ];
  }
}
```

C:\xampp\htdocs\datvietcoconut\routes\web.php

```php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\HomeController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('/', [HomeController::class,'index']);
Route::get('fetch-products',  [HomeController::class,'fetch_products']);
```

C:\xampp\htdocs\datvietcoconut\app\Http\Controllers\HomeController.php

```php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Product;
class HomeController extends Controller
{
  function index()
  {
    $products = Product::paginate(5);
    return view('home', compact('products'));
  }
  function fetch_products(Request $request)
  {
    if ($request->ajax()) {
      $products = Product::paginate(5);
      return view('data', compact('products'));
    }
  }
}
```

C:\xampp\htdocs\datvietcoconut\app\Providers\AppServiceProvider.php

```php
<?php
namespace App\Providers;
use Illuminate\Support\ServiceProvider;
use Illuminate\Pagination\Paginator;
class AppServiceProvider extends ServiceProvider
{
  /**
   * Register any application services.
   *
   * @return void
   */
  public function register()
  {
    if ($this->app->environment() !== 'production') {
      $this->app->register(\Sven\ArtisanView\ServiceProvider::class);
    }
  }
  /**
   * Bootstrap any application services.
   *
   * @return void
   */
  public function boot()
  {
    Paginator::useBootstrap();
  }
}
```

C:\xampp\htdocs\datvietcoconut\resources\views\home.blade.php

```
<!DOCTYPE html>
<html>
<head>
  <title>Laravel Pagination using Ajax</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style type="text/css">
    .box {
      width: 600px;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <br />
  <div class="container">
    <h3 align="center">Laravel Pagination using Ajax</h3><br />
    <div id="table_data">
      <div class="table-responsive">
        <table class="table table-striped table-bordered">
          <tr>
            <th width="5%">ID</th>
            <th width="38%">Title</th>
            <th width="57%">Description</th>
          </tr>
          @include('data')
      </div>
    </div>
  </div>
</body>
</html>
<script>
  $(document).ready(function() {
        $(document).on('click', '.pagination a', function(event) {
            event.preventDefault();
            var page = $(this).attr('href').split('page=')[1];
            fetch_products(page);
        });
        function fetch_products(page) {
          $.ajax({
            url: "/fetch-products?page=" + page,
            success: function(data) {
              $('#table_data').html(data);
            }
          });
        }
    });
</script>
```

C:\xampp\htdocs\datvietcoconut\resources\views\data.blade.php

```php
<div class="table-responsive">
  <table class="table table-striped table-bordered">
    <tr>
      <th width="5%">ID</th>
      <th width="38%">Title</th>
      <th width="57%">Description</th>
    </tr>
    @foreach($products as $product)
    <tr>
      <td>{{ $product->id }}</td>
      <td>{{ $product->name }}</td>
      <td>{{ $product->status }}</td>
    </tr>
    @endforeach
  </table>
  {!! $products->links() !!}
</div>
```

C:\xampp\htdocs\datvietcoconut\database\migrations\2022\_12\_09\_083000\_create\_products\_table.php

```php
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateProductsTable extends Migration
{
  /**
   * Run the migrations.
   *
   * @return void
   */
  public function up()
  {
    Schema::create('products', function (Blueprint $table) {
      $table->id();
      $table->string('name');
      $table->enum('status', ['Pending', 'Wait', 'Active'])->default('Pending');
    });
  }
  /**
   * Reverse the migrations.
   *
   * @return void
   */
  public function down()
  {
    Schema::dropIfExists('products');
  }
}
```

C:\xampp\htdocs\datvietcoconut\database\factories\ProductFactory.php

```php
<?php
namespace Database\Factories;
use Illuminate\Database\Eloquent\Factories\Factory;
class ProductFactory extends Factory
{
  /**
   * Define the model's default state.
   *
   * @return array
   */
  public function definition()
  {
    return [
      "name" => $this->faker->name(),
      "status" => $this->faker->randomElement(['Pending', 'Wait', 'Active'])
    ];
  }
}
```

C:\xampp\htdocs\datvietcoconut\database\seeders\DatabaseSeeder.php

```php
use Illuminate\Database\Seeder;
// Import DB and Faker services
use Illuminate\Support\Facades\DB;
use Faker\Factory as Faker;
class DatabaseSeeder extends Seeder
{
  /**
   * Seed the application's database.
   *
   * @return void
   */
  public function run()
  {
    $faker = Faker::create();
    foreach (range(1, 500) as $index) {
      DB::table('employees')->insert([
        'firstname' => $faker->firstname,
        'lastname' => $faker->lastname,
        'email' => $faker->email,
        'dob' => $faker->date($format = 'D-m-y', $max = '2010', $min = '1980')
      ]);
    }
  }
}
```

### Ví dụ 2:

C:\xampp\htdocs\datvietcoconut\routes\web.php

```php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\Admin\ArticlesController;
use App\Http\Controllers\HomeController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('/', [HomeController::class,'get_home']);
```

C:\xampp\htdocs\datvietcoconut\app\Http\Controllers\HomeController.php

```php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Product;
class HomeController extends Controller
{
  /**
   * Show the application dashboard.
   *
   * @return \Illuminate\Contracts\Support\Renderable
   */
  public function get_home(Request $request)
  {
    if ($request->ajax() || 'null') {
      $products = Product::paginate(10);
      return view('home', compact('products'));
    }
  }
}
```

C:\xampp\htdocs\datvietcoconut\database\migrations\2022\_12\_09\_083000\_create\_products\_table.php

```php
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateProductsTable extends Migration
{
  /**
   * Run the migrations.
   *
   * @return void
   */
  public function up()
  {
    Schema::create('products', function (Blueprint $table) {
      $table->id();
      $table->string('name');
      $table->enum('status', ['Pending', 'Wait', 'Active'])->default('Pending');
    });
  }
  /**
   * Reverse the migrations.
   *
   * @return void
   */
  public function down()
  {
    Schema::dropIfExists('products');
  }
}
```

C:\xampp\htdocs\datvietcoconut\database\factories\ProductFactory.php

```php
<?php
namespace Database\Factories;
use Illuminate\Database\Eloquent\Factories\Factory;
class ProductFactory extends Factory
{
  /**
   * Define the model's default state.
   *
   * @return array
   */
  public function definition()
  {
    return [
      "name" => $this->faker->name(),
      "status" => $this->faker->randomElement(['Pending', 'Wait', 'Active'])
    ];
  }
}
```

C:\xampp\htdocs\datvietcoconut\database\seeders\DatabaseSeeder.php

```php
<?php
namespace Database\Seeders;
use Illuminate\Database\Seeder;
use App\Models\Product;
class DatabaseSeeder extends Seeder
{
  /**
   * Seed the application's database.
   *
   * @return void
   */
  public function run()
  {
    Product::factory(30)->create();
  }
}
```

<figure><img src="/files/V8kCi0H5ZnSaDwoeIOAL" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://learnphp.gitbook.io/learnphp/learn-lavarel/phan-trang-trong-laravel-ket-hop-su-dung-ajax-pagination-full-ok.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
