1

在学习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>

查看全部 4 个回答

0

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