آموزش دیتاتیبل (datatables) در لاراول 5.8
نحوه ایجاد و دانلود PDF در لاراول 5.8
13 اردیبهشت 1398
ساخت پترن و اعمال opacity در اندروید با کاتلین
18 اردیبهشت 1398
آموزش datatables در لاراول 5.8 ، در این پست از تجاری اپ قصد داریم نحوه ی نصب و استفاده از دیتاتیبل در لاراول 5.8 را به شما اموزش دهیم.برای این آموزش ما از پکیج laravel datatables استفاده خواهیم کرد.
Datatables برای ما جستجوی سریع ، صفحه بندی ، مرتب سازی و غیره را فراهم می کند. Datatables اساسا پلاگین های جی کوئری می باشد که به ما اجازه می دهد تا کنترل های تعاملی پیشرفته را به داده های جداول HTML خود اضافه کنیم. Datatables همچنین برای جستجو و گرفتن اطلاعات ajax ارائه می دهد.ما می توانیم با استفاده از Datatables خیلی سریع یک layout برای جستجو و مرتب سازی ارائه دهیم.ما همچنین می توانیم Datatables را در پروژه لاراول خود پیاده سازی کنیم.
آموزش datatables در لاراول 5.8
شما کافیست برای پیاده سازی Datatables در پروژه لاراول خود فقط مراحل زیر را دنبال کنید. من این آموزش را در قالب یک مثال و از ابتدا توضیح خواهیم داد.با ما همراه باشید:
- نصب لاراول و پیکربندی اولیه
- نصب پکیج Yajra Datatable
- ایجاد رکوردهای ساختگی
- ایجاد Route
- ایجاد کنترلر
- ایجاد View
نصب لاراول و پیکربندی اولیه
برای هر پروژه لاراول ما نیاز داریم که لاراول را نصب کنیم. به همین دلیل ما یک مقاله در رابطه با چگونگی نصب و پیکربندی اولیه لاراول آماده کرده ایم که می توانید از اینجا ان را مشاهده نمایید : آموزش نصب لاراول به همراه تنظیمات اولیه
نصب پکیج laravel datatables برای آموزش datatables در لاراول 5.8
ما نیاز داریم برای Datatables پکیج yajra datatable را نصب کنیم.برای نصب این پکیج از دستور زیر استفاده می کنیم:
composer require yajra/laravel-datatables-oracle
بعد از نصب پکیج ما باید providers و alias مربوط به پکیج را در فایل config/app.php ست کنیم :
.....
'providers' => [
....
Yajra\DataTables\DataTablesServiceProvider::class,
]
'aliases' => [
....
'DataTables' => Yajra\DataTables\Facades\DataTables::class,
]
.....
همچنین بخوانید: آموزش گام به گام عملیات CRUD با لاراول 5.8
ایجاد رکوردهای ساختگی
در این مرحله ما تعدادی کاربر فیک با استفاده از tinker factory ایجاد خواهیم کرد.بنابراین برای ایجاد رکوردهای ساختگی دستور زیر را اجرا می کنیم:
php artisan tinker
factory(App\User::class, 200)->create();
توجه داشته باشید که قبل از اجرای دستورات بالا باید پایگاه داده پروژه خود را ایجاد کرده باشید و همچنین دستور migrate را اجرا کرده باشید تا جدول users در پایگاه داده شما ایجاد شده باشد.
ایجاد Route
در این مرحله ما نیاز داریم یک Route برای فایل layout مربوط به datatables و گرفتن داده ها ایجاد کنیم.بنابراین فایل routes/web.php را باز کنید و Route زیر را در آن قرار دهید:
Route::get('users', ['uses'=>'UserController@index', 'as'=>'users.index']);
ایجاد کنترلر
در این مرحله، ما باید کنترلر جدیدی با نام UserController ایجاد کنیم.این کنترلر layout وهمچنین گرفتن درخواست داده و برگرداندن پاسخ را مدیریت می کند ، بنابراین کدهای زیر را در فایل کنترلر مذکور قرار دهید:
<?php
namespace App\Http\Controllers;
use App\User;
use Illuminate\Http\Request;
use DataTables;
class UsersController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index(Request $request)
{
if ($request->ajax()) {
$data = User::latest()->get();
return Datatables::of($data)
->addIndexColumn()
->addColumn('action', function($row){
$btn = '<a href="javascript:void(0)" class="edit btn btn-primary btn-block">مشاهده</a>';
return $btn;
})
->rawColumns(['action'])
->make(true);
}
return view('users');
}
}
ایجاد View
در این مرحله که مرحله آخر مثال ما نیز می باشد یک فایل Blade با نام users.blade.php در مسیر resources/views/ برای layout ایجاد کنید و کدهای زیر را در آن قراردهید:
<!DOCTYPE html>
<html>
<head>
<title>آموزش DataTables در لاراول 5.8 - Tejariapp.com</title>
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<style>
body {
direction: rtl;
text-align: right;
}
.dataTables_wrapper .dataTables_length {
float: right;
}
.dataTables_wrapper .dataTables_info {
float: right;
}
.example-title{
margin: 50px 0;
}
table.dataTable tbody th, table.dataTable tbody td {
padding: 4px 8px;
}
</style>
</head>
<body>
<div class="container">
<h1 class="example-title">آموزش DataTables در لاراول 5.8 - Tejariapp.com</h1>
<table class="table table-bordered data-table">
<thead>
<tr>
<th>ردیف</th>
<th>نام</th>
<th>ایمیل</th>
<th width="100px">عملیات</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</body>
<script type="text/javascript">
$(function () {
var table = $('.data-table').DataTable({
"oLanguage": {
"sUrl": "https://cdn.datatables.net/plug-ins/1.10.19/i18n/Persian.json"
},
"pageLength": 25,
processing: true,
serverSide: true,
ajax: "{{ route('users.index') }}",
columns: [
{data: 'DT_RowIndex', name: 'DT_RowIndex'},
{data: 'name', name: 'name'},
{data: 'email', name: 'email'},
{data: 'action', name: 'action', orderable: false, searchable: false},
]
});
});
</script>
</html>
با اجرای دستور زیر می توانید خروجی این مثال را مشاهده نمایید:
php artisan serve
اکنون می توانید آدرس زیر را در مرورگر خود باز کنید:
http://localhost:8000/users
شما می توانید اطلاعات بیشتری در مورد این پکیج را از اینجا دریافت کنید: اینجا کلیک کنید.
