Datatables display columns by Index rather than name

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?

If your first example works, that means that your data is an array of objects. You can use columnDefs.targets to define columns in any order by column index if that's what you mean, but you still need to use data to define data property for each column as id, firstName, etc. — Gyrocode.com
– Gyrocode.com, Commented Nov 11, 2016 at 4:18
As Gyrocode.com said you seem to use a array of objects. I would mention that it is possible to reference a array of array by its index number, but you will have to convert the result of the ajax. This might mean you have to handle the request yourself. here is an example of an array of objects converted into an array of arrays and then referenced by id jsfiddle.net/m8psojk3/6 — Tom Glover
– Tom Glover, Commented Nov 14, 2016 at 16:01

Keith Harris · Accepted Answer · 2016-11-17 06:30:15Z

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.

Collectives™ on Stack Overflow

Datatables display columns by Index rather than name

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related