將索引列添加到數據表

Question

假設我有以下 json 顯示在我的 DataTable 中：

 // JSON structure for each row in this example:
    //   {
    //      "engine": {value},
    //      "browser": {value},
    //      "platform": {value},
    //      "version": {value},
    //      "grade": {value}
    //   }
    $('#example').dataTable( {
      "ajaxSource": "sources/objects.txt",
      "columns": [
        { "data": "engine" },
        { "data": "browser" },
        { "data": "platform" },
        { "data": "version" },
        { "data": "grade" }
      ]
    } );

我想要的是，向該數據表添加一個索引列以對行進行編號。 像這樣的事情：

 "columns": [
        {"data" : "Index"},      <------- this should number my rows 
        { "data": "engine" },
        { "data": "browser" },
        { "data": "platform" },
        { "data": "version" },
        { "data": "grade" }
      ]

注意：我沒有任何索引作為在我的 Json 中傳遞的數據（雖然我可以這樣做，但有沒有更好的解決方案來在我的 Javascript 中處理這個問題？）

幫助贊賞..！

Answer 1

這個概念是您必須在 javascript 或服務器中創建初始“索引”值。 這些值可以是零或只是空字符串或其他任何東西（不需要計算計數器或其他東西）。 例如，您可以在收到數據后在 javascript 中創建一個索引列：

for (var i=0; i<data.length; i++){
        data[i].index = 0;
    }

因此，現在您的數據中有索引列，您將其聲明為表的第一列：

$('#example').dataTable( {
  .....
  "columns": [
    { "data": "index" },
    { "data": "engine" },
    { "data": "browser" },
    { "data": "platform" },
    { "data": "version" },
    { "data": "grade" }
  ]
} );

現在索引值全部為 0。要創建將顯示在表中的實際索引值，您需要添加一個事件處理程序來偵聽表的排序和搜索。 這些事件如在所描述的將被計算的實際指數值的數據表例子：

datatable_object.on( 'order.dt search.dt', function () {
    datatable_object.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
        cell.innerHTML = i+1;
    } );
} ).draw();

當表格被搜索或排序時（排序是在創建表格時默認完成的 - 請參閱 order 選項的默認值），“Index”單元格的 innerHtml 將根據行的索引進行計算。

Answer 2

嘗試這個。

"render": function ( data, type, full, meta ) {
    return  meta.row + 1;
} },

Answer 3

只需將下面的代碼添加到您的數據表中

{ 'data': 'id', defaultContent: '' },
"columnDefs": [   ////define column 1 , make searchable false 
    {
        "searchable": false,
        "orderable": false,
        "targets": 0

    },

以下是更新后的代碼：

 var table=$('#example').dataTable( {
     "ajaxSource": "sources/objects.txt",
     "columns": [
         { 'data': 'id', defaultContent: '' },
         { "data": "engine" },
         { "data": "browser" },
         { "data": "platform" },
         { "data": "version" },
         { "data": "grade" },
     "columnDefs": [   ////define column 1
         {
             "searchable": false,
             "orderable": false,
             "targets": 0
         },

     ]
});

以下行將為您的id(index)列添加數字：

if (t.data().length != 0) {
    t.on('order.dt search.dt', function () {
        t.column(0, { search: 'applied', order: 'applied' }).nodes().each(function (cell, i) {
            cell.innerHTML = i + 1;
            t.cell(cell).invalidate('dom');
        });
    }).draw();

現場示例： http : //live.datatables.net/woboviqi/2/edit

Answer 4

需要使用 DT_RowIndex 來索引行。 像這樣 - ## 標題 ##

"columns": [
{ "data": 'DT_RowIndex'}, // row index
{ "data": "engine" },
{ "data": "browser" },
{ "data": "platform" },
{ "data": "version" },
{ "data": "grade" }
]

Answer 5

您可以使用unshift()

"columns": [
    { "data": "engine" },
    { "data": "browser" },
    { "data": "platform" },
    { "data": "version" },
    { "data": "grade" }
].unshift({"data" : "Index"})

---

或者通過使用臨時數組

var cols = [{
    "data": "engine"
}, {
    "data": "browser"
}, {
    "data": "platform"
}, {
    "data": "version"
}, {
    "data": "grade"
}];

cols.unshift({
    "data": "Index"
})

....
"columns": cols

Answer 6

看看這個 URL：數據表索引列

它可能會幫助你。

Answer 7

這是我的代碼，您可以參考：

1. 我的 DataTable 是完全自定義的。
2. 我正在使用 Ajax 和 CodeIgniter 從數據庫中獲取數據。

---

HTML

 <table width="100%" class="table table-striped table-hover" id="table_id_dataTable"> <thead> <tr> <th>Sr No</th> <th>Column 2</th> <th>Column 3</th> <th>Column 4</th> <th>Column 5</th> </tr> </thead> <tfoot> <tr> <th>Sr No</th> <th>Column 2</th> <th>Column 3</th> <th>Column 4</th> <th>Column 5</th> </tr> </tfoot> <tbody> </tbody> </table>

---

JS腳本

 var temp_table = $('#table_id_of_dataTable').DataTable({ "language": { "zeroRecords": "No records found." }, "ajax": { "type": "POST", "url": "<?php echo base_url('Controller/method'); ?>" }, "responsive": true, "columnDefs": [ { "searchable": false, "orderable": false, "targets": 0 } ], "order": [ [1, 'asc'] ], "columns": [ { "data": null }, // <-- This is will your index column { "data": "column_2_element_name_given_in_controller" }, { "data": "column_3_element_name_given_in_controller" }, { "data": "column_4_element_name_given_in_controller" }, { "data": "column_5_element_name_given_in_controller" } ] }); // Here we create the index column in jquery datatable temp_table.on('order.dt search.dt', function() { temp_nuggets_table.column(0, { search: 'applied', order: 'applied' }).nodes().each(function(cell, i) { cell.innerHTML = i + 1; }); }).draw();

希望能幫助到你！

Answer 8

這很簡單……這對我有用。

Cell: function ( data, type, full, counter ) {
        return  data.index + 1
}

Answer 9

在此處輸入鏈接描述

 Try this: var table=$('#example').dataTable( { "ajaxSource": "sources/objects.txt", "columns": [ { "data": null, "render": function (data, type, full, meta) { return meta.row + 1; } }, { "data": "engine" }, { "data": "browser" }, { "data": "platform" }, { "data": "version" }, { "data": "grade" } }); table.on('order.dt search.dt', function () { table.column(0, { search: 'applied', order: 'applied' }).nodes().each(function (cell, i) { cell.innerHTML = i + 1; }); }).draw();

Answer 10

在此處輸入鏈接描述

 Try this: var table=$('#example').dataTable( { "ajaxSource": "sources/objects.txt", "columns": [ { "data": null, "render": function (data, type, full, meta) { return meta.row + 1; } }, { "data": "engine" }, { "data": "browser" }, { "data": "platform" }, { "data": "version" }, { "data": "grade" } });