Javascript “引导表”;“每页项目”;下拉列表不工作
我使用引导表来显示我的数据 一切正常,但有下拉列表选择每页的项目数 这是我的密码您是否知道,版本可能有问题?Javascript “引导表”;“每页项目”;下拉列表不工作,javascript,html,twitter-bootstrap,twitter-bootstrap-3,bootstrap-table,Javascript,Html,Twitter Bootstrap,Twitter Bootstrap 3,Bootstrap Table,我使用引导表来显示我的数据 一切正常,但有下拉列表选择每页的项目数 这是我的密码您是否知道,版本可能有问题? <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/boo
<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> ...
...
...
因为您使用的是引导表,所以可以使用pageSize属性,如:
<script>
$('#goalsListTable').bootstrapTable({
pagination: true,
pageSize: 25, //your page size here
pageList: [25, 50, 75, 100]//list of page sizes
});
</script>
然后按照您想要的方式声明queryParams
:
function queryParams() {
return {
type: 'owner',
sort: 'updated',
direction: 'desc',
per_page: 25,
page: 1
};
}
例如:
更新
粘贴的代码缺少引导JavaScript链接。这是下拉列表正常工作所必需的。在代码中包含该链接,如下所示:
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
代码笔已使用一个工作示例进行了更新。我看到了该示例的页面,但问题在于“数据页面列表”,它驱动显示每页的项目数。因此,我认为:/
数据页列表
应该被您在我的回答中分配给页列表
的这个新值覆盖。您可能必须将该脚本放在表下面,以便在初始化后运行。我用一个代码笔更新了我的答案,显示它正在工作。我描述的问题出现在您在JSFIDLE上的示例中。尝试向下滚动,然后单击下拉菜单。它应该用数据页中的值[25,50,75,100]展开-list@Jacek我发现了问题。您的代码不包括下拉列表所依赖的引导JavaScript文件。我的答案中的代码笔链接已经更新。现在一切正常。非常感谢:)
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>