Datatable + Livewire not working

[jynxy]

Hi,

Trying to get Datatables and livewire to co-operate, seems i can only get one or the other working. Narrowed it down to the render function of the component

I have taken a working livewire post page and trying to add datatable to get things started.

<?php

namespace App\Livewire;

use App\Models\Post;
use Livewire\Component;
use App\DataTables\AbsenceDataTable;
use Illuminate\Http\Request;

class PostsComponent extends Component
{
    public $post_id, $title, $status, $description, $post_edit_id, $post_delete_id;

    public $view_post_id, $view_post_title, $view_post_status, $view_post_description;

    public $searchTerm;

    //Input fields on update validation
    public function updated($fields)
    {
        $this->validateOnly($fields, [
            'post_id' => 'required|unique:posts,post_id,'.$this->post_edit_id.'', //Validation with ignoring own data
            'title' => 'required',
            'status' => 'required|in:active,inactive',
            'description' => 'required',
        ]);
    }

    public function storePost()
    {
        //on form submit validation
        $this->validate([
            'post_id' => 'required|unique:posts',
            'title' => 'required',
            'status' => 'required|in:active,inactive',
            'description' => 'required',
        ]);

        //Add Data into Post table Data
        $post = new Post();
        $post->post_id = $this->post_id;
        $post->title = $this->title;
        $post->status = $this->status;
        $post->description = $this->description;
        $post->save();

        session()->flash('message', 'New Post addedd Successfully.');

        $this->post_id = '';
        $this->title = '';
        $this->status = '';
        $this->description = '';

        //For hide modal after add posts success
        $this->dispatch('close-modal');
    }

    public function resetInputs()
    {
        $this->post_id = '';
        $this->title = '';
        $this->status = '';
        $this->description = '';
        $this->post_edit_id = '';
    }

    public function close()
    {
        $this->resetInputs();
    }

    public function editPost($id)
    {
        $post = Post::find($id);

        $this->post_edit_id = $post->id;
        $this->post_id = $post->post_id;
        $this->title = $post->title;
        $this->status = $post->status;
        $this->description = $post->description;

        $this->dispatch('show-edit-post-modal');
    }

    public function editPostData()
    {
        //on form submit validation
        $this->validate([
            'post_id' => 'required|unique:posts,post_id,'.$this->post_edit_id.'', //Validation with ignoring own data
            'title' => 'required',
            'status' => 'required|in:active,inactive',
            'description' => 'required',
        ]);

        $post = Post::find($this->post_edit_id);

        $post->post_id = $this->post_id;
        $post->title = $this->title;
        $post->status = $this->status;
        $post->description = $this->description;

        $post->save();

        session()->flash('message', 'Post has been updated successfully');

        //For hide modal after add post added successfully
        $this->dispatch('close-modal');
    }

    //Delete Confirmation
    public function deleteConfirmation($id)
    {
        $this->post_delete_id = $id; //post id

        $this->dispatch('show-delete-confirmation-modal');
    }

    public function deletePostData()
    {
        Post::destroy($this->post_delete_id);

        session()->flash('message', 'Post has been deleted successfully');

        $this->dispatch('close-modal');

        $this->post_delete_id = '';
    }

    public function cancel()
    {
        $this->post_delete_id = '';
    }

    public function viewPostDetails($id)
    {
        $post = Post::find($id);

        $this->view_post_id = $post->post_id;
        $this->view_post_title = $post->title;
        $this->view_post_status = $post->status;
        $this->view_post_description = $post->description;

        $this->dispatch('show-view-post-modal');
    }

    public function closeViewPostModal()
    {
        $this->view_post_id = '';
        $this->view_post_title = '';
        $this->view_post_status = '';
        $this->view_post_description = '';
    }

    public function render()
    {
        //Get all post
        $posts = Post::where('title', 'like', '%'.$this->searchTerm.'%')
        ->orWhere('status', 'like', $this->searchTerm.'%')
        ->orWhere('post_id', 'like', '%'.$this->searchTerm.'%')
        ->orWhere('description', 'like', '%'.$this->searchTerm.'%')
        ->get();

        return view('livewire.posts-component', ['posts'=>$posts]);
    }
}

the above works fine, if i change the render to

    public function render(AbsenceDataTable $dataTable)
    {
     return $dataTable->render('pages.absence.list');
    }

i get a cannot reinitialise and "Method Illuminate\Http\JsonResponse::with does not exist.",

any ideas on how to fix this ? or a working demo somewhere that i can utilise the code.

Thanks

[wizzymore]

skill issues

[yajra]

You need to rescan the livewire component via draw.dt event. See https://github.com/yajra/laravel-datatables-html/blob/master/src/Html/Options/HasCallbacks.php#L48

https://yajrabox.com/docs/laravel-datatables/10.0/html-builder-callbacks#main-content

[github-actions[bot]]

This issue is stale because it has been open for 30 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[github-actions[bot]]

This issue was closed because it has been inactive for 7 days since being marked as stale.