如何在不是数据库的数据表中添加额外的字段

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 警告：表 id=example - 请求第 0 行第 1 列的未知参数“1”。有关此错误的详细信息，请参阅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 ","戴维森"],["科琳","赫斯特"],["索尼娅","弗罗斯特"],["耶拿","盖恩斯"],["奎因","弗林"],["查德","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>"]

             }

    ]
} );

演示：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>