Datatables display columns by Index rather than name - ajax

Question

The following code works fine for me:
$(document).ready(function () {
var t = $("#users").DataTable({
columnDefs: [{
"searchable": false,
"orderable": false,
"targets": 0
}],
order: [[1, 'asc']],
ajax: {
url: "/api/users",
dataSrc: ""
},
columns: [
{
data: "id"
},
{
data: "firstName"
},
{
data: "lastName"
},
{
data: "userName"
},
{
data: "id",
render: function (data) {
return "<a href='#'><i class='fa fa-eye js-view' data-id='" + data + "'></i></a> | <a href='#'><i class='fa fa-pencil js-edit' data-id='" + data + "'></i></a> | <a href='#'><i class='fa fa-trash js-delete' data-id='" + data + "'></i></a>";
}
}
],
Is there a way to use column indexes instead of names like this?:
$(document).ready(function () {
var t = $("#users").DataTable({
columnDefs: [{
"searchable": false,
"orderable": false,
"targets": 0
}],
order: [[1, 'asc']],
ajax: {
url: "/api/users",
dataSrc: ""
},
columns: [
{
data: 0
},
{
data: 1
},
{
data: 2
},
{
data: 3
},
{
data: 0,
render: function (data) {
return "<a href='#'><i class='fa fa-eye js-view' data-id='" + data + "'></i></a> | <a href='#'><i class='fa fa-pencil js-edit' data-id='" + data + "'></i></a> | <a href='#'><i class='fa fa-trash js-delete' data-id='" + data + "'></i></a>";
}
}
],
All I basically want to do is to be able to display the first 4 columns of a web API source or even choose which four columns to display by INDEX not by name. Is this possible?

Answer 1

Instead of converting the result of the AJAX call as was suggested, I implemented an "ugly hack" that proved effective. I was really surprised that my problem could not be solved conventionally by "index" so instead I created a pseudo-index that grabs the column names from data attributes in the table tag and fed it to numbered variables like this:
//Display first 4 columns of data
var f1 = $(".grid").attr("data-f1");
var f2 = $(".grid").attr("data-f2");
var f3 = $(".grid").attr("data-f3");
var f4 = $(".grid").attr("data-f4");
var f5 = $(".grid").attr("data-f5"); //this value is the same as f1
var t = $(".grid").DataTable({
columnDefs: [{
"searchable": false,
"orderable": false,
"targets": 0
}],
order: [[1, 'asc']],
ajax: {
url: "/api/users",
dataSrc: ""
},
columns: [
{
data: f1
},
{
data: f2
},
{
data: f3
},
{
data: f4
},
{
data: f5,
render: function (data) {
return "<a href='#'><i class='fa fa-eye js-view' data-id='" + data + "'></i></a> | <a href='#'><i class='fa fa-pencil js-edit' data-id='" + data + "'></i></a> | <a href='#'><i class='fa fa-trash js-delete' data-id='" + data + "'></i></a>";
}
}
],
This approach proved to be surprisingly flexible, as I could swap the display order of the column on the fly without changing the code. Still, I would have preferred the indexed approach, though.