基于 CodeIgniter 分页类的 Vue 分页组件 - Pagination

MY_Pagination.php

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

/**
 * Pagination Class
 *
 * @package Transformers
 * @subpackage Libraries
 * @category Pagination
 * @author Hex
 */
class MY_Pagination extends CI_Pagination {

  protected $current_page = 0;
  protected $current_page_var = 'page';
  protected $max_total_rows = 1000;

  /**
   * Constructor
   *
   * @access	public
   * @param	array	initialization parameters
   */
  function __construct($params = array())
  {
    parent::__construct($params);

    $this->CI =& get_instance();

    log_message('debug', "MY_Pagination Class Initialized");
  }

  // --------------------------------------------------------------------

  // 返回一个包含分页数据的 array
  function get_links()
  {
    // If our item count or per-page total is zero there is no need to continue.
    if ($this->total_rows == 0 OR $this->per_page == 0)
    {
       return '';
    }

    $this->set_max_total();

    // Calculate the total number of pages
    $num_pages = ceil($this->total_rows / $this->per_page);

    // Is there only one page? Hm... nothing more to do here then.
    if ($num_pages == 1)
    {
      return '';
    }

    // Determine the current page number.
    $cp = $this->CI->input->get_post($this->current_page_var);
    $cp = ($cp === false || !ctype_digit($cp) ? '0' : $cp);
    //$cp = getPost($this->current_page_var, '0');
    $this->cur_page = empty($this->current_page) ? (ctype_digit($cp) ? $cp : '0') : $this->current_page;

    // Prep the current page - no funny business!
    $this->cur_page = (int) $this->cur_page;

    $this->num_links = (int)$this->num_links;

    if ($this->num_links < 1)
    {
      show_error('Your number of links must be a positive number.');
    }

    if ( ! is_numeric($this->cur_page))
    {
      $this->cur_page = 0;
    }

    // Is the page number beyond the result range?
    // If so we show the last page
    if ($this->cur_page > $this->total_rows)
    {
      $this->cur_page = ($num_pages - 1) * $this->per_page;
    }

    $uri_page_number = $this->cur_page;
    $this->cur_page = floor(($this->cur_page / $this->per_page) + 1);

    // Calculate the start and end numbers. These determine
    // which number to start and end the digit links with
    $start = (($this->cur_page - $this->num_links) > 0) ? $this->cur_page - ($this->num_links - 1) : 1;
    $end   = (($this->cur_page + $this->num_links) < $num_pages) ? $this->cur_page + $this->num_links : $num_pages;

    // Add a trailing slash to the base URL if needed
    //$this->base_url = rtrim($this->base_url, '/') .'/';

    // And here we go...
    $output = array();

    // Render the "First" link
    if ($this->cur_page > $this->num_links)
    {
      $output['first'] = 0;
    }

    // Render the "previous" link
    if ($this->cur_page != 1)
    {
      $i = $uri_page_number - $this->per_page;
      //if ($i == 0) $i = '';

      $output['previous'] = $i;
    }

    $output['pages'] = array();
    // Write the digit links
    for ($loop = $start -1; $loop <= $end; $loop++)
    {
      $i = ($loop * $this->per_page) - $this->per_page;

      if ($i >= 0)
      {
        if ($this->cur_page == $loop)
        {
          // Current page
          $output['pages'][] = array('number' => '', 'text' => $loop);
        }
        else
        {
          $n = ($i == 0) ? '0' : $i;
          $output['pages'][] = array('number' => $n, 'text' => $loop);
        }
      }
    }

    // Render the "next" link
    if ($this->cur_page < $num_pages)
    {
      $output['next'] = $this->cur_page * $this->per_page;
    }

    // Render the "Last" link
    if (($this->cur_page + $this->num_links) < $num_pages)
    {
      $i = (($num_pages * $this->per_page) - $this->per_page);

      $output['last'] = $i;
    }

    return $output;
  }

  // 通过页偏移量取真实页数，并设置每页记录数
  function get_page_number($per_page = 0)
  {
    if (!empty($per_page))
    {
      $this->per_page = $per_page;
    }

    $cp = $this->CI->input->get_post($this->current_page_var);
    $cp = ($cp === false || !ctype_digit($cp) ? '0' : $cp);

    return floor($cp / $this->per_page);
  }

  function get_per_page()
  {
    return $this->per_page;
  }

  function set_max_total()
  {
    $this->total_rows = ($this->total_rows > $this->max_total_rows ? $this->max_total_rows : $this->total_rows);
  }
}


/* End of file MY_Pagination.php */
/* Location: ./application/libraries/MY_Pagination.php */

pagination.vue

<template>
  <div class="server-pagination" :class="customClass" v-if="typeof pager.pages === 'object' && pager.pages !== null">
    <ul class="pagination" @click.prevent="onPagerClick">
      <li v-if="pager.first >= 0"><a href="" rel="first" :data-page="pager.first">第一页</a></li>
      <li v-if="pager.previous >= 0"><a href="" rel="prev" :data-page="pager.previous">上一页</a></li>
      <li v-for="item in pager.pages" v-if="item.number !== ''">
        <a href="" :data-page="item.number">{{ item.text }}</a>
      </li>
      <li class="active" v-else>
        <span>{{ item.text }}</span>
      </li>
      <li v-if="pager.next >= 0"><a href="" rel="next" :data-page="pager.next">下一页</a></li>
      <li v-if="pager.last >= 0"><a href="" rel="last" :data-page="pager.last">最后一页</a></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'ServerPagination',

  props: {
    pager: {
      type: null,
      default() {
        return {};
      }
    },

    customClass: {
      type: String,
      default: ''
    }
  },

  methods: {
    onPagerClick(event) {
      const target = event.target;

      if (target.tagName.toLowerCase() !== 'a') {
        return;
      }

      const pageNumber = Number(target.getAttribute('data-page'));

      this.$emit('change', pageNumber);
    }
  }
};
</script>

<style scoped>
</style>

Test.php

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Test extends MY_Controller
{
  public function __construct()
  {
    parent::__construct();
  }

  public function index()
  {
    $this->load->library('pagination');

    $config = [
      'total_rows' => 500,
    ];

    $this->pagination->initialize($config);

    $output = [
      'pager' => $this->pagination->get_links(),
    ];

    // TODO: 这里要把 $output JSON 输出给浏览器
  }
}


/* End of file Test.php */
/* Location: ./application/controllers/Test.php */

test.vue

<template>
  <section>
    <server-pagination :pager="pager" @change="pageChange"></server-pagination>
  </section>
</template>

<script>
export default {
  name: 'Test',

  data() {
    return {
      pager: {}
    }
  },

  methods: {
    pageChange(page) {
      this.refresh(page);
    },

    refresh(page) {
      // TODO: 这里发 ajax 请求数据，page 是页码（CodeIgniter 分页类里用的偏移量）
      // 然后把获取到的分页 JSON 渲染模板
      this.pager = respose.pager;
    }
  }
}
</script>

<style scoped>
</style>