【Web前端问题】使用bootstrap table时不能显示筛选列和分页每页显示的行数？
在学习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="~/Content/hplus/js/jquery.min.js?v=2.1.4"></script>
<script src="~/Content/hplus/js/bootstrap.min.js?v=3.3.6"></script>
<script src="~/Content/js/framework-ui.js"></script>
<!-- 自定义js -->
<script type="text/javascript" src="~/Content/hplus/js/contabs.js"></script>
<script src="~/Content/hplus/js/content.js?v=1.0.0"></script>
<!-- Bootstrap table -->
<script src="~/Content/hplus/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="~/Content/hplus/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
<script src="~/Content/hplus/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<!-- Peity -->
<script src="~/Content/hplus/js/demo/bootstrap-table-demo.js"></script>
回答：
我也遇到了这个问题，我是将bootstrap.js删除了才解决的。我怀疑与剩下的某个文件有冲突，（重点怀疑bootstrap-table.js）才造成了问题，
附上正常时引用的文件名
<script type="text/javascript" src="${ctx}/static/js/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="${ctx}/static/js/popper.min.js"></script>
<script type="text/javascript" src="${ctx}/static/js/bootbox.min.js"></script>
<script type="text/javascript" src="${ctx}/static/js/bootstrap-table.js"></script>
<script type="text/javascript" src="${ctx}/static/js/common.js"></script>
<script type="text/javascript"src="${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即可
以上是 【Web前端问题】使用bootstrap table时不能显示筛选列和分页每页显示的行数？ 的全部内容， 来源链接： utcz.com/a/143810.html
