Edit jQuery Datatable fields

Question

I would like to output a bootstrap label for one value of a field in a JQuery dataTable. This fields possible values can be '0' or '1' and depending on the result I want to decide which bootstrap label I want to output in the dataTable. Unfortunately I don't know how I can do this if statement for this case.

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

I need to use something like this for the result of the "enabled" field:

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

HTML Table:

<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>

The label needs to be in the field "status" = the last each row.

Where do you want the label to go (and what input element is it labeling)? What does the table look like before the label is injected? What should it look like after? — Jeromy French
– Jeromy French, Commented Dec 15, 2014 at 21:50
I have edited my question and added the information. The table is created by the jQuery part above. The last <td></td> (aka the field status should look like this when the result of the SQL query for this field is '1': <label class="label label-success">Online</label> else: <label class="label label-error">Offline</label> — kentor
– kentor, Commented Dec 15, 2014 at 22:31

Jeromy French · Accepted Answer · 2014-12-16 23:36:34Z

2

Following dataTable's "draw" (which happens after AJAX loads your data), you can look up the last td of each row and use wrapInner() to inject the HTML you want. So, in your case, try:

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

Notes:

I think you want span (not label).
I think you want .label-danger (not .label-error).

Check it out at http://jsfiddle.net/jhfrench/wrkkbcf1/.

edited Dec 16, 2014 at 23:36

answered Dec 15, 2014 at 23:15

Jeromy French

12.1k19 gold badges79 silver badges136 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

kentor Over a year ago

Thanks for this idea! I tried this but it didn't work for me. I guess it is because I loaded all the data via an Ajax Request and it is looking for the tds before the datatable is fully created or something? Its just doing nothing.

Jeromy French Over a year ago

Is the URL to what you are working on public? Can I take a peek?

Jeromy French Over a year ago

I'd need the link to the page that imports the AJAX (due to cross-domain security limitations, I can't just plug your URL into the jsFiddle).

Jeromy French Over a year ago

Updated answer to use drawCallback (datatables.net/reference/option/drawCallback). Tested this solution against your prototype and it works.

kentor Over a year ago

This works nice. Thanks your this work and sorry for accepting the answer so late.

Collectives™ on Stack Overflow

Edit jQuery Datatable fields

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related