【JS】使用bootstrap table时不能显示筛选列和分页每页显示的行数？

Z时代
2024-01-10
分类：技术分享

在学习bootstrap-table时遇到不能显示列筛选和分页每页显示行数，点击的时候完全没反应。有没有大神能帮忙解答一下？

@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Index.cshtml";
}
<script>
var clients = [];
$(function () {
clients = clientsInit();
//1.初始化Table
var oTable = new TableInit();
oTable.Init();
})
function btn_add() {
$.modalOpen({
id: "Form",
title: "新增用户",
url: "/SystemManage/User/Form",
width: "700px",
height: "510px",
callBack: function (iframeId) {
top.frames[iframeId].submitForm();
}
});
}
function clientsInit() {
var dataJson = {
dataItems: [],
organize: [],
role: [],
duty: [],
user: [],
authorizeMenu: [],
authorizeButton: []
};
var init = function () {
$.ajax({
url: "/ClientsData/GetClientsDataJson",
type: "get",
dataType: "json",
async: false,
success: function (data) {
dataJson.dataItems = data.dataItems;
dataJson.organize = data.organize;
dataJson.role = data.role;
dataJson.duty = data.duty;
dataJson.authorizeMenu = eval(data.authorizeMenu);
dataJson.authorizeButton = data.authorizeButton;
}
});
}
init();
return dataJson;
}
var TableInit = function () {
var oTableInit = new Object();
//初始化Table
oTableInit.Init = function () {
$('#gridList').bootstrapTable({
url: '/SystemManage/User/GetGridJson',         //请求后台的URL（*）
method: 'get',                      //请求方式（*）
toolbar: '#toolbar',                //工具按钮用哪个容器
striped: true,                      //是否显示行间隔色
cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: true,                   //是否显示分页（*）
sortable: false,                     //是否启用排序
sortOrder: "asc",                   //排序方式
queryParams: oTableInit.queryParams,//传递参数（*）
sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
pageNumber: 1,                       //初始化加载第一页，默认第一页
pageSize: 25,                       //每页的记录行数（*）
pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
search: true,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
strictSearch: true,
showColumns: true,                  //是否显示所有的列
showRefresh: true,                  //是否显示刷新按钮
minimumCountColumns: 2,             //最少允许的列数
clickToSelect: true,                //是否启用点击选中行
height: $(window).height() - 40,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
//uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
showToggle: true,                    //是否显示详细视图和列表视图的切换按钮
cardView: false,                    //是否显示详细视图
detailView: false,                   //是否显示父子表
queryParamsType : "undefined",
columns: [{
checkbox: true
}, {
field: 'F_Id',
title: '主键'
}, {
field: 'F_Account',
title: '账户'
}, {
field: 'F_RealName',
title: '姓名'
}, {
field: 'F_Gender',
title: '性别',
formatter: function (value, row, index) {
if (value == '1') {
return '男';
} else {
return '女';
}
}
}, {
field: 'F_MobilePhone',
title: '手机',
}, {
field: 'F_OrganizeId',
title: '公司',
formatter: function (cellvalue, options, rowObject) {
return top.clients.organize[cellvalue] == null ? "" : top.clients.organize[cellvalue].fullname;
}
}, {
field: 'F_DepartmentId',
title: '部门',
formatter: function (cellvalue, options, rowObject) {
return top.clients.organize[cellvalue] == null ? "" : top.clients.organize[cellvalue].fullname;
}
}, {
field: 'F_DutyId',
title: '岗位',
formatter: function (cellvalue, options, rowObject) {
return top.clients.duty[cellvalue] == null ? "" : top.clients.duty[cellvalue].fullname;
}
}, {
field: 'F_CreatorTime',
title: '创建时间',
}, {
field: 'F_EnabledMark',
title: '允许登录',
}, {
field: 'F_Description',
title: '备注',
}, ]
});
};
//得到查询的参数
oTableInit.queryParams = function (params) {
var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
pagesize: params.pageSize,   //页面大小
page: params.pageNumber,  //页码
sord:params.sortOrder,
sidx: 'F_DepartmentId asc,F_CreatorTime desc'  //排序列
//departmentname: $("#txt_search_departmentname").val(),
//statu: $("#txt_search_statu").val()
};
return temp;
};
return oTableInit;
};
</script>
<div class="wrapper wrapper-content animated fadeInRight">
<div class="topPanel">
<div id="toolbar">
<button id="btn_add" type="button" class="btn btn-white"  data-toggle="modal" data-target="#myModal" onclick="btn_add()">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
</button>
</div>
</div>
<div class="gridPanel">
<table id="gridList"></table>
<div id="gridPager"></div>
</div>
</div>
<!-- 全局js -->
<script src="https://segmentfault.com/q/1010000011567503/~/Content/hplus/js/jquery.min.js?v=2.1.4"></script>
<script src="https://segmentfault.com/q/1010000011567503/~/Content/hplus/js/bootstrap.min.js?v=3.3.6"></script>
<script src="https://segmentfault.com/q/1010000011567503/~/Content/js/framework-ui.js"></script>
<!-- 自定义js -->
<script type="text/javascript" src="https://segmentfault.com/q/1010000011567503/~/Content/hplus/js/contabs.js"></script>
<script src="https://segmentfault.com/q/1010000011567503/~/Content/hplus/js/content.js?v=1.0.0"></script>
<!-- Bootstrap table -->
<script src="https://segmentfault.com/q/1010000011567503/~/Content/hplus/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="https://segmentfault.com/q/1010000011567503/~/Content/hplus/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
<script src="https://segmentfault.com/q/1010000011567503/~/Content/hplus/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<!-- Peity --><script src="https://segmentfault.com/q/1010000011567503/~/Content/hplus/js/demo/bootstrap-table-demo.js"></script>

回答

我也遇到了这个问题，我是将bootstrap.js删除了才解决的。我怀疑与剩下的某个文件有冲突，（重点怀疑bootstrap-table.js）才造成了问题，
附上正常时引用的文件名
<script type="text/javascript" src="https://segmentfault.com/q/1010000011567503/${ctx}/static/js/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="https://segmentfault.com/q/1010000011567503/${ctx}/static/js/popper.min.js"></script>
<script type="text/javascript" src="https://segmentfault.com/q/1010000011567503/${ctx}/static/js/bootbox.min.js"></script>
<script type="text/javascript" src="https://segmentfault.com/q/1010000011567503/${ctx}/static/js/bootstrap-table.js"></script>
<script type="text/javascript" src="https://segmentfault.com/q/1010000011567503/${ctx}/static/js/common.js"></script>
<script type="text/javascript"src="https://segmentfault.com/q/1010000011567503/${ctx}/static/js/bootstrap-table-zh-CN.min.js"></script>

pageList: [10, 25, 50, 100],
smartDisplay:false,
添加这个配置项就好了

我在react中用遇到了这个问题，尝试了上面的方案，没有成功，可能是因为react的原因。于是我只好手动写了一个监听方法，希望有帮助
$(".bootstrap-table .dropdown-toggle").on('click', () => {
$(".page-list .dropdown-menu").toggle();
});

楼主好，我也刚学Bootstrap，也遇到了这个问题，怎么解决的呢

我最近也遇到了这个问题，不知你是否解决，网上查询之后得知是bootstrap.js的问题，查看引用路径是否正确，还有你是否修改过，用官网上的替换一下试试。我这样做之后是解决的。

bootstrap down下拉框依赖bootstrap.js文件，添加即可，需要注意的是bootstrap.css和bootstrap.js的版本需一致且不要低于3.3.5的版本，还有一个地方要注意，bootstrap-table及bootstrap 3.3.5依赖jquery的版本不要低于1.9.1,按照上述说法去做不会有问题的

我也遇到了这个问题。
我出问题的原因是引入多个bootstrap.js文件。
我解决的方法是只引入一次。把多余的去掉。

在使用bootstrap.js之前引入opper.js即可

以上是【JS】使用bootstrap table时不能显示筛选列和分页每页显示的行数？的全部内容，来源链接： utcz.com/a/87702.html