I am trying to paginate the data after it increased more than 5 records it pagination worked fine in the first load data but when I try to fill the table depending the dropdownlist selected company the data isn't loading if I put the pagination with it . If anyone could help to get me out from this issue i’ll be very grateful. Thank You.
Here Is my HTML code
<div class="card-footer">
<pagination :data="employees" @pagination-change-page="getResults"></pagination>
</div>
Here Is my complete HTML code
<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>
Here Is my method code
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)
);
},
}
Here Is my Route
Route::get('getEmployees','API\EmployeeController@getEmployees');
Here Is my Controller
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]);
}
if I try to get the data without pagination I can get it by the below code
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]);
}