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

Laravel 6 , Laravel , jquery , Laravel 7

Nicesnippets

27954

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


Recommended Posts