0
votes

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]);
}
2

2 Answers

0
votes

paginate will get 5 results from the query builder and return them for you in a collection

Getting all the results with get() and then trying to paginate them defeats the whole purpose of pagination

Call the pagination on the query builder, not the collection

$employees = Employee::where('company_id', $request->company_id)
                     ->orderBy('BadgeCode', 'desc')->paginate(5);

I hope this helps

0
votes

I solved it instead of this.employees = response.data; it should be this.employees = response.data.data;

methods: {
    getEmployeesbyCompany: function() {
      axios
        .get("api/getEmployees", {
          params: { company_id: this.form.company_id }
        })
        .then(
          function(response) {
            this.employees = response.data.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.data;
          }.bind(this)
        );
    },