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>

我想在一列中显示“City”和“Country”，并且我希望在每一行中显示其他标记（例如：<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"];
               }
            }
        ]
    });
});

如何使用ajax在jquery数据表中显示其他标记？

1 个答案: