Cara Membuat Pagination dengan Ajax di Laravel 5


Laravel 5.8 contoh ajax pagination adalah topik utama kami. saya akan membagikan contoh sederhana dari jquery ajax pagination di laravel 5.8 application. selain Anda dapat dengan mudah mengimplementasikan pencarian, pengurutan dan juga meneruskan string permintaan dengan logika pagination ajax.

 

Daftar langkah untuk membuat pagination ajax dengan laravel 5.8, Anda perlu mengikuti langkah itu untuk membuat contoh pagination ajax sederhana.

 

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 halaman web tidak dapat rusak 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 catatan dummy. Setelah itu kita akan membuat satu rute untuk tampilan tampilan dan menulis kode jquery ajax pada file blade. Jadi, Anda harus mengikuti langkah di bawah ini dan Anda akan mendapatkan pagination ajax di laravel 5.8.

 

Langkah 1: Instal Laravel 5.8

Pertama Jadi kita perlu mendapatkan aplikasi Laravel 5.8 baru menggunakan perintah di bawah ini, 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 artara Laravel 5.8 php, jadi pertama jalankan perintah di bawah ini:

php artisan make:migration create_items_table

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

 

<?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 migrasi:

php artisan migrate

Setelah membuat tabel "item" Anda harus membuat model Item untuk item, jadi pertama-tama buat file di jalur 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: tambahkan Route

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

route/ web.php

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

Langkah 4: Create AjaxController

Pada langkah ini, kita harus membuat dua file tampilan satu untuk tata letak dan satu lagi untuk data. sekarang kita harus membuat controller baru sebagai AjaxController di jalur 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'));
    }
}

 

Langkah 5: Buat View File

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

resources / views / ajaxPagination.blade.php

 

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 5.8 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.8 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 boneka 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 kamu coba buka browser anda dan masukan urlnya seperti dibawah ini

http://localhost:8000/ajax-pagination

Tags

laravel  ajax  ajax pagination laravel  tutorial laravel  belajar laravel  

Artikel Menarik Lainnya:

Rekomendasi Artikel


Aplikasi yang digunakan Untuk membuat Aplikasi dengan PHPCara Penulisan Script PHP Di BodyCase Sensitive [ Penulisan PHP ]Penulisan PHP Menggunakan Semi KolonModel Penulisan Tag PHP

Terbaru dari framework Laravel


Search


Top Stories


  1. Membuat Perulangan Segitiga Bintang Dengan PHP

    on 2018-01-12

  2. Membatasi Jumlah Karakter dengan PHP

    on 2018-01-23

  3. Kenapa Telinga Gatal dan Berair

    on 2018-04-13

  4. Membuat Tanggal dan Zona Waktu Sederhana dengan PHP

    Admin on 2017-11-26

  5. Membuat Paragraf Otomatis dengan Script PHP

    on 2018-01-26

Other Post


Top Videos


  1. Founder SB1M dan Pemilik Distro BLOOP ini BANGKIT dari BANGKRUT 16x dan HUTANG 11M | Christina Lie

    joesep on 2019-06-04

  2. vivo Z1 Pro VS OPPO A9 2020 | Duel HP 3 Jutaan Terbaik 2019!

    joesep on 2019-09-26

  3. FILM Horor Terbaru "SABRINA THE DOLL 2" Full Movie 2018

    Andri03 on 2018-08-01

  4. Sandiaga Uno Resmi Mundur dari Ketua Tim Pemenangan Partai Gerindra

    joesep on 2018-07-31

  5. Aplikasi Kasir Point of Sale Restoran / Kafe Berbasis WEB

    joesep on 2018-08-15

close