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

Share Improve this question Follow edited Jan 19, 2017 at 18:07 Eric G 2,61711 gold badge1616 silver badges2222 bronze badges asked Jan 19, 2017 at 17:47 JacekJacek 12.1k2626 gold badges7676 silver badges128128 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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.