How to fix the last column of a responsive DataTable

I have a datatable and the last column is two buttons. I am implementing responsive data, but I need the last column (the "Opciones" column) not to be hidden and always shown independently of the other columns.

If you need more information, just tell me.

enter image description here

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'
            }
        }
    });
});

      

+3


source to share


1 answer


Add only the .all class to the table header column you want to keep.

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

      



See more: https://www.datatables.net/extensions/responsive/examples/display-control/classes.html

+9


source







All Articles