Question

我正在使用 ASP.NET MVC 开发一个网页，并且使用的是插件数据表，其中有我的信息，在其最后一列中有一个按钮，用于从普通笔记本电脑或计算机

碰巧，我还决定使其通过手机或平板电脑做出响应，为此，我正在使用称为子行（显示更多/详细信息）的数据表API，并且还需要显示选择行时显示的信息中的相同按钮，即我在图像中指向的位置（图像取自Datatables.net中所示的示例，我需要从该响应视图中显示该按钮

Image view responsive (tablet or phone)

这是我在项目中实现的代码javascript

JavaScript

$(document).ready(function () {    
    $("#ticketsTable").DataTable({
        "lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "Todos"]],
        "processing": true,
        "serverSide": true, 
        "responsive": true,
        "ajax": {
            "url": document.getElementById("table").value,
            "type": "POST",
            "dataType": "json"
        },
        "language": {
            "lengthMenu": "Mostrar _MENU_ registros",
            "zeroRecords": "No se encontró nada",
            "info": "Mostrando del _START_ al _END_ de un total de _TOTAL_",
            "infoEmpty": "No hay registros",
            "emptyTable": "No hay datos para mostrar",
            "loadingRecords": "Cargando...",
            "processing": "Procesando...",
            "search": "Buscar:",
            "infoFiltered": "(filtrado de un total de _MAX_ registros)",
            "paginate": {
                "first": "Primera",
                "last": "Última",
                "next": "Siguiente",
                "previous": "Anterior"
            }
        },
        "columns": [

            {
                "title": "Número de Ticket", "data": "TicketFolio", "fnCreatedCell": function (nTd, sData, oData) {
                    $(nTd).html(`<a href=${document.getElementById("ticketDetail").value}?ticketNumber=${oData.TicketId}&ticketFolio=${oData.TicketFolio}>${oData.TicketFolio}</a>`);
            }, "searchable": true }, 
            { "title": "Solicitante", "data": "TicketAplicant", "searchable": true }, 
            { "title": "Asunto", "data": "TicketSubjet", "searchable": true },            
            { "title": "Servicio", "data": "TicketService", "searchable": true }, 
            { "title": "Estado", "data": "TicketStatus", "searchable": true },
            { "title": "Asignado", "data": "TicketEmployee", "searchable": true },
            { "title": "Asignar", "data": null, "fnCreatedCell": function (nTd, sData, oData) {
                $(nTd).html(`<button id=${oData.TicketId} class="btn btn-primary">Asignar</button>`);
            }, "searchable": false, "orderable": false }
        ]
    });

HTML

<table id="ticketsTable" class="table table-hover dt-responsive nowrap" style="width: 100%;">
                    <thead>
                        <tr>
                            <th>Número de Ticket</th>
                            <th>Solicitante</th>
                            <th>Asunto</th>
                            <th>Categoría</th>
                            <th>Estado</th>
                            <th>Asignado</th>
                            <th>Asignar</th>

                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>

数据表/详细信息中的“添加”按钮

0 个答案: