javascript - 为什么我的数据表数据设计在 JQuery Datatable 中无法正常工作？

Question

我有以下代码，查看我的输出图像，我的设计散布各处，这背后的原因是什么。

<div class="row">
<div class="col-md-12">
    <div class="panel panel-primary list-panel" id="list-panel">
        <div class="panel-heading list-panel-heading">
            <button type="button" class="btn btn-default btn-md" data-toggle="modal" data-url="@Url.Action("Create","Group")" id="btnCreateBranch">
                <span class="glyphicon glyphicon-new-window" aria-hidden="true"></span> Add Group
            </button>
        </div>
        <div class="panel-body">
            <table id="group-data-table" class="table table-striped table-bordered" style="width:100%;">
            </table>
        </div>
    </div>
</div>

我的 Jquery 脚本是:

                    "columns": [
                        { "title": "Group Code", "data": "GroupCode", "searchable": true },
                        { "title": "Group Description", "data": "GroupDesc", "searchable": true },

                        {
                            "title": "Action",
                            "data": "GroupCode",
                            "searchable": false,
                            "sortable": false,
                            "render": function (data) {
                                return '<a  href="@Url.Action("Edit","Group")?GroupCode=' + data + '" class="btn btn-primary editGroup">Edit</a>  <a href="@Url.Action("Delete","Group")?GroupCode=' + data + '" class="deleteGroup btn btn-danger">Delete</a>';
                            }
                        }
                    ],
                    "lengthMenu": [[10, 25, 50, 100], [10, 25, 50, 100]],
                });
            },

            refresh: function () {
                dt.ajax.reload();
            }
        }

我的最终输出是: My output image

Answer 1

我已经通过在所有列中使用“sWidth”:“300px”来解决我自己设置宽度的问题并解决问题。