Bootstrap-table: Allow "All" to the data-page-list

[iamthestreets]

Hi,

I know there is the toggle pagination, but it would be much easier and cleaner (most importantly cleaner). I have to many buttons as it is and would be much better if I can do exactly what the toggle pagination button does, but using an All option in the data-page-list. e.g. data-page-list="[5, 10, 20, 50, 100, ALL]"

[yurii-polishchuk]

Hello,

You can try toggle-pagination: http://issues.wenzhixin.net.cn/bootstrap-table/#424.html

[iamthestreets]

Thank for the reply, but I do not want to add another button. I am using a lot of buttons already and besides it makes more sense to add an "All" option to the data-page-list. Basically do exactly what the button does to load all data on one page by using an All option

[wenzhixin]

Got it @iamthestreets , I will consider your suggestion. You can use toggle-pagination first.

[iamthestreets]

Ok, thanks!

[djhvscf]

@iamthestreets here is the new feature https://github.com/wenzhixin/bootstrap-table/pull/597 now it is an opened pull request

[djhvscf]

@wenzhixin can we close this issue?

[djhvscf]

Hey @wenzhixin you can close this one

[iamthestreets]

So sorry for the delay on this, but I have set my page list to [5, 10, 20, 50, 100, 200, All] but my table currently only has 24 total rows so the page list select only shows 5, 10, 20, 50 and I know the user can just click on 50 to show all, but it would be better if it showed All after 20 instead of 50 here is an example. I have 24 rows in total and my page list is set to [5, 10, 20, 50, 100, 200, All] so when I select the records to show per page it should list like this 5, 10, 20, All instead of 5, 10, 20, 50. Technically All should always be shown as the last option in the drop down.

[wenzhixin]

We will consider your advice @iamthestreets.

[djhvscf]

I think this option should be optional

[kct3937]

So what is the outcome? I see the first 5 entries only and unless ALL is in the first 5, I'm SOL!

[Shobana16]

[Shobana16]

Never mind. It is working fine. thank you.

[djhvscf]

@Shobana16 you have to add something like this: data-page-list="[5, 10, 15, 20, 'All']"

[Shobana16]

@djhvscf Thank you for the response. But the problem was i missed the bootstrap.min.js to load into my html. thats why the list was not opened in button. Included it and worked fine.
And yes i have already included "All" as well and everything is working fine. Thank you for the input.

[dHumanities]

My situation is when I used data-page-list="[5, 10, 15, 20, 'All']" in the tag. Then All will show as NaN.

[critt3rs]

I have the same situation like @dHumanities , when set the locate language to en-US language, data-page-list="[5, 10, 15, 20, 'All']" will work fine. But when i change to ms-MY, the 'All' will show as NaN.

Does page-list="[5, 10, 15, 20, 'All']" only work with en-US? I think it will be the same with other Local language setting.

[abhsk1]

@wenzhixin This bug has some boundary condition which could be fixed
https://github.com/wenzhixin/bootstrap-table/issues/2617

[fynman]

Hi,

Is the NaN issue solved?

Regards,
Bart

[sominlee74]

With relevance with this post,
data-page-size = "All" in <table> tag is working, but data-page-size = "ALL" is not working properly, with bootstrapTable v1.11.0 by <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.0/bootstrap-table.min.js">

[6ril00]

Hello,
I give the solution i just found, for this problem (NaN issue with All value on pageList parameter).
I you use translation, and so have changed the formatAllRows string value from 'All' to another string, you have to use this another string for paginating. By example, if you have changed:

 $.fn.bootstrapTable.locales['fr-FR'] = {
 formatAllRows: function () {
            return 'Tous';
        }
    };

You have to write:
data-page-list="[10, 25, 50, 100, Tous]"
or in js:
pageList : [10,20,30,'Tous']

(tested in 1.11.1)

[Ericzhiluo]

The NaN issue is caused by djhvscf's commit. The added functionality did not consider multi-language. It will only work for en-US. To fix this, simply go to your bootstrap-table-locale-all.js file and find the languages that you are using, and add formatAllRows: function () { return 'All'; } to the bottom.
However, if you want to show the translated word for "All" in the button, you need to return the translated word. If you use Chinese, for example, you will be returning "全部" instead and data-page-list need to become data-page-list="[10, 25, 50, 100, 全部]"

@wenzhixin, this is clearly a bug, please take a look at it and fix it when you have time.

An example:

$.fn.bootstrapTable.locales['zh-CN'] = {
        formatLoadingMessage: function () {
            return '正在努力地加载数据中，请稍候……';
        },
        formatRecordsPerPage: function (pageNumber) {
            return '每页显示 ' + pageNumber + ' 条记录';
        },
        formatShowingRows: function (pageFrom, pageTo, totalRows) {
            return '显示第 ' + pageFrom + ' 到第 ' + pageTo + ' 条记录，总共 ' + totalRows + ' 条记录';
        },
        formatSearch: function () {
            return '搜索';
        },
        formatNoMatches: function () {
            return '没有找到匹配的记录';
        },
        formatPaginationSwitch: function () {
            return '隐藏/显示分页';
        },
        formatRefresh: function () {
            return '刷新';
        },
        formatToggle: function () {
            return '切换';
        },
        formatColumns: function () {
            return '列';
        },
        formatAllRows: function () {
            return 'All'; // or return your translated word "全部"
        }
    };

[djhvscf]

You're right! I think we can change 'All' to -1 (in code)

[xiangxingze]

选择 all 后加载数据过程中浏览器卡死，还需要加载其他js 吗?

[djhvscf]

@xiangxingze
Can you translate this issue to english, please?