How to display additional tag in jquery datatables with ajax?

Question

This is my js code :

$(document).ready(function () {
        var table = $('#users-data-table').DataTable({
            stateSave : true,
            processing : true,
            serverSide: true,
            ajax: {
                url: '@(Url.Action("GetFilterUsers", "Users", new { area = "Admin" }))',
                type: "GET"
            },
              columns: [
                { "data": "Name", "orderable" : false },
                { "data": "DateCreated", "orderable": false },
                { "data": "TotalBroadcasts", "orderable": false },
                { "data": "TotalViews", "orderable": false },
                { "data": "City", "orderable": false }
                { "data": "Country", "orderable": false }
            ]
        });
    });

HTML:

<div class="dataTable_wrapper">
                <table class="table table-striped table-bordered table-hover" id="users-data-table">
                    <thead>
                    <th>Name</th>
                    <th>DateCreated</th>
                    <th>Total broadcasts</th>
                    <th>Viewers</th>
                    <th>Location</th>
                    </thead>

                </table>
            </div>

I want to display "City", and "Country" in one column, and I want to display additional tag in every row with them (for example:<i class="fa fa-flag"></i>).How can I do this?

Can you pass an array into data? {"data: ["City", "Country"], "orderable": false} — Seth McClaine
– Seth McClaine, Commented Dec 9, 2015 at 19:51
Check this out: Single Cell of datatable in Jquery Datatables — Daniel Corzo
– Daniel Corzo, Commented Dec 9, 2015 at 20:39

Gyrocode.com · Accepted Answer · 2015-12-10 11:12:53Z

You can use columns.render option to define a custom renderer for a column.

$(document).ready(function () {
    var table = $('#users-data-table').DataTable({
        stateSave : true,
        processing : true,
        serverSide: true,
        ajax: {
            url: '@(Url.Action("GetFilterUsers", "Users", new { area = "Admin" }))',
            type: "GET"
        },
          columns: [
            { "data": "Name", "orderable" : false },
            { "data": "DateCreated", "orderable": false },
            { "data": "TotalBroadcasts", "orderable": false },
            { "data": "TotalViews", "orderable": false },
            { "data": "City", "orderable": false },
            { 
               "data": null,
               "orderable": false,
               "render": function(data, type, full, meta){
                  return '<i class="fa fa-flag"></i>' + full["City"] + ', ' + full["Country"];
               }
            }
        ]
    });
});

Collectives™ on Stack Overflow

How to display additional tag in jquery datatables with ajax?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related