引导表“每页项目”下拉列表不起作用

Question

我使用引导表来呈现我的数据。

一切正常，但有下拉菜单选择每

页

有我的代码项目的数量。 你有什么想法，也许版本有一些问题？

<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

由于您使用的自举表，您可以使用页面pageSize属性，如：

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

在这里，这个脚本覆盖0​​和data-page-size值的基本codepen例如：

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/

UPDATE

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

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

该codepen已更新为一个工作示例。