引导表＆＃34;每页项目＆＃34;下拉列表无效

Question

我使用bootstrap表来显示我的数据。

一切正常，但每页选择项目数有下拉

有我的代码。 您有任何想法，也许版本存在一些问题吗？

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

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

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

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

<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.0/bootstrap-table.min.js"></script>
<script src="//cdnjs.cloudflare.com/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> ...

Answer 1

由于您使用的是bootstrap表，因此您可以使用page pageize属性，如：

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

此处此脚本的基本codepen示例将覆盖data-page-list和data-page-size值：

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

或者他们的文档中的另一个例子是使用data-query-params值：

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

然后按照您希望的方式声明queryParams：

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

示例：http://jsfiddle.net/wenyi/e3nk137y/42/

<强> 更新

您粘贴的代码缺少bootstrap JavaScript链接。这是下拉列表正常工作所必需的。在代码中包含该链接，如下所示：

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

使用工作示例更新了codepen。