10-Apr-2023
.
Admin
Hi Guys,
In this tutorial, I will show how to use jQuery UI Sortable along with Datatables to add drag and drop functionality in laravel 7/6. this is a example of drag and drop datatable rows for sorting laravel 7/6.
dynamic sorting or drag and drop list items or div or table rows, it is simply and easy things for client or any user to understand flow.
I also try to make this tutorial very basic so that everyone can easily follow. All you need to know is basic of jQuery and Laravel.
step 1: Install Laravel Project
First, you need to download the laravel fresh setup. Use this command then download laravel project setup :
composer create-project --prefer-dist laravel/laravel blog
step 2: Setup Database
After successfully install laravel 7/6 Application, Go to your project .env file and set up database credential and move next step :
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 password
step 3: Create Migration
Now you will create a table posts then follw this command in your terminal:
php artisan make:migration create_posts_table
It command will create migration file for the posts table.
database/migrations/create_posts_table.php
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreatePostsTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('posts', function (Blueprint $table) {
$table->bigIncrements('id');
$table->string('title');
$table->integer('order')->default(0);
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('posts');
}
}
Next,this command use to in your terminal then this setup create to in your database.
php artisan migrate
step 4: Create Model
Next,you will create to model in project.bellow this command :
php artisan make:model Post
It will create to file in app/Post.php model.
app/Post.php
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Post extends Model
{
/**
* The attributes that are mass assignable.
*
* @var array
*/
protected $fillable = [
'title', 'order'
];
}
step 5: Make Route
you can create to route in web.php file.
routes/web.php
//PostController
Route::get('post','PostController@index');
Route::post('post-sortable','PostController@update');
step 6: Create Controller
you need to create a controller name PostController.this command use to your terminal.
php artisan make:controller PostController
After create to methods:
The first method is index(), it will show you post.
The second method is update(), it will update your post event into database.
app/Http/Controllers/PostController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Post;
class PostController extends Controller
{
public function index()
{
$posts = Post::orderBy('order','ASC')->get();
return view('post',compact('posts'));
}
public function update(Request $request)
{
$posts = Post::all();
foreach ($posts as $post) {
foreach ($request->order as $order) {
if ($order['id'] == $post->id) {
$post->update(['order' => $order['position']]);
}
}
}
return response('Update Successfully.', 200);
}
}
step 7: Create View File
In this step you need to create blade view file.
resources/views/post.blade.php
<!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">Drag and Drop Datatables Using jQuery UI Sortable - Demo </h3>
<table id="table" class="table table-bordered">
<thead>
<tr>
<th width="30px">#</th>
<th>Title</th>
<th>Created At</th>
</tr>
</thead>
<tbody id="tablecontents">
@foreach($posts as $post)
<tr class="row1" data-id="{{ $post->id }}">
<td class="pl-3"><i class="fa fa-sort"></i></td>
<td>{{ $post->title }}</td>
<td>{{ date('d-m-Y h:m:s',strtotime($post->created_at)) }}</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> the page to check the Demo.</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('post-sortable') }}",
data: {
order: order,
_token: token
},
success: function(response) {
if (response.status == "success") {
console.log(response);
} else {
console.log(response);
}
}
});
}
});
</script>
</body>
</html>
step 8: Run Development Server
you can run to laravel project in your teminal.bellow command
php artisan serve
then make to ulr:
localhost:8000/post
It will help you...
#Laravel 7
#Jquery
#Laravel
#Laravel 6
