Я пытаюсь разбить данные на страницы после того, как они увеличились более чем на 5 записей, нумерация страниц хорошо работала в первых данных загрузки, но когда я пытаюсь заполнить таблицу в зависимости от выпадающего списка выбранной компании, данные не загружаются, если я помещаю нумерацию страницс этим . Если кто-нибудь может помочь мне выбраться из этой проблемы, я буду очень благодарен. Спасибо.
Вот мой HTML-код
<div class="card-footer">
<pagination :data="employees" @pagination-change-page="getResults"></pagination>
</div>
Вот мой полный HTML-код
<div class="col-md-12">
<div class="card">
<div class="card-header">
<h3 class="card-title">employees Table</h3>
<div class="card-tools">
<!-- <button class="btn btn-success" @click="newModal">
<i class="fa fa-employee-plus"></i>
Add employee
</button>-->
<div class="col-md-12">
<div class="form-group">
<select
name="company_id"
id="company_id"
:class="{'is-invalid':form.errors.has('company_id')}"
class="form-control"
v-model="form.company_id"
@change="getEmployeesbyCompany()"
>
<option value selected>Select Company</option>
<option
v-for="Comp in Companies.data"
:key="Comp.id"
:value="Comp.id"
>{{Comp.Company}}</option>
</select>
<has-error :form="form" field="company_id"></has-error>
</div>
</div>
</div>
</div>
<!-- /.card-header -->
<div class="card-body table-responsive p-0">
<table class="table table-hover">
<!-- <thead>
</thead>-->
<tbody>
<tr>
<th>ID</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>Issuedate</th>
<th>Tazker</th>
<th>Expiredate</th>
<th>Serialnumber</th>
<th>Modify</th>
</tr>
<tr v-for="employee in employees.data" v-bind:key="employee.id">
<td>{{employee.id}}</td>
<td>{{employee.BadgeCode|UppCaseFirstLetter}}</td>
<!-- <td>{{employee.company_id}}</td> -->
<td
v-for="Company in Companies.data"
: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.Issuedate|mydate}}</td>
<td>{{employee.tazker|UppCaseFirstLetter}}</td>
<td>{{employee.Expiredate |mydate}}</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>
</tr>
</tbody>
</table>
</div>
<!-- /.card-body -->
<div class="card-footer">
<pagination :data="employees" @pagination-change-page="getResults"></pagination>
</div>
</div>
<!-- /.card -->
</div>
Вот мой код метода
methods: {
getEmployeesbyCompany: function() {
axios
.get("api/getEmployees", {
params: { company_id: this.form.company_id }
})
.then(
function(response) {
this.employees = response.data;
}.bind(this)
);
},
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;
}.bind(this)
);
},
}
Вот мой маршрут
Route::get('getEmployees','API\EmployeeController@getEmployees');
Вот мой контроллер
public function index()
{
//
// $this->authorize('isAdmin');
return Employee::latest()->paginate(5);
}
public function getEmployees(Request $request)
{
$employees = Employee::where('company_id',$request->company_id)->orderBy('BadgeCode','desc')->paginate(5);
//dd($employees);
// return ['data' => $employees]; // or return response()->json(['data' => employees]);
return response()->json(['data' => $employees]);
}
Если я пытаюсь получить данные без нумерации страниц, я могу получить их по приведенному ниже коду
public function getEmployees(Request $request)
{
$employees = Employee::where('company_id',$request->company_id)->orderBy('BadgeCode','desc')->get();
//dd($employees);
// return ['data' => $employees]; // or return response()->json(['data' => employees]);
return response()->json(['data' => $employees]);
}