如何在數據表中添加不是數據庫的額外字段

Question

我正在試圖在數據表中添加edit和delete按鈕。

我有HTML

<table id="example" class="display" cellspacing="0" width="100%"> 
    <thead> 
     <tr> 
      <th>Theater name</th> 
      <th>Action</th> 
     </tr> 
    </thead> 
    <tfoot> 
     <tr> 
      <th>Theater name</th> 
      <th>Action</th> 
     </tr> 
    </tfoot> 
</table> 

$(document).ready(function() { 
    $('#example').DataTable({ 
     "processing": true, 
     "serverSide": true, 
     "ajax": "<?php echo JRoute::_('index.php?option=com_wsmovies&task=addtheatres'); ?>" 
    }); 
}); 

我試着在thead和tbody添加列，但它給我警告說

DataTables warning: table id=example - Requested unknown parameter '1' for row 0, column 1. For more information about this error, please see http://datatables.net/tn/4

服務器返回數據

{"draw":0,"recordsTotal":57,"recordsFiltered":57,"data":[["Tiger","Nixon"],["Garrett","Winters"],["Ashton","Cox"],["Cedric","Kelly"],["Airi","Satou"],["Brielle","Williamson"],["Herrod","Chandler"],["Rhona","Davidson"],["Colleen","Hurst"],["Sonya","Frost"],["Jena","Gaines"],["Quinn","Flynn"],["Charde","Marshall"],["Haley","Kennedy"],["Tatyana","Fitzpatrick"],["Michael","Silva"],["Paul","Byrd"],["Gloria","Little"],["Bradley","Greer"],["Dai","Rios"],["Jenette","Caldwell"],["Yuri","Berry"],["Caesar","Vance"],["Doris","Wilder"],["Angelica","Ramos"],["Gavin","Joyce"],["Jennifer","Chang"],["Brenden","Wagner"],["Fiona","Green"],["Shou","Itou"],["Michelle","House"],["Suki","Burks"],["Prescott","Bartlett"],["Gavin","Cortez"],["Martena","Mccray"],["Unity","Butler"],["Howard","Hatfield"],["Hope","Fuentes"],["Vivian","Harrell"],["Timothy","Mooney"],["Jackson","Bradshaw"],["Olivia","Liang"],["Bruno","Nash"],["Sakura","Yamamoto"],["Thor","Walton"],["Finn","Camacho"],["Serge","Baldwin"],["Zenaida","Frank"],["Zorita","Serrano"],["Jennifer","Acosta"],["Cara","Stevens"],["Hermione","Butler"],["Lael","Greer"],["Jonas","Alexander"],["Shad","Decker"],["Michael","Bruce"],["Donna","Snider"]]}

誰能幫我解決這個問題

Answer 1

你只需要添加的HTML在你的DataTable定義

$('#example').DataTable({ 
    "processing": true, 
    "serverSide": true, 
    "ajax": "<?php echo JRoute::_('index.php?option=com_wsmovies&task=addtheatres'); ?>", 
    "columns": [ 
      { 
       "targets": -1, 
       "data": null, 
       "orderable": false, 
       "defaultContent": [ 
        "<i class='glyphicon glyphicon-edit'></i>"+ 
        "<i class='glyphicon glyphicon-trash'></i>"] 

      } 

    ] 
}); 

DEMO：https://jsfiddle.net/Prakash_Thete/evfchh7q/

如下更改表定義（增加了一個頭因爲您正在爲兩列+編輯按鈕列發送數據）。

<table id="example" class="display" cellspacing="0" width="100%"> 
    <thead> 
     <tr> 
      <th>Theater name</th> 
      <th>One more header</th> 
      <th>Action</th> 
     </tr> 
    </thead> 
    <tfoot> 
     <tr> 
      <th>Theater name</th> 
      <th>One more header</th> 
      <th>Action</th> 
     </tr> 
    </tfoot> 
</table>