php 8.1, laravel 10, yajrabox 10.0, datatables bootstrap 5 jquery 3.6.0
npm run dev
php artisan servecomposer create-project laravel/laravel datatable
cd datatable
php artisan serveDB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laraveldb
DB_USERNAME=root
DB_PASSWORD=""php artisan make:migration create_customers_tableOpen database\migrations\create_customers_table.php
return new class extends Migration
{
public function up()
{
Schema::create('customers', function (Blueprint $table) {
$table->id();
$table->string('CustomerName');
$table->string('Address');
$table->string('City');
$table->string('PostalCode');
$table->string('Country');
$table->timestamps();
});
}
};php artisan migrate php artisan make:model Customersphp artisan make:controller CustomersControllerapp\Http\Controllers\CustomersController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Customers; //add Customers Model
use DataTables;
class CustomersController extends Controller
{
function index()
{
return view('index');
}
function getdata()
{
$customer = Customers::select('id', 'CustomerName', 'Address', 'City', 'PostalCode', 'Country');
return Datatables::of($customer)
->addColumn('action', function($customer){
return '<a href="#" class="btn btn-xs btn-primary edit" id="'.$customer->id.'"><i class="bi bi-pencil-square"></i> Edit</a> <a href="#" class="btn btn-xs btn-danger delete" id="'.$customer->id.'"><i class="bi bi-backspace-reverse-fill"></i> Delete</a>';
})
->addColumn('checkbox', '<input type="checkbox" name="customer_checkbox[]" class="customer_checkbox" value="{{$id}}" />')
->rawColumns(['checkbox','action'])
->make(true);
}
}laravelproject\routes\web.php
//laravelproject\routes\web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\CustomersController; //add CustomersController
//Route::get('/', function () {
// return view('welcome');
//});
Route::get('/', [CustomersController::class, 'index']);
Route::get('ajaxdata', [CustomersController::class, 'getdata'])->name('getdata');laravelproject\resources\views\index.blade.php //laravelproject\resources\views\index.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Laravel Datatables Yajra Server Side</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css" />
<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
</head>
<body>
<div class="container">
<br />
<h3 align="center">Laravel Datatables Yajra Server Side</h3>
<br />
<div align="right">
<button type="button" name="add" id="add_data" class="btn btn-success"> <i class="bi bi-plus-square"></i> Add</button>
</div>
<br />
<table id="customer_table" class="table table-striped table-bordered">
<thead>
<tr>
<th>Name</th>
<th>Address</th>
<th>City</th>
<th>Postal Code</th>
<th>Country</th>
<th>Action</th>
<th>
<button type="button" name="bulk_delete" id="bulk_delete" class="btn btn-danger btn-xs"><i class="bi bi-backspace-reverse-fill"></i></button>
</th>
</tr>
</thead>
</table>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#customer_table').DataTable({
"processing": true,
"serverSide": true,
"ajax": "{{ route('getdata') }}",
"columns":[
{ "data": "CustomerName" },
{ "data": "Address" },
{ "data": "City" },
{ "data": "PostalCode" },
{ "data": "Country" },
{ "data": "action", orderable:false, searchable: false},
{ "data":"checkbox", orderable:false, searchable:false}
]
});
});
</script>
</body>
</html>composer require yajra/laravel-datatables:^10.0php artisan serve
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent