How to use Drag and Drop Datatable Rows for Sorting using laravel 10

Spread the love

Hello Guys,

In this article, I’ll show you how to implement Drag and Drop Datatable functionality to sort Datatable rows in Laravel 10. We’ll achieve this using jQuery UI Sortable in combination with Datatables. This guide provides a clear demonstration of how to enable drag-and-drop sorting for Datatable rows in Laravel 10.

This method allows customers and users to intuitively interact with the dynamic sorting feature, enabling them to easily rearrange list items, divs, or table rows. I’ve kept the explanation straightforward, making it accessible to anyone with a basic grasp of jQuery and Laravel.

Example of how to use Drag and Drop Datatable Rows for Sorting:

Also Read: How to Upload Images with Spatie Media Library in LARAVEL 10

step 1: Install Laravel Project

composer create-project --prefer-dist laravel/laravel blog

step 2: Setup Your Database

.env
DB_CONNECTION=mysql 
DB_HOST=127.0.0.1 
DB_PORT=3306 
DB_DATABASE=your_database_name 
DB_USERNAME=root
DB_PASSWORD= 

step 3: Create a Migration

Begin by crafting a new table post, and proceed by inputting the designated command into your terminal.

php artisan make:migration create_posts_table 

This command generates the migration file for the “posts” table.

Also Read: How to Send Mail using Sendgrid API in Laravel 10?

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');
    }
}

This configuration is established within your database when you execute this command in your terminal.

php artisan migrate

step 4: Create a Model

Next, you’ll create a model for your project. Find the command below:

php artisan make:model Post
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: Add a Route

routes/web.php
Route::get('post','PostController@index');
Route::post('post-sortable','PostController@update');

step 6: Create a Controller

To ensure proper functionality, create a controller named “PostController” by executing the following command in your terminal.

Also Read: How to Generate SITEMAP in laravel 10

php artisan make:controller PostController
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 a View File

resources/views/post.blade.php
<!DOCTYPE html>
<html>
<head>
    <title>Create Drag and Droppable Datatables Using jQuery UI Sortable in Laravel 10 - itcodestuff.com</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 Your Laravel App

Also Read: How to Resize Images Before Upload in LARAVEL 10

php artisan serve
localhost:8000/post or http://127.0.0.1:8000/post

I hope it can be useful to you.

Leave a Comment