gpt4 book ai didi

javascript - Bootstrap 表 "item per page"下拉列表不工作

转载 作者:行者123 更新时间:2023-11-28 01:02:04 25 4
gpt4 key购买 nike

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

一切正常,但有一个下拉菜单可以选择每页的项目数

enter image description here

这是我的代码。 你有什么想法,也许版本有问题?

<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> ...

最佳答案

由于您使用的是 Bootstrap 表,因此您可以使用页面 pageSize 属性,例如:

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

这里有一个基本的代码笔示例,该脚本覆盖了 data-page-listdata-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 已更新为一个工作示例。

关于javascript - Bootstrap 表 "item per page"下拉列表不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41748392/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com