Pagination change event not firing

[HDShabe]

Development Relevant Information:

• BalmUI version: 10.20.0
• Browser: Chrome

Hi,

I've got a few datatables which have pagination in them but i've never been able to get the @change event working on them. I saw this issue a while back (#144) and thought it would fix it but only just got around to trying to implement it and it doesn't seem to work still.

  <ui-table :data="requestData"
                      :thead="tHead"
                      :tbody="tBody"
                      :default-col-width="200"
                      show-progress
                      fullwidth>

                <ui-pagination v-model="page"
                               :total="total"
                               show-total
                               @change="onPage">
                </ui-pagination>
   </ui-table>

    methods: {
            onPage(page) {
                console.log(page);
            },

I can get around this with a watch:

        watch: {
            page: function (page) {
                //event here now fires
            }
        },

As a side question, how was the pagination/datatable intended to be used? Currently I send the page number and results per page to the server and paginate there, just sending back the information for the current page.

Is this correct, or would the intended use to be send the entire dataset back and have the datatable work out what it wants to currently display from the full dataset?

Cheers

[guxuerui]

I think that there is no event named @change, maybe you can use the event @update:modelValue, and then you can get the changed page number~

[HDShabe]

I've just tried with @update:modelValue over @change and that seems to work. Following this, can we then remove the @change even from the documentation including the examples? It causes some confusion.

To go back to my other question, am I using pagination correctly?

As a side question, how was the pagination/datatable intended to be used? Currently I send the page number and results per page to the server and paginate there, just sending back the information for the current page.

Is this correct, or would the intended use to be send the entire dataset back and have the datatable work out what it wants to currently display from the full dataset?

I haven't looked at the inner workings of the datatable, but for example if I give it 100 results and set it to 10 results per page on the control, it still just displays all of them, so I'm assuming i'm correct in paginating the data on the server?

Cheers

[elf-mouse]

Hi @HDShabe , Documentation errors have been fixed. Thank you very much~

And pagination component, in general only need to use page, total and pageSize three parameters to control the front-end display. like this:

<ui-pagination v-model="page" :total="total" :page-size="pageSize"></ui-pagination>

• page and pageSize need to be passed to the back-end api
• total must be returned by the server

[HDShabe]

Perfect, thanks for you support @elf-mouse, that's how I had it set up.

Cheers.