Bootstrap Table分页设置问题：如何默认显示10条/页而非全部

Absolutely, this is a super common tweak with Bootstrap Table—let me walk you through exactly how to fix it so your table loads with 10 rows by default, while keeping the option for users to switch to showing all rows or other custom sizes.

1. Core Configuration Fix #

The issue you’re facing happens because you haven’t explicitly set the default page size in your table’s config, and the "All" option might not be properly defined in the page size dropdown. Here’s how to set it up:

Option A: HTML Data Attributes #

If you’re initializing the table directly in your HTML, add these data attributes:

<table id="your-table-id"
       data-toggle="table"
       data-pagination="true"
       data-page-size="10" <!-- Sets default to 10 rows -->
       data-page-list="[10, 25, 50, 'All']" <!-- Defines selectable sizes -->
       data-url="your-data-endpoint">
  <!-- Your table columns go here -->
</table>

Option B: JavaScript Initialization #

If you prefer initializing via JS (great for dynamic tables), use this syntax:

$('#your-table-id').bootstrapTable({
  url: 'your-data-endpoint',
  pagination: true,
  pageSize: 10, // Default rows per page
  pageList: [10, 25, 50, "All"] // Available options for users
});

2. Fixing the "Reverts to All" Bug #

If you’re still seeing the table jump back to showing all rows after selecting a different size, check these two things:

• No accidental resets: Make sure you don’t have custom JS code that’s calling bootstrapTable('refresh') without preserving the page size setting. If you do need to refresh, pass the {pageSize: $('#your-table-id').bootstrapTable('getOptions').pageSize} parameter to keep the user’s selection.
• Update Bootstrap Table: Older versions had minor bugs with the "All" option’s persistence. Upgrading to the latest stable release will resolve most of these edge cases.

3. What to Expect After Setup #

Once you apply these changes:

• Your table will load with 10 rows on the first page, every time.
• Users can use the page size dropdown to switch to 25, 50, or "All" rows whenever they want.
• The selected page size will stay in place when navigating between pages or refreshing the table (as long as you don’t have conflicting custom code).

内容的提问来源于stack exchange，提问作者Esmat