我使用 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>

Answer 1

table-condensedbootstrap 中的类有助于做你想做的事。这是一个引导类。

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

    });

});

我希望它为别人服务。