Rendring row datatable jquery кнопка действий

Question

Я хочу добавить новый столбец в таблицу данных, который должен реагировать на щелчки с помощью раскрывающегося меню (обновление, удаление, информация и т. Д. c ...), как показано на пи c ниже. Как я могу сделать это с помощью следующего кода?

<table class="table table-striped table-bordered table-hover" id="Demands-table" cellspacing="0" style="width:100%">
      <thead>
            <tr>
                <th class="text-right">Item A</th>
                <th class="text-right">Item B</th>
                <th class="text-right">Item C</th>
                <th class="text-right">Item D</th>
                <th class="text-right">Item E</th>
                <th class="text-right">Item F</th>
                <th class="text-right">Item G</th>
                <th class="text-right">Item H</th>
                <th class="text-right">Item I</th>
              </tr>
        </thead>
    </table>

и в своем коде javascript я связываю свои Json данные с моими данными, но последний столбец «Действие» не получает сто

function getDemands() {
    dataTable = $("#Demands-table").DataTable({
    "dom": '<"pull-left"f><"pull-right"l>tip',
    "ajax": {
        "url": "/Demand/ListDemands",
        "type": "GET",
        "datatype": "json"
    },

    "columnDefs": [
        { "width": "5%", "targets": [0] },
        {
            "targets": [8],
            "data": "statute",
            "render": function (data, type, row, meta) {
                if (data == 'Item A') {
                    return '<span class="badge badge-success">' + data + '</span>';
                }
                if (data == 'Item B') {
                    return '<span class="badge badge-danger">' + data + '</span>';
                }
                if (data == 'Item C') {
                    return '<span class="badge badge-default">' + data + '</span>';
                }
            }
        },
        {
            "targets": [9],
            "data": null,
            "render": function (data, type, row, meta) {
                return '<span class="badge badge-success">' + data.Id + '</span>';

            }
        }

    ],

    "columns": [
        { "data": "Number of demands" },
        { "data": "Dates" },
        { "data": "Demand type" },
        { "data": "Category" },
        { "data": "Deposit" },
        { "data": "Designation" },
        { "data": "Entry" },
        { "data": "Avis_Organization" },
        { "data": "Statut" },
        { "data": "Action" } 
    ],

    "language": {

        "sProcessing":   "processing",
        "sLengthMenu":   "length menu",
        "sZeroRecords":  "zero records",
        "sInfo":         "info text",
        "sInfoEmpty":    "info empty",
        "sInfoFiltered": "info filtered",
        "sInfoPostFix":  "",
        "sSearch":       "search"
        "sUrl":          "",
        "emptyTable":    "empty table",
        "oPaginate": {
            "sFirst": "   first",
            "sPrevious": "previous",
            "sNext":     "next",
            "sLast":     "last",

        }
    }
})