Welcome to our step-by-step guide on implementing Yajra DataTables in a Laravel 10 project. Yajra DataTables is a powerful library that seamlessly integrates the jQuery DataTables API with Laravel. It simplifies server-side operations using AJAX and supports Eloquent ORM, Fluent Query Builder, or Collection. <\/p>\n\n\n\n
Follow along as we set up a Laravel project, install Yajra Datatables, create a model and migrations, generate dummy records, set up a controller, define routes, and finally, display records with a visually stunning table using Bootstrap.<\/p>\n\n\n\n
Let’s start by creating a new Laravel project using Composer:<\/p>\n\n\n\n
composer create-project laravel\/laravel laravel-yajra-datatables --prefer-dist\ncd laravel-yajra-datatables<\/code><\/pre>\n\n\n\nStep 2: Install Yajra Datatable Package<\/h2>\n\n\n\n
Next, we’ll install the Yajra DataTable plugin:<\/p>\n\n\n\n
composer require yajra\/laravel-datatables-oracle<\/code><\/pre>\n\n\n\nAfter installing, expand the foundational service by adding the service provider and alias in the config\/app.php<\/strong><\/code> file:<\/p>\n\n\n\n\/\/ config\/app.php\n\n'providers' => [\n \/\/ ...\n Yajra\\DataTables\\DataTablesServiceProvider::class,\n],\n\n'aliases' => [\n \/\/ ...\n 'DataTables' => Yajra\\DataTables\\Facades\\DataTables::class,\n]<\/code><\/pre>\n\n\n\nRun the vendor publish command:<\/p>\n\n\n\n
php artisan vendor:publish --provider=\"Yajra\\DataTables\\DataTablesServiceProvider\"<\/code><\/pre>\n\n\n\nStep 3: Set Up the Model and Migrations<\/h2>\n\n\n\n
Generate a model and migration for the ‘blogs’ table:<\/p>\n\n\n\n
php artisan make:model Blog --m<\/code><\/pre>\n\n\n\nAdd the following code to the generated migration file:<\/p>\n\n\n\n
\/\/ database\/migrations\/xxxx_xx_xx_create_blogs_table.php\n\npublic function up(): void\n{\n Schema::create('blogs', function (Blueprint $table) {\n $table->id();\n $table->string('title');\n $table->string('description');\n $table->text('content');\n $table->timestamps();\n });\n}<\/code><\/pre>\n\n\n\nIn the app\/Models\/Blog.php<\/strong><\/code> file, add the following code:<\/p>\n\n\n\n<?php\n\nnamespace App\\Models;\n\nuse Illuminate\\Database\\Eloquent\\Factories\\HasFactory;\nuse Illuminate\\Database\\Eloquent\\Model;\n\nclass Blog extends Model\n{\n use HasFactory;\n\n protected $fillable = [\n 'title',\n 'description',\n 'content',\n ];\n}<\/code><\/pre>\n\n\n\nRun the migration command:<\/p>\n\n\n\n
php artisan migrate<\/code><\/pre>\n\n\n\nStep 4: Generate Dummy Records<\/h2>\n\n\n\n
To test Yajra Datatables, let’s create dummy records using Faker. Open database\/seeders\/DatabaseSeeder.php<\/code> and add the following code:<\/p>\n\n\n\n\/\/ database\/seeders\/DatabaseSeeder.php\n\npublic function run(): void\n{\n $faker = \\Faker\\Factory::create();\n for ($i = 0; $i < 200; $i++) {\n \\DB::table('blogs')->insert([\n 'title' => $faker->sentence($nbWords = 6, \n $variableNbWords = true),\n 'description' => $faker->paragraph\n ($nbSentences = 2,\n $variableNbSentences = true),\n 'content' => $faker->text($maxNbChars = 500),\n ]);\n }\n}<\/code><\/pre>\n\n\n\nRun the seeder command:<\/p>\n\n\n\n
php artisan db:seed<\/code><\/pre>\n\n\n\nStep 5: Create a Controller<\/h2>\n\n\n\n
Now, let’s create a controller for our Blog model:<\/p>\n\n\n\n
php artisan make:controller BlogController<\/code><\/pre>\n\n\n\nOpen the file app\/Http\/Controllers\/BlogController.ph<\/strong>p<\/code> and add the following code:<\/p>\n\n\n\n<?php\n\nnamespace App\\Http\\Controllers;\n\nuse Yajra\\DataTables\\Facades\\Datatables;\nuse App\\Models\\Blog;\nuse Illuminate\\Http\\Request;\n\nclass BlogController extends Controller\n{\n public function index(Request $request)\n {\n if ($request->ajax()) {\n $data = Blog::all();\n return Datatables::of($data)\n ->addIndexColumn()\n ->addColumn('action', function ($row) {\n $actionBtn = '<a href=\"javascript:void(0)\"\n class=\"edit btn btn-success btn-sm\">Edit<\/a> \n <a href=\"javascript:void(0)\" \n class=\"delete btn btn-danger btn-sm\">Delete\n <\/a>';\n return $actionBtn;\n })\n ->rawColumns(['action'])\n ->make(true);\n }\n return view('welcome');\n }\n}<\/code><\/pre>\n\n\n\nStep 6: Create Routes<\/h2>\n\n\n\n
Create routes to display the data table in our view. Open routes\/web.ph<\/strong>p<\/code>\u00a0and add the following code:<\/p>\n\n\n\n<?php\n\nuse Illuminate\\Support\\Facades\\Route;\nuse App\\Http\\Controllers\\BlogController;\n\nRoute::get('blogs', [BlogController::class, 'index'])->name('blogs.index');<\/code><\/pre>\n\n\n\nStep 7: Displaying Records with Laravel Yajra Datatables<\/h2>\n\n\n\n
Create the welcome.blade.php<\/strong><\/code> file in resources\/views\/<\/strong><\/code> and place the following code:<\/p>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Implementing Yajra Datatables in Laravel 10<\/title>\n <meta name=\"csrf-token\" content=\"{{ csrf_token() }}\">\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/twitter-bootstrap\/5.0.1\/css\/bootstrap.min.css\" rel=\"stylesheet\">\n <link href=\"https:\/\/cdn.datatables.net\/1.11.4\/css\/dataTables.bootstrap5.min.css\" rel=\"stylesheet\">\n <script src=\"https:\/\/code.jquery.com\/jquery-3.5.1.js\"><\/script>\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery-validate\/1.19.0\/jquery.validate.js\"><\/script>\n <script src=\"https:\/\/cdn.datatables.net\/1.11.4\/js\/jquery.dataTables.min.js\"><\/script>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.0.2\/dist\/js\/bootstrap.bundle.min.js\" integrity=\"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn\/tWtIaxVXM\" crossorigin=\"anonymous\"><\/script>\n <script src=\"https:\/\/cdn.datatables.net\/1.11.4\/js\/dataTables.bootstrap5.min.js\"><\/script>\n<\/head>\n<body>\n <div class=\"container\">\n <h1>Implementing Yajra Datatables in Laravel 10<\/h1>\n <table class=\"table table-bordered data-table\">\n <thead>\n <tr>\n <th>No<\/th>\n <th>Title<\/th>\n <th>Description<\/th>\n <th>Content<\/th>\n <th width=\"105px\">Action<\/th>\n <\/tr>\n <\/thead>\n <tbody><\/tbody>\n <\/table>\n <\/div>\n\n <script type=\"text\/javascript\">\n $(function() {\n gb_DataTable = $(\".data-table\").DataTable({\n autoWidth: false,\n order: [0, \"ASC\"],\n processing: true,\n serverSide: true,\n searchDelay: 2000,\n paging: true,\n ajax: \"{{ route('blogs.index') }}\",\n iDisplayLength: \"25\",\n columns: [\n { data: 'id', name: 'id' },\n { data: 'title', name: 'title' },\n { data: 'description', name: 'description' },\n { data: 'content', name: 'content' },\n { data: 'action', name: 'action', orderable: false, searchable: false },\n ],\n lengthMenu: [25, 50, 100]\n });\n });\n <\/script>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\nFinally, run the following command and view the result in your browser:<\/p>\n\n\n\n
php artisan serve<\/code><\/pre>\n\n\n\nVisit\u00a0http:\/\/<hostname>:<port>\/\u00a0to see the Yajra Datatables in action!<\/p>\n","protected":false},"excerpt":{"rendered":"
Welcome to our step-by-step guide on implementing Yajra DataTables in a Laravel 10 project. Yajra…<\/p>\n","protected":false},"author":1,"featured_media":728,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[28,1],"tags":[35,36,38,32,29,33,30,34,37,31],"class_list":["post-227","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-laravel","category-php","tag-ajax-requests","tag-backend-development","tag-data-table-in-laravel","tag-datatable-integration","tag-laravel-development","tag-laravel-packages","tag-php-development","tag-server-side-processing","tag-web-application-development","tag-yajra"],"yoast_head":"\n
Yajra Data Tables Laravel 10 | Create Laravel Project<\/title>\n<meta name=\"description\" content=\"Extensive\u00a0instructions for implementing Yajra DataTables in a Laravel 10 project. A dynamic library titled Yajra DataTables allows the jQuery DataTables API to be easily integrated with Laravel.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/200oksolutionssandbox.co.uk\/blog\/implementing-yajra-datatables-in-laravel-10-a-step-by-step-guide\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Yajra Data Tables Laravel 10 | Create Laravel Project\" \/>\n<meta property=\"og:description\" content=\"Extensive\u00a0instructions for implementing Yajra DataTables in a Laravel 10 project. A dynamic library titled Yajra DataTables allows the jQuery DataTables API to be easily integrated with Laravel.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/200oksolutionssandbox.co.uk\/blog\/implementing-yajra-datatables-in-laravel-10-a-step-by-step-guide\/\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/profile.php?id=61552217825863\" \/>\n<meta property=\"article:published_time\" content=\"2024-01-10T09:23:33+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-07-17T21:23:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/200oksolutionssandbox.co.uk\/blog\/wp-content\/uploads\/2024\/01\/yajra-datatables-in-Laravel-10-1.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"500\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"BlogAdmin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"BlogAdmin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Yajra Data Tables Laravel 10 | Create Laravel Project","description":"Extensive\u00a0instructions for implementing Yajra DataTables in a Laravel 10 project. A dynamic library titled Yajra DataTables allows the jQuery DataTables API to be easily integrated with Laravel.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/200oksolutionssandbox.co.uk\/blog\/implementing-yajra-datatables-in-laravel-10-a-step-by-step-guide\/","og_locale":"en_US","og_type":"article","og_title":"Yajra Data Tables Laravel 10 | Create Laravel Project","og_description":"Extensive\u00a0instructions for implementing Yajra DataTables in a Laravel 10 project. A dynamic library titled Yajra DataTables allows the jQuery DataTables API to be easily integrated with Laravel.","og_url":"https:\/\/200oksolutionssandbox.co.uk\/blog\/implementing-yajra-datatables-in-laravel-10-a-step-by-step-guide\/","article_publisher":"https:\/\/www.facebook.com\/profile.php?id=61552217825863","article_published_time":"2024-01-10T09:23:33+00:00","article_modified_time":"2024-07-17T21:23:30+00:00","og_image":[{"width":500,"height":500,"url":"https:\/\/200oksolutionssandbox.co.uk\/blog\/wp-content\/uploads\/2024\/01\/yajra-datatables-in-Laravel-10-1.webp","type":"image\/webp"}],"author":"BlogAdmin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"BlogAdmin","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/200oksolutionssandbox.co.uk\/blog\/implementing-yajra-datatables-in-laravel-10-a-step-by-step-guide\/#article","isPartOf":{"@id":"https:\/\/200oksolutionssandbox.co.uk\/blog\/implementing-yajra-datatables-in-laravel-10-a-step-by-step-guide\/"},"author":{"name":"BlogAdmin","@id":"https:\/\/200oksolutionssandbox.co.uk\/blog\/#\/schema\/person\/ea0b72006227b3403f5ad825b82ced43"},"headline":"Implementing Yajra DataTables in Laravel 10: A Step-by-Step Guide","datePublished":"2024-01-10T09:23:33+00:00","dateModified":"2024-07-17T21:23:30+00:00","mainEntityOfPage":{"@id":"https:\/\/200oksolutionssandbox.co.uk\/blog\/implementing-yajra-datatables-in-laravel-10-a-step-by-step-guide\/"},"wordCount":292,"commentCount":0,"publisher":{"@id":"https:\/\/200oksolutionssandbox.co.uk\/blog\/#organization"},"image":{"@id":"https:\/\/200oksolutionssandbox.co.uk\/blog\/implementing-yajra-datatables-in-laravel-10-a-step-by-step-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/200oksolutionssandbox.co.uk\/blog\/wp-content\/uploads\/2024\/01\/yajra-datatables-in-Laravel-10-1.webp","keywords":["AJAX","Backend Development","Data Table In Laravel","Data Table Integration","Laravel Development","Laravel Packages","PHP Development","ServerSide Processing","Web Application Development","Yajra"],"articleSection":["Laravel","PHP"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/200oksolutionssandbox.co.uk\/blog\/implementing-yajra-datatables-in-laravel-10-a-step-by-step-guide\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/200oksolutionssandbox.co.uk\/blog\/implementing-yajra-datatables-in-laravel-10-a-step-by-step-guide\/","url":"https:\/\/200oksolutionssandbox.co.uk\/blog\/implementing-yajra-datatables-in-laravel-10-a-step-by-step-guide\/","name":"Yajra Data Tables Laravel 10 | Create Laravel Project","isPartOf":{"@id":"https:\/\/200oksolutionssandbox.co.uk\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/200oksolutionssandbox.co.uk\/blog\/implementing-yajra-datatables-in-laravel-10-a-step-by-step-guide\/#primaryimage"},"image":{"@id":"https:\/\/200oksolutionssandbox.co.uk\/blog\/implementing-yajra-datatables-in-laravel-10-a-step-by-step-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/200oksolutionssandbox.co.uk\/blog\/wp-content\/uploads\/2024\/01\/yajra-datatables-in-Laravel-10-1.webp","datePublished":"2024-01-10T09:23:33+00:00","dateModified":"2024-07-17T21:23:30+00:00","description":"Extensive\u00a0instructions for implementing Yajra DataTables in a Laravel 10 project. A dynamic library titled Yajra DataTables allows the jQuery DataTables API to be easily integrated with Laravel.","breadcrumb":{"@id":"https:\/\/200oksolutionssandbox.co.uk\/blog\/implementing-yajra-datatables-in-laravel-10-a-step-by-step-guide\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/200oksolutionssandbox.co.uk\/blog\/implementing-yajra-datatables-in-laravel-10-a-step-by-step-guide\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/200oksolutionssandbox.co.uk\/blog\/implementing-yajra-datatables-in-laravel-10-a-step-by-step-guide\/#primaryimage","url":"https:\/\/200oksolutionssandbox.co.uk\/blog\/wp-content\/uploads\/2024\/01\/yajra-datatables-in-Laravel-10-1.webp","contentUrl":"https:\/\/200oksolutionssandbox.co.uk\/blog\/wp-content\/uploads\/2024\/01\/yajra-datatables-in-Laravel-10-1.webp","width":500,"height":500,"caption":"yajra-datatables-in-Laravel-10"},{"@type":"BreadcrumbList","@id":"https:\/\/200oksolutionssandbox.co.uk\/blog\/implementing-yajra-datatables-in-laravel-10-a-step-by-step-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/200oksolutionssandbox.co.uk\/blog\/"},{"@type":"ListItem","position":2,"name":"Implementing Yajra DataTables in Laravel 10: A Step-by-Step Guide"}]},{"@type":"WebSite","@id":"https:\/\/200oksolutionssandbox.co.uk\/blog\/#website","url":"https:\/\/200oksolutionssandbox.co.uk\/blog\/","name":"","description":"","publisher":{"@id":"https:\/\/200oksolutionssandbox.co.uk\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/200oksolutionssandbox.co.uk\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/200oksolutionssandbox.co.uk\/blog\/#organization","name":"Web Development Blog | Software Blog | App Blog","url":"https:\/\/200oksolutionssandbox.co.uk\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/200oksolutionssandbox.co.uk\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/200oksolutionssandbox.co.uk\/blog\/wp-content\/uploads\/2026\/01\/200ok_logo.png","contentUrl":"https:\/\/200oksolutionssandbox.co.uk\/blog\/wp-content\/uploads\/2026\/01\/200ok_logo.png","width":500,"height":191,"caption":"Web Development Blog | Software Blog | App Blog"},"image":{"@id":"https:\/\/200oksolutionssandbox.co.uk\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/profile.php?id=61552217825863"]},{"@type":"Person","@id":"https:\/\/200oksolutionssandbox.co.uk\/blog\/#\/schema\/person\/ea0b72006227b3403f5ad825b82ced43","name":"BlogAdmin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/200oksolutionssandbox.co.uk\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/53ecc99d859b4d3444ee1e076f3b5d9da9962836d1c20b3b44d73574f435740d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/53ecc99d859b4d3444ee1e076f3b5d9da9962836d1c20b3b44d73574f435740d?s=96&d=mm&r=g","caption":"BlogAdmin"},"sameAs":["http:\/\/blog.200oksolutions.com"],"url":"https:\/\/200oksolutionssandbox.co.uk\/blog\/author\/blogadmin\/"}]}},"_links":{"self":[{"href":"https:\/\/200oksolutionssandbox.co.uk\/blog\/wp-json\/wp\/v2\/posts\/227","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/200oksolutionssandbox.co.uk\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/200oksolutionssandbox.co.uk\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/200oksolutionssandbox.co.uk\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/200oksolutionssandbox.co.uk\/blog\/wp-json\/wp\/v2\/comments?post=227"}],"version-history":[{"count":36,"href":"https:\/\/200oksolutionssandbox.co.uk\/blog\/wp-json\/wp\/v2\/posts\/227\/revisions"}],"predecessor-version":[{"id":533,"href":"https:\/\/200oksolutionssandbox.co.uk\/blog\/wp-json\/wp\/v2\/posts\/227\/revisions\/533"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/200oksolutionssandbox.co.uk\/blog\/wp-json\/wp\/v2\/media\/728"}],"wp:attachment":[{"href":"https:\/\/200oksolutionssandbox.co.uk\/blog\/wp-json\/wp\/v2\/media?parent=227"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/200oksolutionssandbox.co.uk\/blog\/wp-json\/wp\/v2\/categories?post=227"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/200oksolutionssandbox.co.uk\/blog\/wp-json\/wp\/v2\/tags?post=227"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}