Laravel 7/6 - Drag and Drop Datatable Rows for Sorting Example




Laravel 7/6 - Drag and Drop Datatable Rows for Sorting Example

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_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.



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) {








* Reverse the migrations.


* @return void


public function down()





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.



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.





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.



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.


<!DOCTYPE html>



<title>Create Drag and Droppable Datatables Using jQuery UI Sortable in Laravel</title>

<meta name="csrf-token" content="{{ csrf_token() }}">

<link rel="stylesheet" href="" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<link rel="stylesheet" type="text/css" href=""/>

<link rel="stylesheet" type="text/css" href=""/>



<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">



<th width="30px">#</th>


<th>Created At</th>



<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>






<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>



<script type="text/javascript" src=""></script>

<script src=""></script>

<script type="text/javascript" src=""></script>

<script type="text/javascript">

$(function () {


$( "#tablecontents" ).sortable({

items: "tr",

cursor: 'move',

opacity: 0.6,

update: function() {




function sendOrderToServer() {

var order = [];

var token = $('meta[name="csrf-token"]').attr('content');

$('tr.row1').each(function(index,element) {


id: $(this).attr('data-id'),

position: index+1




type: "POST",

dataType: "json",

url: "{{ url('post-sortable') }}",

data: {

order: order,

_token: token


success: function(response) {

if (response.status == "success") {


} else {










step 8: Run Development Server

you can run to laravel project in your teminal.bellow command

php artisan serve

then make to ulr:


It will help you...

#Laravel 7



#Laravel 6