Larawel 10 CRUD Yajra Data Table

Laravel is a powerful PHP framework that enables developers to create web applications with ease. Yajra DataTables is a popular jQuery plugin that provides an easy-to-use interface for displaying and manipulating data in a tabular format. Together, they can be used to create a powerful CRUD application with server-side processing.

Step 1: Setting up Laravel First, make sure you have a development environment set up with PHP, MySQL, and Composer installed. Then, create a new Laravel project using the following command:

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

Next, configure your database connection by editing the .env file with your database credentials.

Step 2: Setting up Yajra DataTables To install Yajra DataTables, run the following command:

composer require yajra/laravel-datatables-oracle

This will install the required package along with its dependencies.

Next, publish the configuration file by running the following command:

php artisan vendor:publish --tag=datatables

This will create a datatables.php file in your config directory, which you can modify to customize your DataTables settings.

Step 3: Creating the CRUD functionality To create the CRUD functionality, we’ll use Laravel’s built-in resource controller. Run the following command to generate the controller, model, and migration files:

php artisan make:model Task -mcr

This will generate the necessary files to create, read, update, and delete tasks in our application.

Next, run the migration to create the tasks table:

php artisan migrate

Step 4: Creating the views To create the views, we’ll use Laravel’s Blade templating engine. Run the following command to generate the views:

php artisan make:crud-views tasks --fields=name:text,description:text

This will generate the views for creating, reading, updating, and deleting tasks, along with a form for adding new tasks with name and description fields.

Step 5: Displaying data with DataTables To display the data in a DataTables table, we’ll need to modify the index view. First, add the following line to the top of the view to include the DataTables assets:

@push('styles')
<link rel="stylesheet" href="//cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css">
@endpush

@push('scripts')
<script src="//cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function() {
$('#tasks-table').DataTable({
serverSide: true,
ajax: '{!! route('tasks.index') !!}',
columns: [
{ data: 'id', name: 'id' },
{ data: 'name', name: 'name' },
{ data: 'description', name: 'description' },
{ data: 'created_at', name: 'created_at' },
{ data: 'updated_at', name: 'updated_at' },
{ data: 'actions', name: 'actions' }
]
});
});
</script>
@endpush

This will include the necessary CSS and JavaScript files, and initialize the DataTables table with server-side processing and AJAX data loading. The columns option defines the columns in the table, including the actions column for editing and deleting tasks.

Finally, replace the <table> element in the view with the following code:

`<table class="table" id

="tasks-table" style="width:100%">

  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Description</th>
      <th>Created At</th>
      <th>Updated At</th>
      <th>Actions</th>
    </tr>
  </thead>
</table>

This will create a table with the specified columns and an empty <tbody> element, which will be populated with data from the server.

Step 6: Adding CRUD functionality To add the CRUD functionality, we’ll need to modify the controller methods. Add the following code to the store() method to create a new task:

$task = Task::create($request->all());
return redirect()->route('tasks.index')->with('success', 'Task created successfully.');

This will create a new task with the data from the form, and redirect back to the index view with a success message.

Next, add the following code to the edit() method to retrieve and display the task:

$task = Task::find($id);
return view('tasks.edit', compact('task'));

This will retrieve the task with the specified ID and pass it to the edit view.

To update the task, add the following code to the update() method:

$task = Task::find($id);
$task->update($request->all());
return redirect()->route('tasks.index')->with('success', 'Task updated successfully.');

This will update the task with the data from the form, and redirect back to the index view with a success message.

Finally, to delete a task, add the following code to the destroy() method:

$task = Task::find($id);
$task->delete();
return redirect()->route('tasks.index')->with('success', 'Task deleted successfully.');

This will delete the task with the specified ID, and redirect back to the index view with a success message.

Conclusion: In this article, we’ve learned how to create a CRUD application with Laravel 8 and Yajra DataTables. We’ve set up Laravel and Yajra DataTables, created the CRUD functionality, displayed data with DataTables, and added CRUD functionality to the controller methods. With these tools, you can create powerful web applications with ease.

This Article Ideas has been taken from the following websites; which are following:

https://yajrabox.com/docs/laravel-datatables/master/editor-tutorial

https://www.itsolutionstuff.com/post/laravel-10-yajra-datatables-tutorial-exampleexample.html

https://techsolutionstuff.com/post/laravel-8-ajax-crud-using-datatable

Laravel 10 DataTables CRUD Example Tutorial

https://www.webslesson.info/2019/10/laravel-6-crud-application-using-yajra-datatables-and-ajax.html

https://websolutionstuff.com/post/laravel-8-ajax-crud-with-yajra-datatable

https://www.laravelcode.com/post/laravel-8-ajax-crud-with-yajra-datatable-and-bootstrap-model-validation-example

https://websolutionstuff.medium.com/laravel-8-ajax-crud-with-yajra-datatable-34a3d2ff2a73