Laravel 6 - Drag and Drop Datatable Rows for Sorting Example

Laravel 6 , Laravel , jquery

Nicesnippets

6498

08-01-2020


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 6. this is a example of drag and drop datatable rows for sorting laravel 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 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...


Recommended Posts