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":5,"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:\/\/www.200oksolutions.com\/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:\/\/www.200oksolutions.com\/blog\/implementing-yajra-datatables-in-laravel-10-a-step-by-step-guide\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-01-10T09:23:33+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-04T07:44:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.200oksolutions.com\/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=\"Piyush Solanki\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Piyush Solanki\" \/>\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:\/\/www.200oksolutions.com\/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:\/\/www.200oksolutions.com\/blog\/implementing-yajra-datatables-in-laravel-10-a-step-by-step-guide\/","article_published_time":"2024-01-10T09:23:33+00:00","article_modified_time":"2025-12-04T07:44:09+00:00","og_image":[{"width":500,"height":500,"url":"https:\/\/www.200oksolutions.com\/blog\/wp-content\/uploads\/2024\/01\/yajra-datatables-in-Laravel-10-1.webp","type":"image\/webp"}],"author":"Piyush Solanki","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Piyush Solanki","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.200oksolutions.com\/blog\/implementing-yajra-datatables-in-laravel-10-a-step-by-step-guide\/#article","isPartOf":{"@id":"https:\/\/www.200oksolutions.com\/blog\/implementing-yajra-datatables-in-laravel-10-a-step-by-step-guide\/"},"author":{"name":"Piyush Solanki","@id":"https:\/\/www.200oksolutions.com\/blog\/#\/schema\/person\/e07f6b8e3c9a90ce7b3b09427d26155e"},"headline":"Implementing Yajra DataTables in Laravel 10: A Step-by-Step Guide","datePublished":"2024-01-10T09:23:33+00:00","dateModified":"2025-12-04T07:44:09+00:00","mainEntityOfPage":{"@id":"https:\/\/www.200oksolutions.com\/blog\/implementing-yajra-datatables-in-laravel-10-a-step-by-step-guide\/"},"wordCount":292,"commentCount":0,"publisher":{"@id":"https:\/\/www.200oksolutions.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.200oksolutions.com\/blog\/implementing-yajra-datatables-in-laravel-10-a-step-by-step-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.200oksolutions.com\/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:\/\/www.200oksolutions.com\/blog\/implementing-yajra-datatables-in-laravel-10-a-step-by-step-guide\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.200oksolutions.com\/blog\/implementing-yajra-datatables-in-laravel-10-a-step-by-step-guide\/","url":"https:\/\/www.200oksolutions.com\/blog\/implementing-yajra-datatables-in-laravel-10-a-step-by-step-guide\/","name":"Yajra Data Tables Laravel 10 | Create Laravel Project","isPartOf":{"@id":"https:\/\/www.200oksolutions.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.200oksolutions.com\/blog\/implementing-yajra-datatables-in-laravel-10-a-step-by-step-guide\/#primaryimage"},"image":{"@id":"https:\/\/www.200oksolutions.com\/blog\/implementing-yajra-datatables-in-laravel-10-a-step-by-step-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/www.200oksolutions.com\/blog\/wp-content\/uploads\/2024\/01\/yajra-datatables-in-Laravel-10-1.webp","datePublished":"2024-01-10T09:23:33+00:00","dateModified":"2025-12-04T07:44:09+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:\/\/www.200oksolutions.com\/blog\/implementing-yajra-datatables-in-laravel-10-a-step-by-step-guide\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.200oksolutions.com\/blog\/implementing-yajra-datatables-in-laravel-10-a-step-by-step-guide\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.200oksolutions.com\/blog\/implementing-yajra-datatables-in-laravel-10-a-step-by-step-guide\/#primaryimage","url":"https:\/\/www.200oksolutions.com\/blog\/wp-content\/uploads\/2024\/01\/yajra-datatables-in-Laravel-10-1.webp","contentUrl":"https:\/\/www.200oksolutions.com\/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:\/\/www.200oksolutions.com\/blog\/implementing-yajra-datatables-in-laravel-10-a-step-by-step-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.200oksolutions.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Implementing Yajra DataTables in Laravel 10: A Step-by-Step Guide"}]},{"@type":"WebSite","@id":"https:\/\/www.200oksolutions.com\/blog\/#website","url":"https:\/\/www.200oksolutions.com\/blog\/","name":"Web Development, Software, and App Blog | 200OK Solutions","description":"","publisher":{"@id":"https:\/\/www.200oksolutions.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.200oksolutions.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.200oksolutions.com\/blog\/#organization","name":"Web Development Blog | Software Blog | App Blog","url":"https:\/\/www.200oksolutions.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.200oksolutions.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/200oksolutions.com\/blog\/wp-content\/uploads\/2025\/09\/200ok_logo-CGzMrWDu.png","contentUrl":"https:\/\/200oksolutions.com\/blog\/wp-content\/uploads\/2025\/09\/200ok_logo-CGzMrWDu.png","width":500,"height":191,"caption":"Web Development Blog | Software Blog | App Blog"},"image":{"@id":"https:\/\/www.200oksolutions.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.instagram.com\/200ok_solutions\/"]},{"@type":"Person","@id":"https:\/\/www.200oksolutions.com\/blog\/#\/schema\/person\/e07f6b8e3c9a90ce7b3b09427d26155e","name":"Piyush Solanki","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.200oksolutions.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/962a2b0b4db856e6851ec7d838597a0395adcaae9c0091d223de9942a4254461?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/962a2b0b4db856e6851ec7d838597a0395adcaae9c0091d223de9942a4254461?s=96&d=mm&r=g","caption":"Piyush Solanki"},"description":"Piyush is a seasoned PHP Tech Lead with 10+ years of experience architecting and delivering scalable web and mobile backend solutions for global brands and fast-growing SMEs. He specializes in PHP, MySQL, CodeIgniter, WordPress, and custom API development, helping businesses modernize legacy systems and launch secure, high-performance digital products. He collaborates closely with mobile teams building Android & iOS apps , developing RESTful APIs, cloud integrations, and secure payment systems using platforms like Stripe, AWS S3, and OTP\/SMS gateways. His work extends across CMS customization, microservices-ready backend architectures, and smooth product deployments across Linux and cloud-based environments. Piyush also has a strong understanding of modern front-end technologies such as React and TypeScript, enabling him to contribute to full-stack development workflows and advanced admin panels. With a successful delivery track record in the UK market and experience building digital products for sectors like finance, hospitality, retail, consulting, and food services, Piyush is passionate about helping SMEs scale technology teams, improve operational efficiency, and accelerate innovation through backend excellence and digital tools.","url":"https:\/\/www.200oksolutions.com\/blog\/author\/piyush\/"}]}},"_links":{"self":[{"href":"https:\/\/www.200oksolutions.com\/blog\/wp-json\/wp\/v2\/posts\/227","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.200oksolutions.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.200oksolutions.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.200oksolutions.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.200oksolutions.com\/blog\/wp-json\/wp\/v2\/comments?post=227"}],"version-history":[{"count":36,"href":"https:\/\/www.200oksolutions.com\/blog\/wp-json\/wp\/v2\/posts\/227\/revisions"}],"predecessor-version":[{"id":533,"href":"https:\/\/www.200oksolutions.com\/blog\/wp-json\/wp\/v2\/posts\/227\/revisions\/533"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.200oksolutions.com\/blog\/wp-json\/wp\/v2\/media\/728"}],"wp:attachment":[{"href":"https:\/\/www.200oksolutions.com\/blog\/wp-json\/wp\/v2\/media?parent=227"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.200oksolutions.com\/blog\/wp-json\/wp\/v2\/categories?post=227"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.200oksolutions.com\/blog\/wp-json\/wp\/v2\/tags?post=227"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}