I want to add some buttons (edit/delete) to a column content.

I want to add some buttons (edit/delete) to a column content.

HaseebHaseeb Posts: 5Questions: 2Answers: 0
$('#schedule_reports').DataTable({
  "searching": false,
  "ordering": false,
  "bLengthChange": false,
  "ajax": {
    "url": API_host + '/api/Report/GetAllScheduledReports',
    "type": 'GET',

    "dataSrc": function(json) {
      return json.Data.ScheduledReports;
    },
    "crossDomain": true,
    "beforeSend": function(xhr) {
      xhr.setRequestHeader('Authorization', 'bearer ' + API_token);
    },
    "dataType": 'json'
  },
  "columns": [{"data": "ReportName"},{"data": "FrequencyName"},{"data": "DateRangeName"}],
  "processing": true

});

The JSON being returned is this:

 {
  "MessageCode": 1,
  "Message": "Success",
  "Data": {
  "ScheduledReports": [
   {
    "Id": 2,
    "ClientID": 10,
    "ReportID": null,
    "Frequency": 0,
    "SendingTime": "0001-01-01T00:00:00",
    "DateRange": 0,
    "ReportXParameters": [],
    "ReportName": "Driver Behavior Report - Reward Drivers",
    "FrequencyName": "Weekly, Each Monday",
    "DateRangeName": "Today",
    "Name": null,
    "ExternalId": null,
    "Version": null
   },
   {
    "Id": 3,
    "ClientID": 10,
    "ReportID": null,
    "Frequency": 0,
    "SendingTime": "0001-01-01T00:00:00",
    "DateRange": 0,
    "ReportXParameters": [],
    "ReportName": "Groups Report",
    "FrequencyName": "Monthly, 1st of Each Month",
    "DateRangeName": "Last 30 Days",
    "Name": null,
    "ExternalId": null,
    "Version": null
  },
  {
    "Id": 4,
    "ClientID": 10,
    "ReportID": null,
    "Frequency": 0,
    "SendingTime": "0001-01-01T00:00:00",
    "DateRange": 0,
    "ReportXParameters": [],
    "ReportName": "Infractions & Exceptions Report",
    "FrequencyName": "Quarterly, 1st of Each Quarter",
    "DateRangeName": "This Month",
    "Name": null,
    "ExternalId": null,
    "Version": null
  },
  {
    "Id": 5,
    "ClientID": 10,
    "ReportID": null,
    "Frequency": 0,
    "SendingTime": "0001-01-01T00:00:00",
    "DateRange": 0,
    "ReportXParameters": [],
    "ReportName": "Training Course Aggregate Report",
    "FrequencyName": "Monthly, 1st of Each Month",
    "DateRangeName": "Last Month",
    "Name": null,
    "ExternalId": null,
    "Version": null
  },
  {
    "Id": 16,
    "ClientID": 10,
    "ReportID": null,
    "Frequency": 0,
    "SendingTime": "0001-01-01T00:00:00",
    "DateRange": 0,
    "ReportXParameters": [],
    "ReportName": "Training Course Aggregate Report",
    "FrequencyName": "Quarterly, 1st of Each Quarter",
    "DateRangeName": "Last 7 Days",
    "Name": null,
    "ExternalId": null,
    "Version": null
  },
  {
    "Id": 17,
    "ClientID": 10,
    "ReportID": null,
    "Frequency": 0,
    "SendingTime": "0001-01-01T00:00:00",
    "DateRange": 0,
    "ReportXParameters": [],
    "ReportName": "Training Course Aggregate Report",
    "FrequencyName": "Quarterly, 1st of Each Quarter",
    "DateRangeName": "All Time",
    "Name": null,
    "ExternalId": null,
    "Version": null
  },
  {
    "Id": 35,
    "ClientID": 10,
    "ReportID": null,
    "Frequency": 0,
    "SendingTime": "0001-01-01T00:00:00",
    "DateRange": 0,
    "ReportXParameters": [],
    "ReportName": "Driver Behavior Report - Reward Drivers",
    "FrequencyName": "Monthly, 1st of Each Month",
    "DateRangeName": "Last 30 Days",
    "Name": null,
    "ExternalId": null,
    "Version": null
  },
  {
    "Id": 36,
    "ClientID": 10,
    "ReportID": null,
    "Frequency": 0,
    "SendingTime": "0001-01-01T00:00:00",
    "DateRange": 0,
    "ReportXParameters": [],
    "ReportName": "Driver Behavior Report - Reward Drivers",
    "FrequencyName": "Weekly, Each Monday",
    "DateRangeName": "Last Year",
    "Name": null,
    "ExternalId": null,
    "Version": null
  },
  {
    "Id": 37,
    "ClientID": 10,
    "ReportID": null,
    "Frequency": 0,
    "SendingTime": "0001-01-01T00:00:00",
    "DateRange": 0,
    "ReportXParameters": [],
    "ReportName": "Driver Behavior Report - Reward Drivers",
    "FrequencyName": "Quarterly, 1st of Each Quarter",
    "DateRangeName": "This Month",
    "Name": null,
    "ExternalId": null,
    "Version": null
  },
  {
    "Id": 38,
    "ClientID": 10,
    "ReportID": null,
    "Frequency": 0,
    "SendingTime": "0001-01-01T00:00:00",
    "DateRange": 0,
    "ReportXParameters": [],
    "ReportName": "Driver, Infractions & Course Detail Report",
    "FrequencyName": "Monthly, 1st of Each Month",
    "DateRangeName": "Last 30 Days",
    "Name": null,
    "ExternalId": null,
    "Version": null
  }
]
 },
"recordsTotal": 10,
"recordsFiltered": 10

The html of the table looks like the following:

 <div class="schedule_integration scheduler-load">
      <table class="display" id="schedule_reports">
        <thead>
          <th>Scheduled Reports</th>
          <th>Date Range</th>
          <th>Report Frequency</th>
          <th>Action</th>
        </thead>
      </table>
    </div>

I need the buttons of Edit and Delete under the Action column. The problem is there is no Action attribute being returned from JSON. Neither I am passing in the columns option the action attribute as you can see above since that is not being returned from the server. I don't have the flexibility of changing the response. Each record being returned has an ID attribute I would need when user will click on those Edit and Delete Buttons. Can I use columnDefs to attain what I need? What are my options? If I use the target attribute of columnDefs options to -1 will it set those buttons under Action or under the last option passed in columns data option? How should I go around this?

This discussion has been closed.