Drag and Drop Datatables Using jQuery UI Sortable In Laravel 7/6/8
3 min readMay 20, 2021
Install Laravel Project
Run the command to induct fresh Laravel project.
composer create-project laravel/laravel sorting --prefer-distSetup Database
After successfully install laravel 7/6/8 Application, Go to your project .env file and set up database credential and move
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=here your database name
DB_USERNAME=here database username
DB_PASSWORD=here database passwordCreate Migration
Now you will create a table sorting then follow this command in your terminal:
php artisan make:model SortingTask -m
Now In the Migration file,
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateSortingTasksTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/public function up()
{
Schema::create('sorting_tasks', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->date('date');
$table->integer('order')->unsigned()->default(0);
$table->integer('status')->unsigned()->default(0);
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/public function down()
{
Schema::dropIfExists('sorting_tasks');
}
}
Next,this command use to in your terminal then this setup create to in your database.
php artisan migrateThe complete code in SortingTask Model is given below.
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class SortingTask extends Model
{
use HasFactory;
protected $fillable = [
'id', 'name','order', 'status','date'
];
}Now let’s makes our required routes in routes/web.php
Route::get('getsortabledatatable','App\Http\Controllers\SortingController@index';
Route::post('sortabledatatable','App\Http\Controllers\SortingController@updateOrder');Now Let’s create our SortingController by running the following command.
<?php
namespace App\Http\Controllers;
use App\Models\SortingTask;
use Illuminate\Http\Request;
class SortingController extends Controller
{
public function index()
{$sorting = SortingTask::orderBy('order','ASC')->select('id','name','status','date')->get();
return view('sortabledatatable',compact('sorting'));
}public function updateOrder(Request $request)
{
$sorting = SortingTask::all();
foreach ($sorting as $sort)
{
foreach ($request->sort as $sort)
}if ($sort['id'] == $sort->id) {
$sort->update(['order' => $sort['position']]);
}}
return response('Update Successfully.', 200);
}
}
Now let’s see the complete code for our View page — sortabledatatable.blade.php file
<!DOCTYPE html>
<html>
<head>
<title>Create Drag and Droppable Datatables Using jQuery UI Sortable in Laravel</title><meta name="csrf-token" content="{{ csrf_token() }}"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"><link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.12/datatables.min.css"/><link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/></head><body><div class="row mt-5"><div class="col-md-10 offset-md-1"><h3 class="text-center mb-4">Create Drag and Droppable Datatables Using jQuery UI Sortable in Laravel</h3><table id="table" class="table table-bordered"><thead><tr><th width="30px">#</th><th>Name</th><th>Status</th><th>Date</th></tr></thead><tbody id="tablecontents">@foreach($sorting as $sort)<tr class="row1" data-id="{{ $sort->id }}"><td><div style="color:rgb(124,77,255); padding-left: 10px; float: left; font-size: 20px; cursor: pointer;" title="change display order"><i class="fa fa-ellipsis-v"></i><i class="fa fa-ellipsis-v"></i></div></td><td>{{ $sort->name }}</td><td>{{ ($sort->status == 1)? "active" : "inactive" }}</td><td>{{ date('d-m-Y ',strtotime($sort->date)) }}</td></tr>@endforeach</tbody></table><hr><h5>Drag and Drop the table rows and <button class="btn btn-success btn-sm" onclick="window.location.reload()">REFRESH</button> </h5></div></div><script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script><script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.12/datatables.min.js"></script><script type="text/javascript">
$(function ()
{
$("#table").DataTable();
$( "#tablecontents" ).sortable({
items: "tr",
cursor: 'move',
opacity: 0.6,
update: function() {
sendOrderToServer();
}
});
function sendOrderToServer() {
var order = [];
var token = $('meta[name="csrf-token"]').attr('content');
$('tr.row1').each(function(index,element) {
order.push({
id: $(this).attr('data-id'),
position: index+1
});
});$.ajax({
type: "POST",
dataType: "json",
url: "{{ url('dragDrop') }}",
data: {
order: order,
_token: token
},
success: function(response) {
if (response.status == "success") {
console.log(response);
} else {
console.log(response)
}
}
});
}
});</script></body></html>