javascript - 如何修复响应式数据表的最后一列

Question

我有一个数据表，最后一列是两个按钮。我正在实现响应式数据表，但我需要最后一列(列“Opciones”)不隐藏并且始终显示，无论其他列如何。

如果您需要更多信息，请告诉我。

HTML(ASP.NET View )

@model PagedList.IPagedList<VinculoSC.ReservaDeCabanasWeb.Models.Reserva>
@using PagedList.Mvc;

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout2.cshtml";
}


<div id="content">
    <div>
        <div class="row">
            <div id="divAlertReserva" role="alert"></div>
        </div>
    </div>
    <table class="table" id="listaSolicitudes" width="100%">
        <thead>
            <tr>
                <th>
                    Cabaña
                </th>
                <th>
                    Empresa
                </th>
                <th>
                    Cédula
                </th>
                <th>
                    Nombres
                </th>
                <th>
                    Apellidos
                </th>
                <th>
                    Email
                </th>
                <th>
                    Fecha inicial
                </th>
                <th>
                    Fecha final
                </th>
                <th>
                    Opciones
                </th>
            </tr>
        </thead>

        <tbody></tbody>

    </table>

</div>
<div id="openModal" class="modalDialog">
    <div>
        <a href="#close" title="Close" class="close" onclick="CancelOperation()">X</a>
        <h2>Por favor anexe una descripción al correo</h2>
        <textarea id="txtDescription" class="form-control" rows="4"></textarea>
        <input type="text" id="iptValue" name="iptValue" value="" style="display:none;" />
        <input type="text" id="iptID" name="iptID" value="" style="display:none;" />
        <a class='btn btn-default' style="margin-top:7px;" onclick="SendInformation()">Enviar</a>
    </div>
</div>
<div id="openConfirmation" class="modalDialog" role="alert">
    <div id="confirmation">
        <a href="#close" title="Close" class="close" onclick="CancelOperation()">X</a>
        <h4>¿Esta seguro que desea rechazar la solicitud?</h4>
        <a class='btn btn-default' style="margin-top:7px;" onclick="location.href = '#openModal';">Si</a>
        <a href="#close" class='btn btn-default' style="margin-top:7px;" onclick="CancelOperation()">No</a>
    </div>
</div>
<script>
    //This is by the auto-resize and modal windows issue
    function OpenPolicies() {
    }
</script>

Javascript

$(document).ready(function () {
var table = $('#listaSolicitudes').DataTable({
        "bServerSide": true,
        "sAjaxSource": "ListaSolicitudes/AjaxHandler",
        "bProcessing": true,
        "aoColumns": [
                        { "sName": "Cabana" },
                        { "sName": "Empresa" },
                        { "sName": "Cedula" },
                        { "sName": "Nombres" },
                        { "sName": "Apellidos" },
                        { "sName": "Email" },
                        { "sName": "FechaDesde" },
                        { "sName": "FechaHasta" },
                        { "sName": "Opciones" }
        ],
        "columnDefs": [{
            "targets": -1,
            "data": null,
            "defaultContent": "<span>" +
                                "<div>" +
                                    "<a id='aprobar' class='btn btn-default'>Aprobar</a>" +
                                "</div>" +
                                "<div style='margin-top:5px;'>" +
                                    "<a id='rechazar' class='btn btn-default'>Rechazar</a>" +
                                "</div>" +
                              "</span>" +
                              "<span class='loading'>" +
                                "<img src='" + decodeURIComponent(sessionStorage.spHostUrl) + "/pru-reservaCabanas/_layouts/images/gears_anv4.gif' alt='Cargando...'/>" +
                              "</span>"
        }],
        "language": {
            "url": "//cdn.datatables.net/plug-ins/1.10.6/i18n/Spanish.json"
        },
        "fnDrawCallback": function (oSettings) {
            $(".loading").hide();
            $(".loading").css("margin", "0 38%");
            Capatech.Part.adjustSize();
        },
        responsive: {
            details: {
                type: 'inline'
            }
        }
    });
});

Answer 1

仅将类 .all 添加到您要保留的表头列。

<th class="all">
   Opciones
</th>

更多信息见: https://www.datatables.net/extensions/responsive/examples/display-control/classes.html