Question

以下代码适用于我：

$(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>";
                        }
                    }
                ],

有没有办法使用列索引而不是像这样的名字？：

$(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>";
                        }
                    }
                ],

我基本上想要做的就是能够显示Web API源的前4列，甚至可以选择INDEX显示的四列而不是名称。这可能吗？

Answer 1

我没有像建议的那样转换AJAX调用的结果，而是实现了一个＆＃34;丑陋的黑客＆＃34;证明是有效的。我真的很惊讶我的问题不能通过＆＃34; index＆＃34;来解决。所以我创建了一个伪索引，它从表标记中的数据属性中获取列名，并将其提供给编号变量，如下所示：

 //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>";
                }
            }
        ],

这种方法非常灵活，因为我可以在不改变代码的情况下即时交换列的显示顺序。尽管如此，我仍然更喜欢索引方法。

数据表按索引而不是名称显示列

1 个答案: