How to add row into datatable after success ajax call in laravel?

Question

How can I add row into table after ajax success response in laravel? I tried to add.row() & I got an error. Can anyone help me?

Here is my controller code

 public function store(Request $request) {
    $validator = Validator::make($request->all(), [
        'name' => 'required',
    ]);
    if ($validator->passes()) {
        $category = FoodItemCategory::create([
            'name' => $request->name,
        ]);
        $data            = array();
        $data['success'] = 'category has been added';
        $data['id']      = $category->id;
        $data['name']    = $category->name;

        return response()->json(['status' => true, 'data' => $data]);
    }
    return response()->json(['errors' => $validator->errors()]);
}

Here is my ajax call

 $.ajax({
    url: "{{ url('admin/category/add/') }}",
    method: "POST",
    data: new FormData(this),
    contentType: false,
    cache: false,
    processData: false,
    dataType: "json",
    success: function(response) {
        if (response.status == true) {
            what to do here??
        }

 });

Here is the table in the blade view:-

<table class="table table-bordered text-center" id="categoryTable">
     <thead>
         <tr>
            <th scope="col">Sl No</th>
            <th scope="col">Category Name</th>
            <th scope="col">Action</th>
         </tr>
     </thead>
     <tbody>
          @foreach ($categories as $key => $category)
                  <tr class="remove{{ $category->id }}">
                      <td>{{ $key + 1 }}</td>
                      <td class="data{{ $category->id }}">{{ $category->name }}</td>
                      <td class="actionBtn">
                          <button type='button' class='ms-btn-icon btn-dark mr-3'
                                                onclick='editCategory({{ $category->id }})'> <i
                                                    class='flaticon-pencil'></i></button>
                                            <button type='button' class='ms-btn-icon btn-danger'
                                                onclick='deleteData({{ $category->id }})'> <i
                                                    class='flaticon-trash'></i></button>
                      </td>
                   </tr>
            @endforeach
     </tbody>
</table>

How can I add a new row when data inserted successfully? Also, I want to know how to show error messages in ajax calls?

Answer 1

In Ajax Success function use

success: function(response) {
    if (response.status == true) {
        $('#categoryTable tbody').append(`
            <tr><td>${response.data.id}</td>
                <td class="data${response.data.id}">${response.data.name}</td>
                <td class="actionBtn">
                    <button type='button' class='ms-btn-icon btn-dark mr-3'
                        onclick='editCategory(${response.data.id})'>
                        <i class='flaticon-pencil'></i>
                    </button>
                    <button type='button' class='ms-btn-icon btn-danger' 
                        onclick='deleteData(${response.data.id})'>
                        <i class='flaticon-trash'></i>
                    </button>
                </td>
          </tr>`
       );
    }
});