【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

回到顶部