Dynamically setting the page variable for a datatable-pager only changes the UI about vuejs-datatable HOT 22 CLOSED

So I have this datatable-pager
<datatable-pager type="abbreviated" v-model="page" :per-page="per_page"></datatable-pager>
And the 'page' variable set up:

data() {
      return {
          page: 1,
          per-page: 10
      }
}

Whenever I set the 'page' variable to a different value from the code dynamically, like this for example:
this.page = 3;
The only thing that changes is the UI of the datatable-pager to the selected page, but the displayed data doesn't change, it is still the data of the previous page.

You probably need to call this.$refs.vueDatatable.processRows(); after updating the page variable.
Please see issues #63 and #43

Please be more clear. My "this.$refs" is an empty object. How do I include my vue datatable in $refs? and is 'vueDatatable' supposed to be the table ID? Thank you.

Sorry, I assumed you had used refs before...
Give your datatable a ref i.e. <datatable ref="myAwesomeTable" ..... > </datatable>
then call it as this.$refs.myAwesomeTable.processRows();

from vuejs-datatable.

As I said, that is exactly what I'm doing and it doesn't work. The issue persists.

Please create a fiddle/share code

from vuejs-datatable.

Try out the v2.0.0-alpha.0 that I've just published. If this version does not solve your issue, please post a fiddle with a minimal repro, or we can't help.

from vuejs-datatable.

So I have this datatable-pager

<datatable-pager type="abbreviated" v-model="page" :per-page="per_page"></datatable-pager>

And the 'page' variable set up:

data() {
      return {
          page: 1,
          per-page: 10
      }
}

Whenever I set the 'page' variable to a different value from the code dynamically, like this for example:

this.page = 3;

The only thing that changes is the UI of the datatable-pager to the selected page, but the displayed data doesn't change, it is still the data of the previous page.

You probably need to call this.$refs.vueDatatable.processRows(); after updating the page variable.
Please see issues #63 and #43

from vuejs-datatable.

So I have this datatable-pager
<datatable-pager type="abbreviated" v-model="page" :per-page="per_page"></datatable-pager>
And the 'page' variable set up:

data() {
      return {
          page: 1,
          per-page: 10
      }
}

Whenever I set the 'page' variable to a different value from the code dynamically, like this for example:
this.page = 3;
The only thing that changes is the UI of the datatable-pager to the selected page, but the displayed data doesn't change, it is still the data of the previous page.

You probably need to call this.$refs.vueDatatable.processRows(); after updating the page variable.
Please see issues #63 and #43

Please be more clear. My "this.$refs" is an empty object. How do I include my vue datatable in $refs? and is 'vueDatatable' supposed to be the table ID? Thank you.

from vuejs-datatable.

this.$refs.myAwesomeTable.processRows();

Oh, that's awesome. Seems like you learn something new about Vue everyday, thank you.

However, "processRows();" doesn't fix the bug I'm facing in this thread. When I set the page to 1, the UI of the pager displays page 1 but the data displayed is still unchanged.

from vuejs-datatable.

this.$refs.myAwesomeTable.processRows();

Oh, that's awesome. Seems like you learn something new about Vue everyday, thank you.

However, "processRows();" doesn't fix the bug I'm facing in this thread. When I set the page to 1, the UI of the pager displays page 1 but the data displayed is still unchanged.

as soon as you change page number, call the function processRows() to load data for that page i.e. in your code:
this.page = 1 ;
this.$refs.table.processRows(); // should be the next line. I haven't tried but I believe it should work

from vuejs-datatable.

this.$refs.myAwesomeTable.processRows();

Oh, that's awesome. Seems like you learn something new about Vue everyday, thank you.
However, "processRows();" doesn't fix the bug I'm facing in this thread. When I set the page to 1, the UI of the pager displays page 1 but the data displayed is still unchanged.

as soon as you change page number, call the function processRows() to load data for that page i.e. in your code:
this.page = 1 ;
this.$refs.table.processRows(); // should be the next line. I haven't tried but I believe it should work

As I said, that is exactly what I'm doing and it doesn't work. The issue persists.

from vuejs-datatable.

@GerkinDev Thank you, however it seems like the version on npm is 1.7.0.
https://www.npmjs.com/package/vuejs-datatable
How can I update mine to 2.0 if I installed the package via npm?

from vuejs-datatable.

The 2.0.0 is still in alpha, to avoid unexpected NPM auto-update, because it somewhat breaks the backward compatibility. I'm waiting for some user feedbacks to publish it as a stable version.

To install the alpha, just run the following command:

npm install vuejs-datatable@alpha

from vuejs-datatable.

@GerkinDev Mmhm I see, sounds great.
I just installed the alpha version, so how can I include it now? this way doesn't work (undefined):
import DatatableFactory from 'vuejs-datatable@alpha';

Also, I just wanted to say that I'll keep providing you guys feedback, help with bugs, and I'll even be glad to help with coding and improvements in the repository. Keep up the awesome work.
Thanks again.

from vuejs-datatable.

For the import, just keep importing vuejs-datatable. The @alpha at the end of the command when doing the npm install is called a dist-tag, and only serves as a version alias (right now 2.0.0-alpha.1).

PS: About contributions, it would be great ;) any kind of contribution is welcome, as far as they respect the structure of the project and are correctly linted & tested. I'll write a Contributing guide soon.

from vuejs-datatable.

@GerkinDev As of today, the issue still persists with alpha version 2.0.0. Confirmed yesterday.

from vuejs-datatable.

Okay, so as I said, please send a minimal repro or a failing test case so that I can see exactly in which circumstances you experience your issue.

https://jsfiddle.net/boilerplate/vue

from vuejs-datatable.

@GerkinDev Thank you, but there's no need. After reading the pager's vue source code, I found out that a function called setPageNum is called when a pager button is clicked. So I tried doing this:

this.$refs.mainTable.page = 3;

And it set only the data of the datatable to page 3, and not the pager UI. So I set the page number in both the pager and the datatable, like so:

this.page = 3; // Page variable for pagination component
this.$refs.mainTable.page = 3; // Page variable of the datatable

And that fixed the issue. Which means that you're not watching the pager variable and you're not setting the datatable's page number accordingly when the pager value changes (when dynamically set, $emit isn't called). The solution is that both variables should watch each other and change when the other changes.

It's funny that what @sobiero suggested wasn't even related to the issue. Or perhaps it just doesn't work as expected or at all.

from vuejs-datatable.

Okay thank you for your feedback, I'm currently working on it for a fix commit. I keep you updated ;)

🍻 Cheers!

from vuejs-datatable.

Okay thank you for your feedback, I'm currently working on it for a fix commit. I keep you updated ;)

🍻 Cheers!

Thank you for acknowledging the issue.
For the time being, is there an event that fires when the datatable has finished rendering so I can craft something that fixes it temporarily until version 2.0 is stable? The fix I mentioned only works when the datatable has been created, and I have no means of knowing when.

Thanks again.

from vuejs-datatable.

Okay thank you for your feedback, I'm currently working on it for a fix commit. I keep you updated ;)

🍻 Cheers!

Hey again, guess you've been busy.
I'm still waiting for an answer regarding my question above.
Thank you.

from vuejs-datatable.

Hi,

I should have mentionned the issue in my commits, sorry.
I'm currently doing quite an important refactor that should correct this issue. I'm still on it, and most tests are green.
The targeted behavior is to emit an event (vuejs-datatable::page-changed) that is listened by pagers when the page change. This event will carry the new page and refresh all pagers.

I'm too far from this code right now to imagine how to bypass this issue. But I should have something working in the current of the week.

from vuejs-datatable.

Hi,

I should have mentionned the issue in my commits, sorry.
I'm currently doing quite an important refactor that should correct this issue. I'm still on it, and most tests are green.
The targeted behavior is to emit an event (vuejs-datatable::page-changed) that is listened by pagers when the page change. This event will carry the new page and refresh all pagers.

I'm too far from this code right now to imagine how to bypass this issue. But I should have something working in the current of the week.

I actually managed to fix this issue in the last few minutes.

@GerkinDev Thank you, but there's no need. After reading the pager's vue source code, I found out that a function called setPageNum is called when a pager button is clicked. So I tried doing this:

this.$refs.mainTable.page = 3;

And it set only the data of the datatable to page 3, and not the pager UI. So I set the page number in both the pager and the datatable, like so:

this.page = 3; // Page variable for pagination component
this.$refs.mainTable.page = 3; // Page variable of the datatable

And that fixed the issue. Which means that you're not watching the pager variable and you're not setting the datatable's page number accordingly when the pager value changes (when dynamically set, $emit isn't called). The solution is that both variables should watch each other and change when the other changes.

It's funny that what @sobiero suggested wasn't even related to the issue. Or perhaps it just doesn't work as expected or at all.

By using the solution I explained to you and using Vue hooks, I crafted a temporary fix. The answer to my question of how to know when the datatable is rendered and ready is using a hook on the datatable element's mounted function.

Here's an example.

<datatable ref="mainTable" :columns="testColumns" :data="testRows" @hook:mounted="tableMounted"></datatable>

tableMounted: function() {
    if (this.$refs.mainTable !== undefined) {
        this.$refs.mainTable.page = 1; // Page variable of the datatable (data to show)
        this.page = 1; // Page variable for pagination component (pager UI)
    }
}

With this fix in action, when you use the same table while constantly changing its columns and rows in real-time for your needs, call this.tableMounted() every time you change the table's columns and data, and hook the tableMounted function to the mounted event in case you're using nested tables, like in my case. (I have a sub table that shows when you expand a row, and I have to reset the page to 1 every time I expand a different row which might have a different number of pages and data)

Side Note
Version 2.0 alpha is super unstable right now. It always throws me errors when I change the datatable's columns and rows in realtime, among other destructive behaviors. Which is why I have reverted to version 1.7 and applied my own fixes for everything. The only thing I have left is basically fixing the sorting behavior and modes, which is totally crazy right now.

from vuejs-datatable.

Hi,

I've fixed the issue in the latest development version (see the upcoming commit referencing this issue). Unfortunately, I won't release it now because I won't publish anything without proper documentation, and the recent changes completely broke the documentation generator.

Are you OK to run a development version for check purposes ? I'll add notes in the README describing how to use in-dev versions.

from vuejs-datatable.

Hi,

I've fixed the issue in the latest development version (see the upcoming commit referencing this issue). Unfortunately, I won't release it now because I won't publish anything without proper documentation, and the recent changes completely broke the documentation generator.

Are you OK to run a development version for check purposes ? I'll add notes in the README describing how to use in-dev versions.

Hey, how are you doing?
I'll gladly check out the development version. Hopefully it won't mess up my system too much, as version 2.0 alpha did.

from vuejs-datatable.