ajax - Datatables display columns by Index rather than name -
the following code works fine 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 way use column indexes instead of names 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 want able display first 4 columns of web api source or choose 4 columns display index not name. possible?
instead of converting result of ajax call suggested, implemented "ugly hack" proved effective. surprised problem not solved conventionally "index" instead created pseudo-index grabs column names data attributes in table tag , fed numbered variables 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 same 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 surprisingly flexible, swap display order of column on fly without changing code. still, have preferred indexed approach, though.
Comments
Post a Comment