javascript - 如何使用 ajax 在 jquery 数据表中显示附加标签？

Question

这是我的js代码:

$(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 class="fa fa-flag"></i>)。我该怎么做？

Answer 1

您可以使用 columns.render为列定义自定义渲染器的选项。

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