Posted injQuery / JavaScript / Laravel / Mysql / Mysqli / php

jQuery Datatables with Laravel, MySQL and AJAX Example

Today, We want to share with you laravel datatables ajax.In this post we will show you laravel datatables server side, hear for how to delete data using ajax in laravel with datatables we will give you demo and example for implement.In this post, we will learn about laravel datatables ajax pagination with an example.

Laravel 6 Ajax Crud Tutorial Using DataTables From Scratch

Laravel DataTables Ajax Crud

  • Install Laravel 6 Setup
  • Setup database
  • Database Migration
  • Install Yajra DataTables
  • Create Route, Controller & Blade View
  • Start Development Server
  • Conclusion

Install Laravel

Step 1:

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

setup .env file

DB_CONNECTION=mysql 
 DB_HOST=127.0.0.1 
 DB_PORT=3306 
 DB_DATABASE=pakainfo_v1
 DB_USERNAME=root
 DB_PASSWORD=

Database Migration

php artisan make:model Fruit --migration

path\to\your\project\database\migrations]2019_11_12_023506_create_fruits_table.php

bigIncrements('id');
            $table->string('title');
            $table->string('fruit_code');
            $table->string('description');
            $table->timestamps();
        });
    }
 
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('fruits');
    }
}

and then run this cmd bellow

php artisan migrate

Install Yajra Datatables Package in Laravel

step 2:

composer require yajra/laravel-datatables-oracle

config/app.php

'providers' => [
     Yajra\Datatables\DatatablesServiceProvider::class,
 ],
 
 'aliases' => [
    'Datatables' => Yajra\Datatables\Facades\Datatables::class,
 ]  

publish vendor run

php artisan vendor:publish --tag=datatables

Open routes/web.php file

Route::get('fruit-list', 'FruitController@index');
Route::get('fruit-list/{id}/edit', 'FruitController@edit');
Route::post('fruit-list/store', 'FruitController@store');
Route::get('fruit-list/delete/{id}', 'FruitController@destroy');

Create Controller

php artisan make:controller FruitController --resource

app/Http/Controllers/FruitController.php

ajax()) {
        return datatables()->of(Fruit::select('*'))
        ->addColumn('action', 'DataTables.action')
        ->rawColumns(['action'])
        ->addIndexColumn()
        ->make(true);
    }
    return view('list');
}
  
  
/**
 * Store a newly created resource in storage.
 *
 * @param  \Illuminate\Http\Request  $request
 * @return \Illuminate\Http\Response
 */
public function store(Request $request)
{  
    $fruitId = $request->fruit_id;
    $fruit   =   Fruit::updateOrCreate(['id' => $fruitId],
                ['title' => $request->title, 'fruit_code' => $request->fruit_code, 'description' => $request->description]);        
    return Response::json($fruit);
}
  
  
/**
 * Show the form for editing the specified resource.
 *
 * @param  \App\Fruit  $fruit
 * @return \Illuminate\Http\Response
 */
public function edit($id)
{   
    $where = array('id' => $id);
    $fruit  = Fruit::where($where)->first();
  
    return Response::json($fruit);
}
  
  
/**
 * Remove the specified resource from storage.
 *
 * @param  \App\Fruit  $fruit
 * @return \Illuminate\Http\Response
 */
public function destroy($id)
{
    $fruit = Fruit::where('id',$id)->delete();
  
    return Response::json($fruit);
}
}

Create Blade View : action.blade.php file


    Edit


    Delete

resources/views/list.blade.php


  




Laravel DataTable Ajax Crud Tutorial - Tuts Make


  





  

Laravel DataTable Ajax Crud Tutorial - TutsMake


Back to Post Add New

ID S. No Title Fruit Code Description Created at Action

Script logic


Start Development Server

Step 3: php artisan serve command and start your server :

 php artisan serve
 php artisan serve --port=8080  
 http://localhost:8000/fruit-list

I hope you get an idea about php laravel table.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

I am Jaydeep Gondaliya , a software engineer, the founder and the person running Pakainfo. I'm a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, JavaScript, jQuery, Laravel, CodeIgniter, VueJS, AngularJS and Bootstrap from the early stage.

Leave a Reply

Your email address will not be published. Required fields are marked *

We accept paid guest Posting on our Site : Guest Post Chat with Us On Skype