Added disablePaginationNavigation setting

[crashkonijn]

A fix for #68

Please let me know if you'd like me to change something before it's good enough to merge.

Thanks!

[remkobrenters]

+1

[kenberkeley]

You may notice that the first result page of google search does not have prev button...

[kenberkeley]

[kenberkeley]

That's why I am not going to merge your PR...
I feel so sorry but I have to keep my principle of concise and precise.

[kenberkeley]

But you can make your forked repo a npm package, such as vue2-datatable-fxck-kenberkeley-not-merge-my-pr

[crashkonijn]

Well that's a design choice that google made, for my project I do require to show them.

I understand that not everyone wants to show them like that, that's why I made it optional. I did notice that I accidentally enabled it by default, but I could change that back to false.

What's wrong with giving the users of your package options?

[kenberkeley]

There are already too many props pal...

[kenberkeley]

https://github.com/OneWayTech/vue2-datatable/blob/master/src/_mixins/props.js

[crashkonijn]

I know there's a couple props, I've seen it when I added the the disablePaginationNavigation prop.

Anyway, personally I don't see the problem with an extra prop especially since it's not required. Like I said, all it does is give the users of this package more control over how they'd like to show the dataTable.

Also please note that the original dataTables does show the prev and next buttons.

[kenberkeley]

Workaround:

<template>
  <div>
    <code>query: {{ query }}</code>
    <datatable v-bind="$data" />
  </div>
</template>
<script>
import mockData from '../_mockData'

export default {
  data: () => ({
    columns: [
      { title: 'User ID', field: 'uid', sortable: true },
      { title: 'Username', field: 'name' },
      { title: 'Age', field: 'age', sortable: true },
      { title: 'Email', field: 'email' },
      { title: 'Country', field: 'country' }
    ],
    data: [],
    total: 0,
    query: {}
  }),
  watch: {
    query: {
      handler (query) {
        mockData(query).then(({ rows, total }) => {
          this.data = rows
          this.total = total

          // you are welcome!
          this.$nextTick(() => {
            $(this.$el)
              .find('a.page-link')
              .find('.fa-arrow-left, .fa-arrow-right')
              .closest('li.page-item')
              .remove()
          })
        })
      },
      deep: true
    }
  }
}
</script>

[crashkonijn]

I'm a bit confused; your example completely removes the next and prev buttons, which is the complete opposite of what I wanted.

I want the buttons to be always visible, but in a disabled state when not clickable.

Edit:
The problem that I can't customize it is because the buttons are being disabled via vue itself. If we instead change it to being disabled via css then anyone that would also like to keep showing them could just overrule that css. That would remove the need for an extra prop and keeps the options open for everyone right?

[kenberkeley]

Pardon me for going to bed early last night (Chinese New Year haha)...

[kenberkeley]

Hey dude, you don't need to waste too much time on it as it's not worth it.
Copy the whole project to your src/components and customize it yourself would be much better.

[kenberkeley]

I just want to keep this repo as simple as it can.
There are plenty of feature requests in the issues. In most of the cases, I might suggest that they should DIY since most of the requests are only for their own projects, not for universal purpose.

[crashkonijn]

Thanks for your reaction @kenberkeley!

Unfortunately copying and editing the code would mean that we loose compatibility with this original project, which is not what we want. One of the main reasons of using 3rd party plugins is also that if there are issues or something that those will probably be fixed by someone else.

Anyway, thanks for your attention to this issue. If you ever change your mind about this feature please let me know :)

[kenberkeley]

Temporary solutions:

• https://docs.npmjs.com/private-modules/intro
• https://stackoverflow.com/questions/17509669/how-to-install-an-npm-package-from-github-directly