我使用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并添加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
    });
});

我希望它能为别人服务。

Answer 2

引导程序中的table-condensed类可以帮助您完成所需的操作。这是一个bootstrap类。