Laravel Error Page After Create data using ajax and boostrap - php

Question

So I'm trying create data using ajax and modal box from boostrap, but my pagination not using ajax, after created data Paginate and Table Has change by using render() in laravel.. after that I click Another page.. it making error Like This.. Click Me for Look the Error
web.php
Route::prefix('ajaxCrud')->group(function () {
Route::get('', 'ajaxCrudController#index')->name('crud.index');
Route::post('add', 'ajaxCrudController#masuk')->name('crud.add');
});
Javascript / crudCustom.js
$('#form-tambah').submit(function (e) {
e.preventDefault();
$.ajax({
type: "post",
url: $(this).attr('action'),
data: $(this).serialize(),
dataType: "json",
success: function (results) {
$('#tbody-row').html(results.template.table);
$('#paginate').html(results.template.paginate);
// ajaxLoad(results.url);
history.pushState(null, null, results.url);
}
});
});
AjaxCrudController.php
siswa::create([
'name' => $req->name,
'nomor' => $req->phone,
'alamat'=> $req->address
]);
$template = [
'table' => view('ajaxCrud.ajax.table')->with(['data' => $siswa])->render(),
'paginate' => view('ajaxCrud.ajax.paginate')->with(['data' => $siswa])->render()
];
$response = [
'status' => true,
'template' => $template,
'url' => route('crud.index')
];
return response()->json($response);
index.blade.php
#foreach ($data as $item)
<tr>
<td>{{$loop->iteration}}</td>
<td>{{$item->name}}</td>
<td>{{$item->nomor}}</td>
<td>{{$item->alamat}}</td>
<td>
<a class="btn btn-success" href="#">Edit</a>
<a class="btn btn-danger" href="#">Delete</a>
</td>
</tr>
#endforeach
Paginate
<div id="paginate">
{{ $data->links() }}
</div>
Modal
<form method="post" action="{{route('crud.add')}}" id="form-tambah">
#csrf
<span id="form_output"></span>
<div class="modal-body">
<div class="form-group">
<label for="nama">Name</label>
<input type="text" name="name" class="form-control">
</div>
<div class="form-group">
<label for="phone">Phone</label>
<input type="number" name="phone" class="form-control">
</div>
<div class="form-group">
<label for="address">Address</label>
<textarea name="address" class="form-control"></textarea>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-success">Add</button>
</div>
</form>