Я пытаюсь выполнить запрос на получение с разбивкой по страницам, используя axios на vuejs + laravel, когда я нажимаю более чем в 5 раз кнопку разбивки на страницы следующей и предыдущей, на ней не отображаются никакие данные, пока я не перезагружаю страницу, я думаю, что этослишком много запросов к серверу, проблема в том, что кто-нибудь может мне помочь **
и
Это мой метод getResults для запроса get:
getResults(page = 1) {
axios.get("api/employee?page=" + page).then(response => {
this.employees = response.data;
});
axios
.get("api/getEmployees?page=" + page, {
params: { company_id: this.form.company_id }
})
.then(
function(response) {
this.employees = response.data.data;
}.bind(this)
);
},
Это моя страница HTML-код:
<div class="card-footer">
<pagination :data="employees" @pagination-change-page="getResults"></pagination>
</div>
Это моя таблица HTML-код:
<div class="card-body table-responsive p-0">
<table class="table table-hover">
<thead>
<tr>
<th>ID</th>
<th>Picture</th>
<th>Badge#</th>
<th>Company</th>
<th>BadgeType</th>
<th>Nationality</th>
<th>Last Name</th>
<th>First Name</th>
<th>Telphonenumber</th>
<th>Position</th>
<th>SupervisorName</th>
<th>SupervisorNumber</th>
<th>Tazker</th>
<th>Issuedate</th>
<th>Expiredate</th>
<th>Afghanidate</th>
<th>Serialnumber</th>
<th>Modify</th>
<th>PringBadge</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="16" align="center">
<p
v-if="employees.data.length == 0 || employees.data.length=='' "
class="text-center alert alert-danger"
>There is no data in the Table</p>
</td>
</tr>
<tr v-for="employee in employees.data" v-bind:key="employee.id">
<td>{{employee.id}}</td>
<td>
<!-- <div class="widget-user-image"> -->
<img
class="img-square"
style="height:30px; width:30px;"
:src="getProfilePhoto(employee.photo)"
alt="User Avatar"
/>
<!-- </div> -->
</td>
<td>{{employee.BadgeCode|UppCaseFirstLetter}}</td>
<!-- <td>{{employee.company_id}}</td> -->
<td
v-for="Company in Companies"
:value="Company.id"
v-if="employee.company_id === Company.id"
>{{Company.Company}}</td>
<td>
<span class="tag tag-success">{{employee.BadgeType}}</span>
</td>
<td
v-for="Nationality in Nationalities"
v-bind:key="Nationality.id"
:value="Nationality.id"
v-if="employee.nationality_id === Nationality.id"
>{{Nationality.nationality}}</td>
<td>{{employee.lastname |UppCaseFirstLetter}}</td>
<td>{{employee.firstname |UppCaseFirstLetter}}</td>
<td>{{employee.telphonenumber |UppCaseFirstLetter}}</td>
<td>{{employee.position |UppCaseFirstLetter}}</td>
<td>{{employee.supervisorname |UppCaseFirstLetter}}</td>
<td>{{employee.supervisornumber|UppCaseFirstLetter}}</td>
<td>{{employee.tazker|UppCaseFirstLetter}}</td>
<td>{{employee.Issuedate|mydate}}</td>
<td>{{employee.expiredate|mydate}}</td>
<td>
<!-- <div class="widget-user-image"> -->
<img
class="img-square"
style="height:30px; width:30px;"
:src="getdatePhoto(employee.afghanidatephoto)"
alt="User Avatar"
/>
<!-- </div> -->
</td>
<td>{{employee.serialnumber |UppCaseFirstLetter}}</td>
<td>
<a href="#" @click="editModal(employee)">
<i class="fa fa-edit"></i>
</a>|||
<a href="#" @click="deleteemployee(employee.id)">
<i class="fa fa-trash red"></i>
</a>
</td>
<td>
<a href="#" @click="printModal(employee)">
<i class="fa fa-print"></i>
</a>
</td>
</tr>
<!-- <tr v-if="employees.count()==0" id="noRecordTR" style="display:none">
<td>No Record Found</td>
</tr>-->
</tbody>
</table>
</div>
Это мой код контроллера
public function index()
{
$date=\Carbon\Carbon::today();
// $this->authorize('isAdmin');
$employee=Employee::where('expiredate','>',$date)->paginate(5);
// return Employee::all();
return response()->json($employee);
}
public function getEmployees(Request $request)
{
$date=\Carbon\Carbon::today();
$employees = Employee::where('company_id', $request->company_id)
->where('expiredate','>',$date)
->orderBy('BadgeCode', 'desc')->paginate(5);
// return ['data' => $employees]; // or
return response()->json(['data' => $employees]);
}
На маршруте API:
Route::apiResources(['employee'=>'API\EmployeeController']);
Route::get('getEmployees','API\EmployeeController@getEmployees');