Easy UI DataGrid 的分页组件，显示异常？

不知道为啥分页组件全部挤在了右边这角落里面，强迫症已近哭晕在厕所
我是直接复制的理论上不存在问题，尝试了从easyui官网复制代码也是出问题，把那个页面在新窗口打开没有问题，

第一个页面是打开时的显示（被遮盖和挤在右边）
第二个页面是刷新后的显示（刷新后显示好了，不过还是整体挤在右边）
第三个页面是我预想中显示的样子

<div style="left: auto; width: 100%; height:513px">
    <table id="datagrid" class="easyui-datagrid" title="客户信息管理" data-options="onDblClickCell:onClickCell,iconCls: 'icon-edit',method:'get'">
        <thead>
            <tr>
                <th data-options="field:'FCheck',width:40,align:'center',resizable:true,checkbox:true">复选框</th>
                <th data-options="field:'FKey',width:80,align:'center',resizable:true ">编号</th>
                <th data-options="field:'FBigModule',width:120,editor: 'text' ">大模块名称</th>
                <th data-options="field:'FChildModule',width:200,editor: 'text' ">子模块名称</th>
                <th data-options="field:'FMethod',width:320,editor: 'text' ">函数名称</th>
                <th data-options="field:'FFullMethod',width:460,editor: 'text' ">接口名称</th>
            </tr>
        </thead>
    </table>
</div>

<div id="tb" style="padding: 10px; height: 40px">
    <div style="margin-bottom: 5px">
        <a href="#" onclick="add()" plain="true" class="easyui-linkbutton" iconcls="icon-add">添加</a>
        <a href="#" onclick="edit()" plain="true" class="easyui-linkbutton" iconcls="icon-edit">编辑</a>
        <a href="#" onclick="doDelete()" plain="true" class="easyui-linkbutton" iconcls="icon-cut">删除</a>
        <a href="javascript:void(0);" onclick="search()" plain="true" class="easyui-linkbutton" iconcls="icon-search">查询</a>
    </div>
</div>

<div>
    <div id="addDiv" class="easyui-window" title="添加操作弹框" data-options="resizable: true,maximizable: false,center: true,modal:true,closed:true,iconCls:'icon-save'" style="width: 60%; height: 95%; padding: 10px;">
        <form id="addForm" method="post">
            <table cellpadding="5" style="text-align: center; padding: 10px 60px 20px 60px" border="0">
                <tr>
                    <td>大模块名称</td>
                    <td>
                        <input class="easyui-textbox" type="text" name="FBigModule" data-options="required:true,maxlength:5" /></td>

                    <td>子模块名称</td>
                    <td>
                        <input class="easyui-textbox" type="text" name="FChildModule" data-options="required:true" /></td>

                </tr>
                <tr>
                    <td>函数名称</td>
                    <td>
                        <input class="easyui-textbox" type="text" name="FMethod" data-options="required:true,maxlength:5" /></td>

                    <td>接口名称</td>
                    <td>
                        <input class="easyui-textbox" type="text" name="FFullMethod" data-options="required:true" /></td>

                </tr>
            </table>


        </form>
        <div style="text-align: center; padding: 5px">
            <a href="#" class="easyui-linkbutton" type="button" name="submit" onclick="submitForm()">提交 </a>
            <a href="#" class="easyui-linkbutton" type="button" name="clear" onclick="clearForm()">清除</a>
        </div>

    </div>

</div>


<script type="text/javascript">
    //表单列表 ，初始显示的数据路径来源，和属性设置
    $(function () {
        $('#datagrid').datagrid({   /*UI中的DataGrid组件可以在表中显示一组行数据.*/
            //提交地址
            url: '../../../Handler/Test/TestPlanHandler.ashx',//?action=query
            queryParams: { action: 'query' },//直接用这个传递参数过去后台页面不用?action=query
            fit: true,//自适应大小
            loadMsg: '加载中',//数据加载时提示内容
            pagination: true,//分页
            showFooter: true,//数据显示在最后一行
            singleSelect: true,//单选一行，不能多选复选，用于修改,删除行数据
            rownumbers: true,//在表格前面添加序列号。
            toolbar: '#tb',//设置表头菜单的所在div
            //url: "Series/QueryBy",  //调用的SeriesController中的QueryBy方法
            width: "100%",  //宽度适应浏览器大小
            //fitColumns: true,  //列宽自适应//列太多了缩在一起不好看
            idField: 'Fkey',
            loadMsg: '正在载入用户信息...',
            pagination: true,  //是否分页显示
            //singleSelect: false,  //true仅仅能选中一条数据,false可以多选，那个在后面那个生效
            striped: true,   //行背景交换
            pageSize: 10,    //每一页的大小
            pageNumber: 1,   //当前页数
            pageList: [10, 20, 30, 40, 50],  //每一页显示的条数

            onLoadSuccess: function (data) {
                $(".datagrid-header-check").html("");//表头（header）的全选复选框（check box）为空，不显示因为我不复选只选单行，主要是为了删除选中的行

            }

        });

    })

    // 删除按钮的点击事件,只能选中一行，删除选中行
    function doDelete() {

        var rows = $('#datagrid').datagrid('getSelections');

        if (rows.length == 1) {
            $.messager.confirm('确认', '您确认删除编号为：' + rows[0].FKey + '&nbsp的记录吗？', function (r) {
                if (r) {
                    var id = rows[0].FKey;
                    var urls = "../../../Handler/Test/TestPlanHandler.ashx?action=remove&FKey=" + id;
                    $.ajax({
                        type: "GET",
                        cache: false,
                        url: urls
                    })
                }

            });

        }
        else {
            $.messager.alert('系统消息', '请选择<span style="color:red" >&nbsp壹&nbsp行&nbsp</span>进行删除');
        }

    }

    //查询按钮事件
    function search() { $.messager.alert('系统消息', ''); $('#datagrid').datagrid('reload'); }

    /** 添加按钮点击事件 */
    function add() { $('#addDiv').window('open'); }

    /** 添加数据弹窗提交按钮点击事件 */
    function submitForm() {
        $("#addForm").form('submit', {
            url: '../../../Handler/Test/TestPlanHandler.ashx?action=add'

        });
        $.messager.confirm('添加成功', '是否继续添加数据', function (r) {
            if (r) { $('#addForm').form('clear'); } else { $('#addDiv').dialog('close'); }
        });
    }

    /** 事件，清空表单文本框内容 */
    function clearForm() { $('#addForm').form('clear'); }

    /**修改按钮的点击事件 */
    function edit() {
        endEditing()
        var rows = $('#datagrid').datagrid('getSelections');
        if (rows.length == 1) {
            $.messager.confirm('确认', '您确修改除编号为：' + rows[0].FKey + '&nbsp的记录吗？', function (r) {
                if (r) {
                    var data = rows[0];
                    var urls = "../../../Handler/Test/TestPlanHandler.ashx?action=edit&FKey=" + data.FKey;
                    $.ajax({
                        type: "GET",
                        cache: false,
                        url: urls,
                        data: {
                            'FBigModule': data.FBigModule,
                            'FChildModule': data.FChildModule,
                            'FMethod': data.FMethod,
                            'FFullMethod': data.FFullMethod,

                        },
                        dataType: 'json',
                    });

                }
            });

        } else {
            $.messager.alert('系统消息', '请选择<span style="color:red" >&nbsp 1 &nbsp 行 &nbsp</span>进行修改');
        }

    }

    //方法扩展editCell；
    $.extend($.fn.datagrid.methods, {
        //两个参数
        // jq: 
        // param:对象，包含index 和 鼠标点击的列属性；
        //jq = [table#datagrid.easyui-datagrid, context: document, selector: "#datagrid"], param = Object {index: 1, field: "Data"}  选择的是Data列，
        editCell: function (jq, param) {
            //each() 遍历；
            return jq.each(function () {
                //options:返回属性对象。 这个时候的this代表：jq;
                var opts = $(this).datagrid('options');
                //getColumnFields:返回列的字段，如果 frozen 设置为 true，则冻结列的字段被返回。
                //concat:用于连接两个或多个数组。该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本
                //与HTML的editor属性有关；能够编辑的列和不能编辑的列；
                //fields的值，和上面HTML对应；
                //Array[5]
                //0: "ck"
                //1: "DepartmentName"
                //2: "Name"
                //3: "Data"
                //4: "remarks"
                var fields = $(this).datagrid('getColumnFields', true).concat($(this).datagrid('getColumnFields'));
                //下面for循环，设定列能够编辑。当不能编辑时，editor的值为undefined，能够编辑值为text;
                for (var i = 0; i < fields.length; i++) {
                    var col = $(this).datagrid('getColumnOption', fields[i]);
                    col.editor1 = col.editor;
                    //循环到的列，不等于鼠标点击的那一列时，设定列的editor的值为null；
                    if (fields[i] != param.field) {
                        col.editor = null;
                    }
                }
                //开始对一行进行编辑。param.index 为行号；对选中的一行进行编辑；
                $(this).datagrid('beginEdit', param.index);
                //for循环，设置col
                for (var i = 0; i < fields.length; i++) {
                    //getColumnOption:返回指定列的选项。
                    var col = $(this).datagrid('getColumnOption', fields[i]);
                    //给列的editor属性赋值；text 或者其他；
                    col.editor = col.editor1;
                }
            });
        }
    });

    //定义一个 行号遍历 赋值为undefined；
    var editIndex = undefined;

    // 结束编辑，该函数的返回值为Boolean；
    function endEditing() {
        if (editIndex == undefined) { return true }
        //验证指定的行，有效时返回 true。
        if ($('#datagrid').datagrid('validateRow', editIndex)) {
            //结束对一行进行编辑。
            $('#datagrid').datagrid('endEdit', editIndex);
            editIndex = undefined;
            return true;
        } else {
            return false;
        }
    }

    /**
     * 点击单元格事件
     * @param index 行值
     * @param field 列字段名
     */
    function onClickCell(index, field) {

        //endEditing 的返回值是boolean 值；当返回值为true的时候；
        if (endEditing()) {
            //选中一行，行索引从 0 开始。
            $('#datagrid').datagrid('selectRow', index)
                //行值和字段内容 
                .datagrid('editCell', { index: index, field: field });
            //选中的行值赋值给editIndex;
            editIndex = index;
        }
    }



</script>

因为你左上角的 那几个按钮 你可以去掉先看一下效果；这几个按钮占据了datagrid的宽高导致