Keith Harris Keith Harris - 21 days ago 8
Ajax Question

Datatables display columns by Index rather than name

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

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.