Моя таблица с использованием DataTables не сворачивает столбцы

Question

У меня действительно новые рабочие таблицы данных DataTables , у меня проблема с таблицей

Я пытаюсь заставить колонны развалиться, но мне не повезло, может кто-нибудь сказать мне, что я делаю неправильно?

Стол сверху почему-то не разваливается

вот мой код

<div class="col-md-12 col-sm-12 col-xs-12">
<div class="x_title">
    <h4>Title</h4>

    <div class="clearfix"></div>
</div>
<div class="x_content">
    <div id="datatable-responsive_wrapper" class="dataTables_wrapper form-inline dt-bootstrap no-footer">
        <div class="row">
            <div class="col-sm-12 table-responsive">
                <table id="datatable" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" role="grid" aria-describedby="datatable-responsive_info" style="width:100%">
                    <thead>
                        <tr>
                            <th data-priority>@Html.DisplayNameFor(model => model.pagoEmitido.Folio)</th>
                            <th data-priority>@Html.DisplayNameFor(model => model.pagoEmitido.Fecha)</th>
                            <th data-priority="1">@Html.DisplayNameFor(model => model.pagoEmitido.cfdiFormaPagoClve)</th>
                            <th data-priority="2">@Html.DisplayNameFor(model => model.pagoEmitido.Referencia)</th>
                            <th data-priority>@Html.DisplayNameFor(model => model.pagoEmitido.Importe)</th>
                        </tr>
                    </thead>
                    <tbody>
                        @if (Model.Count() > 0)
                        {
                            foreach (var item in Model)
                            {
                                <tr>
                                    <td>@Html.ActionLink("Pago " + item.pagoEmitido.Folio, "Details", "PagoEmitido", new { id = item.pagoEmitido.IdPagoEmitido }, null)</td>
                                    <td>@item.pagoEmitido.Fecha.ToShortDateString() </td>

                                    @if (!string.IsNullOrWhiteSpace(item.pagoEmitido.cfdiFormaPagoClve))
                                    {
                                        <td>@Html.DisplayFor(modelItem => item.pagoEmitido.cfdiFormaPagoClve) - @Html.DisplayFor(modelItem => item.pagoEmitido.cfdiFormaPagoDescripcion)</td>
                                    }
                                    else
                                    {
                                        <td>
                                            @Html.DisplayFor(modelItem => item.DescripcionTipoMetodPago)
                                        </td>
                                    }
                                    <td>@Html.DisplayFor(modelItem => item.pagoEmitido.Referencia)</td>
                                    <td>
                                        <span>@(MoneyFormatHelper.Format(item.pagoEmitido.Importe, item.pagoEmitido.Tenant.Decimales) + " (" + item.pagoEmitido.MonedaISO + ")")</span>
                                        @if (item.pagoEmitido.MonedaIsoOriginal != null && item.pagoEmitido.MonedaIsoOriginal != item.pagoEmitido.MonedaISO)
                                        {<br />
                                            <span style="font-size:10px">
                                                (@( MoneyFormatHelper.Format(item.pagoEmitido.ImporteOriginal.Value, item.pagoEmitido.Tenant.Decimales)
                                                                                                             + " " + item.pagoEmitido.MonedaIsoOriginal + " @ " + item.pagoEmitido.TipoCambio))
                                            </span>
                                        }
                                    </td>
                                </tr>
                            }
                        }
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

Вот мой JS.

$('#datatable').DataTable({
    responsive: true
}); 

Answer 1

table-condensed класс в bootstrap помогает делать то, что вы хотели.Это класс начальной загрузки.

Answer 2

Решение было простым, добавьте имя в мою таблицу добавить класс, сжатый в таблице и добавить JS

<div class="col-md-12 col-sm-12 col-xs-12">
<div class="x_title">
    <h4>Pagos Registrados</h4>

    <div class="clearfix"></div>
</div>
<div class="x_content">
    <div id="datatable-responsive_wrapper" class="dataTables_wrapper form-inline dt-bootstrap no-footer">
        <div class="row">
            <div class="col-sm-12 table-responsive">
                <table id="tblaListaPagos" class="table display responsive table-responsive table-condensed table-striped  table-bordered dt-responsive nowrap" cellspacing="0" role="grid" aria-describedby="datatable-responsive_info" style="width:100%">
                    <thead>
                        <tr>
                            <th data-priority class="all">@Html.DisplayNameFor(model => model.pagoEmitido.Folio)</th>
                            <th data-priority class="all">@Html.DisplayNameFor(model => model.pagoEmitido.Fecha)</th>
                            <th data-priority="1">@Html.DisplayNameFor(model => model.pagoEmitido.cfdiFormaPagoClve)</th>
                            <th data-priority="2">@Html.DisplayNameFor(model => model.pagoEmitido.Referencia)</th>
                            <th data-priority class="all">@Html.DisplayNameFor(model => model.pagoEmitido.Importe)</th>
                        </tr>
                    </thead>
                    <tbody>
                        @if (Model.Count() > 0)
                        {
                            foreach (var item in Model)
                            {
                                <tr>
                                    <td>@Html.ActionLink("Pago " + item.pagoEmitido.Folio, "Details", "PagoEmitido", new { id = item.pagoEmitido.IdPagoEmitido }, null)</td>
                                    <td>@item.pagoEmitido.Fecha.ToShortDateString() </td>

                                    @if (!string.IsNullOrWhiteSpace(item.pagoEmitido.cfdiFormaPagoClve))
                                    {
                                        <td>@Html.DisplayFor(modelItem => item.pagoEmitido.cfdiFormaPagoClve) - @Html.DisplayFor(modelItem => item.pagoEmitido.cfdiFormaPagoDescripcion)</td>
                                    }
                                    else
                                    {
                                        <td>
                                            @Html.DisplayFor(modelItem => item.DescripcionTipoMetodPago)
                                        </td>
                                    }
                                    <td>@Html.DisplayFor(modelItem => item.pagoEmitido.Referencia)</td>
                                    <td>
                                        <span>@(MoneyFormatHelper.Format(item.pagoEmitido.Importe, item.pagoEmitido.Tenant.Decimales) + " (" + item.pagoEmitido.MonedaISO + ")")</span>
                                        @if (item.pagoEmitido.MonedaIsoOriginal != null && item.pagoEmitido.MonedaIsoOriginal != item.pagoEmitido.MonedaISO)
                                        {<br />
                                            <span style="font-size:10px">
                                                (@( MoneyFormatHelper.Format(item.pagoEmitido.ImporteOriginal.Value, item.pagoEmitido.Tenant.Decimales)
                                                                                                             + " " + item.pagoEmitido.MonedaIsoOriginal + " @ " + item.pagoEmitido.TipoCambio))
                                            </span>
                                        }
                                    </td>
                                </tr>
                            }
                        }
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

Вот мой Js

$(function () {
    $('#tblaListaPagos').DataTable({
        responsive: true,
        searching: false,
        paging: false,
        info: false
    });
});

Я надеюсь, что это служит кому-то еще.