Laravel Datatables – Inertia Svelte

composer require yajra/laravel-datatables-oracle

Additionally, enlarge the foundational service of the package such as datatable service provider in providers and alias inside the config/app.php file.

.....
.....
'providers' => [
	....
	....
	Yajra\DataTables\DataTablesServiceProvider::class,
]
'aliases' => [
	....
	....
	'DataTables' => Yajra\DataTables\Facades\DataTables::class,
]
.....
.....

Run vendor publish command further this step is optional:

php artisan vendor:publish --provider="Yajra\DataTables\DataTablesServiceProvider"

This controller for datatables

<?php

namespace App\Http\Controllers;

use DataTables;
use Illuminate\Support\Facades\DB;

class TableController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index(Request $request)
    {
        //
        $posts = '';
        if ($request->ajax() && $request->draw) {
            $data = DB::table('data_rows')->get();
            $returnData =  Datatables::of($data)
                ->addIndexColumn()
                ->addColumn('action', function($row){
                    $actionBtn = '<a href="javascript:void(0)" class="edit btn btn-success btn-sm">Edit</a> <a href="javascript:void(0)" class="delete btn btn-danger btn-sm">Delete</a>';
                    return $actionBtn;
                })
                ->rawColumns(['action'])
                ->make(true);
            return $returnData  ;
        }

        return Inertia::render('Table', [
            $posts
        ]);
        
    }

}

This svelte page use datatables

<script>
    import { onMount, onDestroy } from "svelte";
    import { loadScript } from "./../document.js";
    import { inertia, Link } from "@inertiajs/svelte";
  
    onMount(async () => {
        await loadScript(
            "https://code.jquery.com/jquery-3.7.0.js",
            "jquery-3.7.0.js"
        );
        await loadScript(
            "https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js",
            "jquery.dataTables.min.js"
        );
        console.log("script loaded successfully!");

        let checkload = setInterval(() => {
            if (window.jQuery && window.DataTable) {
                new DataTable("#example", {
                    searchDelay: 2000,
                    ajax: "/table",
                    processing: true,
                    serverSide: true,
                    columns: [
                        { data: "id" },
                        { data: "data_type_id" },
                        { data: "field" },
                        { data: "type" },
                        { data: "display_name" },
                        { data: "required" },
                        { data: "action" },
                    ],
                });
                clearInterval(checkload);
            }
        }, 1000);

        //
    });

    onDestroy(() => {
        document.querySelector(".dataTables_wrapper").remove();
    });

    function increment() {
        counter++;
    }
</script>

<svelte:head>
    <link
        rel="stylesheet"
        type="text/css"
        href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css"
    />
</svelte:head>

<a href="/table2" use:inertia>Table2</a>

<br /><br />
<table id="example" class="display" style="width:100%">
    <thead>
        <tr>
            <th>author_id</th>
            <th>category_id</th>
            <th>title</th>
            <th>seo_title</th>
            <th>excerpt</th>
            <th>body</th>
            <th>Action</th>
        </tr>
    </thead>
</table>

Laravel Datatables – Inertia Svelte

Comments

Leave a Reply Cancel reply