ProTable pagination prevent leaving when you click other page numbers 1

95 阅读1分钟

Background

Our project has a function that when you edit in a table list that supports saving, downloading, and refreshing, you can't leave without confirmation, so when you want to click the other page or change the page size per page, it should be a modal confirm that gonna tell you to leave or not? if you confirm with "yes", you will go to the page you want, but if you click "No", you will stay on the current page.

But Procomponets uses the third part pagination and it is a little deeply related to the pagination, when you change the pageSize/pageCurrent, it will request data source by default. I checked the pagination source code and found the "onchange" event can't be stopped, it is just a listener event, so I think it may not support the function.

After that, I found the prevent way to disable other page buttons, but it is not friendly to the customers.

On the second day, I almost finished all of my work, I had time to start thinking about if there was no way to solve this problem. fortunately, I found a way to control the current page, and not use its default inner pagechange function which means all pages changed will on my control, there will be a lot of work to do, but there is no better way.

process

I built an umi project, and tested pagination support using the current page to control, when you click other page numbers, it won't change the current, oh, that's my want.

Then, I set a current variable to control the pagination.

But, though I'm not changing the other pagenumber, it still fetches a request, why? I feel it will be the main challenge for me.

I found the document to find a way to prevent requests, but nothing was mentioned. so I can only find the source code. (source code helps me a lot, you can find some functions or variables that are not exposed but are helpfull)

image.png

In this picture, we can infer that if I change the request function to null or false when I change the page number, it will not fetch a request. the result as I thought, it worked.

source code

image.png

preview

image.png

summary

At last, fortunately, I succeed to complete this function.