2016-11-11 65 views
0

下面的代碼工作正常,我:數據表顯示的列由指數而非名稱

$(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顯示的列名稱而不是名稱。這可能嗎?

+0

如果你的第一個例子工作,這意味着你的數據是一個對象數組。你可以使用['columnDefs.targets'](https://datatables.net/reference/option/columnDefs.targets)按列索引以任意順序定義列,如果這就是你的意思,但你仍然需要使用'data '爲每列定義數據屬性爲'id','firstName'等。 –

+0

由於Gyrocode.com表示您似乎使用了一組對象。我會提到可以通過它的索引號引用數組的數組,但是你必須轉換ajax的結果。這可能意味着你必須自己處理請求。 這裏是一個轉換成數組數組然後被id引用的對象數組的例子http://jsfiddle.net/m8psojk3/6/ –

回答

0

我沒有像所建議的那樣轉換AJAX調用的結果,而是實現了一個證明有效的「醜陋的黑客」。我真的很驚訝,我的問題不能通過「索引」常規解決,所以我創建了一個僞索引,從列表標籤中的數據屬性獲取列名稱並將其提供給如下的編號變量:

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

這種方法證明是非常靈活的,因爲我可以在不更改代碼的情況下即時交換列的顯示順序。儘管如此,我仍然更喜歡索引方法。