Dalam tutorial ini, saya ingin menunjukkan kepada Anda bagaimana cara membuat jquery ajax pagination di laravel 6.x kita akan membuat langkah demi langkah simple ajax pagination di laravel 6.

Pagination adalah persyaratan yang sangat mendasar dari setiap proyek seperti Panel Admin, ERP atau Panel back-end. Sebuah pagination membantu kita memuat beberapa catatan setiap kali, dengan cara itu tidak dapat merusak halaman web karena banyak data. Jika Anda membuat pagination dan melakukannya menggunakan ajax maka itu cara yang lebih baik. Ajax Pagination hanya memuat data tabel Anda alih-alih seluruh halaman. Jadi pagination ajax sangat membantu.

Dalam contoh ini, kita cukup membuat tabel "item" menggunakan perintah migrasi dan menambahkan beberapa data dummy. Setelah itu, kita akan membuat satu route untuk tampilan dan membuat kode jquery ajax pada file blade. Jadi, Anda harus mengikuti langkah di bawah ini dan Anda hanya akan mendapatkan pagination ajax di laravel 6.

Langkah 1: Instal Laravel 6

kita akan mulai dari awal, Jadi kita perlu mendapatkan aplikasi Laravel 6 baru menggunakan perintah di bawah, Jadi buka terminal ATAU command prompt Anda dan jalankan perintah di bawah ini:

composer create-project --prefer-dist laravel/laravel blog

Langkah 2: Buat Tabel dan Model

Pada langkah ini kita harus membuat migrasi untuk tabel item menggunakan perintah php artisan Laravel 6 , jadi pertama jalankan perintah di bawah ini:

php artisan make:migration create_items_table

Setelah perintah ini, Anda akan menemukan satu file di jalur berikut "database/migrations" dan Anda harus meletakkan kode di bawah ini di file migrasi Anda untuk membuat tabel item.

<?php
  
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
  
class CreateItemsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('items', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name');
            $table->timestamps();
        });
    }
  
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('items');
    }
}

Kemudian setelah itu, jalankan migration:

php artisan migrate

Setelah membuat tabel "item" Anda harus membuat model Item untuk item, jadi pertama-tama buat file di path ini "app/Item.php" dan letakkan konten di bawah ini di file item.php:

app/Item.php

<?php
  
namespace App;
   
use Illuminate\Database\Eloquent\Model;
  
class Item extends Model
{
       
}

Langkah 3: Buat Route

Pada langkah ini kita perlu membuat route untuk daftar barang. jadi buka file "route/web.php" Anda dan tambahkan route berikut.

routes/web.php

Route::get('ajax-pagination','AjaxController@ajaxPagination')->name('ajax.pagination');

Langkah 4: Buat Controller

Pada langkah ini, kita harus membuat dua file view satu untuk tata letak dan satu lagi untuk data. sekarang kita harus membuat controller baru sebagai AjaxController di path ini "app/Http/Controllers/AjaxController.php". controller ini akan mengatur semua item listing dan item ajax meminta dan mengembalikan respons, jadi letakkan konten di bawah ini di file controller:

app/Http/Controllers/AjaxController.php

<?php
  
namespace App\Http\Controllers;
  
use Illuminate\Http\Request;
use App\Item;
  
class AjaxController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function ajaxPagination(Request $request)
    {
        $data = Item::paginate(5);
  
        if ($request->ajax()) {
            return view('presult', compact('data'));
        }
  
        return view('ajaxPagination',compact('data'));
    }
}

Step 5: Buat File Blade

Pada langkah Terakhir, mari kita buat ajaxPagination.blade.php (resources/views/ajaxPagination.blade.php) untuk tata letak dan daftar semua kode item di sini dan masukkan kode berikut:

resources/views/ajaxPagination.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 5.7 AJAX Pagination Example - Medikre.com</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
  
<body>
<div class="container">
    <h1>Laravel 5.7 AJAX Pagination Example - Medikre.com</h1>
    <div id="tag_container">
           @include('presult')
    </div>
</div>
  
<script type="text/javascript">
    $(window).on('hashchange', function() {
        if (window.location.hash) {
            var page = window.location.hash.replace('#', '');
            if (page == Number.NaN || page <= 0) {
                return false;
            }else{
                getData(page);
            }
        }
    });
    
    $(document).ready(function()
    {
        $(document).on('click', '.pagination a',function(event)
        {
            event.preventDefault();
  
            $('li').removeClass('active');
            $(this).parent('li').addClass('active');
  
            var myurl = $(this).attr('href');
            var page=$(this).attr('href').split('page=')[1];
  
            getData(page);
        });
  
    });
  
    function getData(page){
        $.ajax(
        {
            url: '?page=' + page,
            type: "get",
            datatype: "html"
        }).done(function(data){
            $("#tag_container").empty().html(data);
            location.hash = page;
        }).fail(function(jqXHR, ajaxOptions, thrownError){
              alert('No response from server');
        });
    }
</script>
  
</body>
</html>

resources/views/presult.blade.php

<table class="table table-bordered">
    <thead>
        <tr>
            <th width="100px">ID</th>
            <th>Name</th>
        </tr>
    </thead>
    <tbody>
        @foreach ($data as $value)
        <tr>
            <td>{{ $value->id }}</td>
            <td>{{ $value->name }}</td>
        </tr>
        @endforeach
    </tbody>
</table>


{!! $data->render() !!}

Pastikan Anda memiliki beberapa data dummy di tabel item Anda sebelum menjalankan contoh ini. Sekarang kita siap untuk menjalankan contoh kita jadi jalankan perintah di bawah ini untuk menjalankan cepat:

php artisan serve

Sekarang Anda dapat membuka URL di bawah ini di browser Anda:

http://localhost:8000/ajax-pagination

Saya harap ini dapat membantu Anda ...