Append AJAX Output to HTML table - development

Append AJAX Output to HTML table

I have done my research and i cant seem to find the appropriate answer.

Here is the problem. First off, this question may be broad. And i am new to ajax. I am using laravel and i have just created a controller which handles two dates whereBetween to find the result set and ajax is handling the get request. I am having two issues.

First being, i have no idea on how to append to my existing table. The other issue is a bit complicated. Currently i am using carbons diffForHumans() to display the time taken.

Also using if else statements. Here is how my current table looks like (this is looped from controller for sample data. this is not ajax):

<table class="table">
                <thead>
                <tr>

                    <th>Room Number</th>
                    <th>Cleaned By</th>
                    <th>Total Time</th>
                    <th>Supervised</th>
                    <th>Issues</th>
                    <th>Cleaned</th>
                    <th>View</th>
                </tr>
                </thead>
                <tbody>
                @foreach($clean as $cleans)
                    <tr>

                        <td></td>
                        <td></td>
                        <td></td>
                        @if($cleans->verified == 1)<td class="verified">Yes</td>@else()<td class="notverified">No</td>@endif
                        @if($cleans->img1 || $cleans->img1 || $cleans->img1 == !null)<td class="verified">Yes</td>@else()<td class="notverified">No Issues</td>@endif
                        <td></td>
                        <td><a href=""><i class="lnr lnr-eye"></i></a></td>
                    </tr>
                @endforeach
                </tbody>
            </table>

As shown above, i have used with() in my controller to get the users name using user_id column. And the diffForHumans(). Also some if else statements.

Here is my AJAX so far:

$(function() {


            $('.form').submit(function(event) {


                // get the form data in value key pair using jquery serialize
                var data = $(this).serialize();
                // get the url we are posting to from the forms action attribute
                //var url  = $(this).attr('/admin/search');

                // process the form
                var search = $.ajax({
                    type: "POST", // define the type of HTTP verb we want to use (POST for our form)
                    url: "search", // the url where we want to POST
                    data: data, // the url where we want to POST, set in variable above
                    dataType: "json", // what type of data do we expect back from the server
                    encode          : true
                })

                // using the done promise callback (success)
                search.done(function(data) {

                    // log data to the console so we can see
                    console.log(data);


                    // here we will handle errors and validation messages
                });

                // stop the form from submitting the normal way and refreshing the page
                event.preventDefault();

            });//submit function

        });//doc ready end

So how can i append to the above table and still maintain those diffForHumans(), if else statements and most importantly the user name using user_id column (relation)

Update (Controller):

public function search(Request $request){

        $data =  $request->only(['from', 'to']);
        $data['to'] .= ' 23:59:59';
        $output = Clean::whereBetween('created_at', $data)->get();
        //return view('admin/search-test', compact('output'));

       //return Response($output);
        return Response::json(array($output));
    }

from Laravel Questions and Answers https://laravelquestions.com/laravel/append-ajax-output-to-html-table/
via Lzo Media