Pagination arrow wrong direction

[sscholle]

I cannot understand how the Pagination is showing the wrong direction:

The HTML Output is as follows: <a href="#" class="page-link"><svg class="svg-inline--fa fa-arrow-right fa-w-14" aria-hidden="true" data-fa-processed="" data-prefix="fa" data-icon="arrow-right" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path /></svg><!-- <i class="fa fa-arrow-right"></i> --></a>

Why is the wrong style being applied?

[kenberkeley]

BootStrap4?

[sscholle]

Using Bootstrap-sass: https://www.npmjs.com/package/bootstrap-sass which is Bootstrap v3

[kenberkeley]

no idea at all... since your DOM structure is quite different from the original one

[sscholle]

It seems to happen when I have 2 or 3 pages. And I switch between Page 1 and Last Page, the Arrow does not change in direction. With 3 pages, I can switch to Page 1, then 2, then 3. No Problem. But If i switch between Page 1 and 3, the arrow does not change.

[kenberkeley]

jsfiddle / jsbin / codepen ?

[sscholle]

Do you have one I could fork?

[kenberkeley]

Or you can copy-paste your code here

[sscholle]

I adapted the queryProcessor from your advanced example:

import uniq from 'lodash/uniq'
import orderBy from 'lodash/orderBy'
const typeOf = o => Object.prototype.toString.call(o).slice(8, -1).toLowerCase()
const purify = o => JSON.parse(JSON.stringify(o)) // purify data

/**
 * Statically processes a data set based on a query
 * @param {*} query defines how to transform the data
 * @param {Object[]} data that data to be transformed
 * @param {String[]} filterColumns the columns that may be filtered against
 */
export default function queryProcessor(query, data, filterColumns) {
  query = purify(query)
  const { limit = 10, offset = 0, sort = '', order = '' } = query

  let rows = data;

  filterColumns.forEach(field => {
    switch (typeOf(query[field])) {
      case 'array':
        rows = rows.filter(row => query[field].includes(row[field]))
        break
      case 'string':
        rows = rows.filter(row => row[field].toLowerCase().includes(query[field].toLowerCase()))
        break
      default:
        // nothing to do
        break
    }
  })

  if (sort) {
    rows = orderBy(rows, sort, order)
  }

  const res = {
    rows: rows.slice(offset, offset + limit),
    total: rows.length,
  }

  return Promise.resolve(purify(res))
}

i'm calling this function when the query is changed:

          queryProcessor(query, data, this.filterFields)
          .then(({ rows, total }) => {
            this.dataTable.data = rows
            this.dataTable.total = total
          })

table config

const config = {
  supportBackup: false,
  supportNested: false,
  //tblClass: 'table-bordered',
  //tblStyle: 'color: #666',
  pageSizeOptions: [2, 3, 5, 10, 15, 20],
  HeaderSettings: false,
  columns: [
          { title: 'Student Name', field: 'student_name', label: 'Student Name', sortable: true },
          { title: 'Course', field: 'course_name', sortable: true },
          ...
],
  data: [],
  selection: [],
  total: 0,
  query: {},
  xprops: {
    eventbus: new Vue(), // only for the current Datatable instance
  }
}

[kenberkeley]

but it's not gonna make a fatal logical mistake, pal...