Styles of my Datatable does not load in modal

Question

I am creating a modal and inside I will put a table with some information, however, the content of the modal is not being stylizable.

I already use the same table in other views and works normally this way, only in modal that not.

Script import occurs correctly as you can see in the following code:

<script>
    function ReloadModalInfo(componenteName) {
        $.post('@Url.Action("GridView", "PopupPadrao")', { token: $('#' + componenteName + '_token').val() }, function (data) {
            console.log(data)
            $('#abrirModal').click()
        })
    }
</script>

@section Styles {
    <link rel="stylesheet" href="~/vendor/jquery-bootgrid/dist/jquery.bootgrid.css">
}
@section Scripts {
    <script src="@Scripts.Url("~/Vendor/jquery-bootgrid/dist/jquery.bootgrid.js")"></script>
    <script src="@Scripts.Url("~/Vendor/jquery-bootgrid/dist/jquery.bootgrid.fa.js")"></script>
}

<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Cabeçalho Modal</h4>
            </div>
            <div class="modal-body" id="modalContent">
                <table class="table table-borderless" id="bootgrid-command">
                    <thead>
                        <tr>
                            <th data-column-id="commands" data-formatter="commands" data-sortable="false">
                                <div class="text-right">@Resources.Resources.Acoes</div>
                            </th>
                            <th data-column-id="id" data-type="numeric">@Resources.Resources.Codigo</th>
                            <th data-column-id="nome">@Resources.Resources.Tag</th>
                            <th data-column-id="login">@Resources.Resources.Descricao</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td></td>
                            <td>qwdqwdqwd</td>
                            <td>qwdqwdqwdqwdqw</td>
                            <td>qwdqwdqwdqw</td>
                        </tr>

                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">Fechar</button>
            </div>
        </div>
    </div>
</div>

<button type="button" class="btn btn-info btn-lg" style="visibility: hidden" id="abrirModal" data-toggle="modal" data-target="#myModal">Abrir janela Modal</button>

How it should look:

Answer 1

Missed some files like jquery.js, boostrap.js and bootstrap.css, and missed calling the function that generates the table: $("#bootgrid-command").bootgrid();

$("#bootgrid-command").bootgrid();

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.3.1/jquery.bootgrid.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.3.1/jquery.bootgrid.fa.js"></script>

<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Cabeçalho Modal</h4>
            </div>
            <div class="modal-body" id="modalContent">
                <table class="table table-borderless" id="bootgrid-command">
                    <thead>
                        <tr>
                            <th data-column-id="commands" data-formatter="commands" data-sortable="false">
                                <div class="text-right">@Resources.Resources.Acoes</div>
                            </th>
                            <th data-column-id="id" data-type="numeric">@Resources.Resources.Codigo</th>
                            <th data-column-id="nome">@Resources.Resources.Tag</th>
                            <th data-column-id="login">@Resources.Resources.Descricao</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td></td>
                            <td>qwdqwdqwd</td>
                            <td>qwdqwdqwdqwdqw</td>
                            <td>qwdqwdqwdqw</td>
                        </tr>
                         <tr>
                            <td></td>
                            <td>qwdqwdqwd</td>
                            <td>qwdqwdqwdqwdqw</td>
                            <td>qwdqwdqwdqw</td>
                        </tr>
                         <tr>
                            <td></td>
                            <td>qwdqwdqwd</td>
                            <td>qwdqwdqwdqwdqw</td>
                            <td>qwdqwdqwdqw</td>
                        </tr>

                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">Fechar</button>
            </div>
        </div>
    </div>
</div>

<button type="button" class="btn btn-info btn-lg" id="abrirModal" data-toggle="modal" data-target="#myModal">Abrir janela Modal</button>

Answer 2

You need to start the component with the command:

<script>
$("#bootgrid-command").bootgrid();
</script>

See the documentation