javascript - propiedades - Editar campos jQuery Datatable

propiedades datatable jquery

Question

Me gustaría generar una etiqueta bootstrap para un valor de un campo en una tabla de datos JQuery. Los valores posibles de este campo pueden ser ''0'' o ''1'' y, dependiendo del resultado, quiero decidir qué etiqueta de arranque quiero imprimir en la tabla de datos. Lamentablemente, no sé cómo puedo hacer esto si la declaración para este caso.

Mi JQuery:

$(document).ready(function() {  
    $(''#accountOverview'').dataTable( {
        "ajax": {
            "url": "/database/accounts.php",
            "data": {"action": "selectAccounts"},
            "dataSrc": ""
        },
        "columns": [
            { "data": "email" },
            { "data": "platform" },
            { "data": "coins" },
            { "data": "profitDay" },
            { "data": "playerName" },
            { "data": "tradepileCards" },
            { "data": "tradepileValue" },
            { "data": "enabled" }
        ],
        "autoWidth": false
    });
});

Necesito usar algo como esto para el resultado del campo "habilitado":

if(enabled==1) <label class="label label-success">Online</label>
else <label class="label label-error">Offline</label>

Tabla HTML:

<table id="accountOverview" class="table datatable">
    <thead>
        <tr>
            <th>E-Mail</th>
            <th>Platform</th>
            <th>Coins</th>
            <th>Profit last 24h</th>
            <th>Playername</th>
            <th>Tradepile Cards</th>
            <th>Tradepile Value</th>
            <th>Status</th>
        </tr>
    </thead>
    <tbody id="accountList">
        <!-- List all accounts -->
    </tbody>
</table>

La etiqueta debe estar en el campo "estado" = la última fila.

Answer 1

Siguiendo el "draw" de dataTable (que ocurre después de que AJAX carga sus datos), puede buscar el último td de cada fila y usar wrapInner() para inyectar el HTML que desea. Entonces, en tu caso, prueba:

var apply_label=function(){
    $(''#accountOverview'').find(''td:last-child'').not('':has(.label)'').each(function(){
        if( this.innerHTML==="1"){
            $(this).wrapInner(''<span class="label label-success"></span>'');
        }
        else {
            $(this).wrapInner(''<span class="label label-danger"></span>'');
        }
    });
};
$(''#accountOverview'').dataTable( {
    "ajax": {
        "url": "/database/accounts.php",
        "data": {"action": "selectAccounts"},
        "dataSrc": ""
    },
    "columns": [
        { "data": "email" },
        { "data": "platform" },
        { "data": "coins" },
        { "data": "profitDay" },
        { "data": "playerName" },
        { "data": "tradepileCards" },
        { "data": "tradepileValue" },
        { "data": "enabled" }
    ],
    "autoWidth": false,
    "drawCallback": function( settings ) {
        apply_label();
    }
});

Notas:

1. Creo que quieres span (no label ).
2. Creo que quieres .label-danger (no .label-error ).

Compruébelo en http://jsfiddle.net/jhfrench/wrkkbcf1/.