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:
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
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
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
<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
belajar laravel tutorial laravel ajax pagination laravel ajax laravel
andriajah