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

Posted 2023-05-07

【中文标题】如何修复响应式数据表的最后一列

【英文标题】：How to fixed the last column of a responsive DataTable

【发布时间】：2015-07-18 11:53:45

【问题描述】：

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

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

html（ASP.NET 视图）

@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" >
        <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'
            
        
    );
);

【问题讨论】：

给我们看截图吧！

【参考方案1】：

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

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

有关详细信息，请参阅： https://www.datatables.net/extensions/responsive/examples/display-control/classes.html