【问题标题】:Add an extra defaulContent column depending on a if condition根据 if 条件添加额外的 defaulContent 列
【发布时间】:2019-02-05 20:21:28
【问题描述】:

下午好,我已经用从 wcf 服务检索的数据填充了一个数据表(jQuery 的表插件),它有一个列 defaultContent,它有一个链接并且效果很好,但现在我需要创建一个额外的 defaultContent 列和另一个链接取决于 if 条件,如下所示

if (tipo_evento == 3213) { ... add a defaultContent...}

我已经尝试将 if 添加到下面的代码中,但这是不可能的,你能告诉我如何添加额外的列吗?这是我表的代码

function cargarTabla() {
            $('#myTable').DataTable({
                searching: false,
                paging: false,
                responsive: true,
                ordering: false,
                bInfo: true,
                bLengthChange: false,
                processing: true,
                info: true,
                deferRender: true,
                orderMulti: false,
                bAutoWidth: false,
                "ajax": {
                    "url": "/Home/CargarTabla?id=" + noDocumento + "&grupo=" + grupoDT,
                    "type": "GET",
                    "datatype": "json"
                },
                "columns": [
                        { "data": "nombres", "autoWidth": false, "orderable": false, "sClass": "alignRight", "sWidth": "18%" },
                        { "data": "apellidos", "autoWidth": false, "orderable": false, "sClass": "alignRight", "sWidth": "18%" },
                        { "data": "dui", "autoWidth": false, "orderable": false, "sClass": "alignRight", "sWidth": "5%" },
                        { "data": "numero_isss", "autoWidth": false, "orderable": false, "sClass": "alignRight", "sWidth": "5%" },
                        { "data": "cargo_participante", "autoWidth": false, "orderable": false, "sClass": "alignRight", "sWidth": "20%" },
                        { "data": "genero", "autoWidth": false, "orderable": false, "visible": false },
                        { "data": "nivel_puesto", "autoWidth": false, "orderable": false, "visible": false },
                        { "data": "grupo", "autoWidth": false, "orderable": false, "visible": false },
                        { "defaultContent": " <a href='#' id='select'>Sustituir</a>  ", "autoWidth": true, "orderable": false, "sClass": "alignRight", "sWidth": "5%" }
                ],
                "oLanguage": {
                    "sEmptyTable": "No hay registros disponibles",
                    "sInfo": " _TOTAL_ registros. Mostrando de (_START_ a _END_)",
                    "sLoadingRecords": "Por favor espera - Cargando...",
                    "sSearch": "Filtro:",
                    "sLengthMenu": "Mostrar _MENU_",
                    "oPaginate": {
                        "sLast": "Última página",
                        "sFirst": "Primera",
                        "sNext": "Siguiente",
                        "sPrevious": "Anterior"
                    },
                    "oAria": {
                        "sSortAscending": ": Activar para ordenar la columna de manera ascendente",
                        "sSortDescending": ": Activar para ordenar la columna de manera descendente"
                    }
                }
            });
        }

我刚刚从 Gyrocode.com 添加了这段代码,它工作得很好,但是刚刚添加的列在我的表中占用了太多空间,如何添加“autoWidth”:true,“orderable”:false,“sClass”: "alignRight", "sWidth": "5%" ?

"render": function (data, type, full, meta) {
                                if (type === 'display') {
                                    if (tipo_evento == 3213) {
                                        data = " <a href='#' id='Teliminar'>Eliminar</a> " +"|"+ " <a href='#' id='select'>Sustituir</a> ";
                                    } else {
                                        data = " <a href='#' id='select'>Sustituir</a> ";
                                    }
                                }
                                return data;

【问题讨论】:

    标签: jquery datatables


    【解决方案1】:

    使用columns.render 选项为单元格生成内容。

    例如,根据tipo_evento变量的值生成内容:

    { 
        "render": function(data, type, full, meta){
           if(type === 'display'){
              if(tipo_evento == 3213){
                 data = "";
              } else {
                 data = " <a href='#' id='select'>Sustituir</a> ";
              }
           }
    
           return data;
        },
        // ... other options ...
        "autoWidth": true, 
        "orderable": false, 
        "sClass": "alignRight", 
        "sWidth": "5%" 
    }
    

    【讨论】:

    • @PabloTobar,使用上面的列定义而不是带有defaultContent 选项的列定义。
    • 感谢我添加了该列,但您能帮忙指定一个大小吗?刚刚编辑了我的问题,请检查结尾
    • @PabloTobar,只包括其他选项以及render 选项,更新了我的答案。
    猜你喜欢
    • 2013-09-07
    • 2014-05-19
    • 2021-08-31
    • 2021-04-04
    • 1970-01-01
    • 1970-01-01
    • 2021-03-02
    • 1970-01-01
    • 2016-02-03
    相关资源
    最近更新 更多