使用bootstrap table时不能显示筛选列和分页每页显示的行数?-灵析社区

万码WUJ6BZ01

在学习bootstrap-table时遇到不能显示列筛选和分页每页显示行数,点击的时候完全没反应。有没有大神能帮忙解答一下? ![https://wmprod.oss-cn-shanghai.aliyuncs.com/community/1724984283737_vuwR.png](https://wmprod.oss-cn-shanghai.aliyuncs.com/community/1724984283737_vuwR.png) ![https://wmprod.oss-cn-shanghai.aliyuncs.com/community/1724984246495_6kOt.png](https://wmprod.oss-cn-shanghai.aliyuncs.com/community/1724984246495_6kOt.png) ```js @{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Index.cshtml"; } 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; }; 新增

阅读量:192

点赞量:1

问AI