Question

我试图对数据进行分页，使其增加了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]);
}

Answer 1

paginate将从查询生成器中获得5个结果，并在集合中为您返回

使用get()获得所有结果，然后尝试对它们进行分页将破坏分页的整个目的

在查询生成器上调用分页，而不在集合上调用

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

我希望这对您有帮助

Answer 2

我解决了它，而不是this.employees = response.data;应该是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)
        );
    },

方法Illuminate \ Database \ Eloquent \ Collection :: paginate不存在。”

2 个答案: