'How to solve the datatable undefined error when using in laravel

when i using datatable in laravel blade file , show undefined error looks like

"jquery.dataTables.js:3338 Uncaught TypeError: Cannot read properties of undefined (reading 'cell')"

so, share the all code details given below.

columnSearch.blade.php file

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.css">
</head>

<body>
    <table class="table" id="datatable">
        <thead>
            <tr>
                <th>FirstName</th>
                <th>LastName</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
        <tfoot>
            <tr>
                <td>
                    <input type="text" placeholder="search for firstname" class="form-control filter-input" data-column="0" />
                </td>
                <td>
                    <input type="text" placeholder="search for lastname" class="form-control filter-input" data-column="1" />
                </td>
                <td>
                    <input type="text" placeholder="search for email" class="form-control filter-input" data-column="2" />
                </td>
            </tr>

            <tr>
                <td>
                    <select data-column="0" class="form-control filter-select">
                        <option value="">select firstname</option>
                            @foreach($first_names as $name)
                                <option value="{{$name}}">{{ $name }}</option>
                            @endforeach
                    </select>
                </td>
                <td>
                    <select data-column="1" class="form-control filter-select">
                        <option value="">select lastname</option>
                            @foreach($last_names as $name)
                                <option value="{{$name}}">{{ $name }}</option>
                            @endforeach
                    </select>
                </td>
            </tr>
        </tfoot>
    </table>
</body>

<script src="http://code.jquery.com/jquery-1.11.2.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.js"></script>

<script>
    $(document).ready(function(){
        var table = $('#datatable').DataTable({
            'processing':true,
            'serverSide':true,
            'ajax': "{{ route('userData') }}",
            'columns':[
                {'data': 'firstname'},
                {'data': 'lastname'},
                {'data': 'email'},
            ]
        })

        $('.filter-input').keyup(function(){
            table.column( $(this).data('column'))
            .search($(this).val())
            .draw();
        })

        $('.filter-select').change(function(){
            table.column( $(this).data('column'))
            .search($(this).val())
            .draw();
        })
    })
</script>
</html>

UserController.php file

<?php

namespace App\Http\Controllers;

use App\Models\User;
use Illuminate\Http\Request;

class UserController extends Controller
{

    public function index()
    {
        //
        $user = User::all();
        $first_names = $user->sortBy('firstname')->pluck('firstname')->unique();
        $last_names = $user->sortBy('lastname')->pluck('lastname')->unique();
        return view('pages.columnSearch',compact('first_names','last_names'));
    }

}

web.php file

Route::get('/column-search', [UserController::class,'index'])->name('userData');

the above image is the error , how can i solve this. Thanks in advance.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'How to solve the datatable undefined error when using in laravel

Sources

Related Questions