I use bootstrap table for present my data.

Everything works, but there is dropdown to select number of items per page

There is my code. Do you have any idea, maybe there is some issues with versions?

<link rel="stylesheet" href="//maxcdn.bootstrapcdn/bootstrap/3.3.7/css/bootstrap.min.css" >

<link rel="stylesheet" href="//cdnjs.cloudflare/ajax/libs/bootstrap-table/1.11.0/bootstrap-table.min.css">
<link rel="stylesheet" href="//code.jquery/ui/1.12.1/themes/base/jquery-ui.css">

<script src="//code.jquery/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>

<script src="//code.jquery/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="crossorigin="anonymous"></script>

<script src="//cdnjs.cloudflare/ajax/libs/bootstrap-table/1.11.0/bootstrap-table.min.js"></script>
<script src="//cdnjs.cloudflare/ajax/libs/bootstrap-table/1.11.0/locale/bootstrap-table-en-US.min.js"></script>
...
<table id="goalsListTable"
       class="table table-striped"
       data-toggle="table" data-url="@Url.Content("~/Goal/GoalListJson")" 
       data-side-pagination="server"
       data-pagination="true"
       data-page-list="[10, 25, 50]"
       data-page-size="25">
    <thead> ...

I use bootstrap table for present my data.

Everything works, but there is dropdown to select number of items per page

There is my code. Do you have any idea, maybe there is some issues with versions?

<link rel="stylesheet" href="//maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css" >

<link rel="stylesheet" href="//cdnjs.cloudflare./ajax/libs/bootstrap-table/1.11.0/bootstrap-table.min.css">
<link rel="stylesheet" href="//code.jquery./ui/1.12.1/themes/base/jquery-ui.css">

<script src="//code.jquery./jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>

<script src="//code.jquery./ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="crossorigin="anonymous"></script>

<script src="//cdnjs.cloudflare./ajax/libs/bootstrap-table/1.11.0/bootstrap-table.min.js"></script>
<script src="//cdnjs.cloudflare./ajax/libs/bootstrap-table/1.11.0/locale/bootstrap-table-en-US.min.js"></script>
...
<table id="goalsListTable"
       class="table table-striped"
       data-toggle="table" data-url="@Url.Content("~/Goal/GoalListJson")" 
       data-side-pagination="server"
       data-pagination="true"
       data-page-list="[10, 25, 50]"
       data-page-size="25">
    <thead> ...

• javascript
• html
• twitter-bootstrap
• twitter-bootstrap-3
• bootstrap-table

1 Answer 1

Since you are using bootstrap table you can use page pageSize property like:

<script>
    $('#goalsListTable').bootstrapTable({
        pagination: true,
        pageSize: 25, //your page size here
        pageList: [25, 50, 75, 100]//list of page sizes
    });
</script>

And here a basic codepen example of this script overwriting the data-page-list and data-page-size values:

http://codepen.io/egerrard/pen/qRrEap

Or another example from their documentation is to use the data-query-params value:

<table data-toggle="table"
       data-url="https://api.github./users/wenzhixin/repos"
       data-query-params="queryParams"
       data-pagination="true"
       data-search="true"
       data-height="300">
</table>

And then declare queryParams the way you want it:

function queryParams() {
    return {
        type: 'owner',
        sort: 'updated',
        direction: 'desc',
        per_page: 25,
        page: 1
    };
}

Example: http://jsfiddle/wenyi/e3nk137y/42/

UPDATE

The code you pasted was missing the bootstrap JavaScript link. That is required for the dropdowns to work correctly. Include that link in your code like so:

<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

The codepen has been updated with a working example.