使用 DataTable 添加基于列值的操作按钮

Question

我有一个包含 json 格式数据的文本文件。数据显示在 [table] (http://live.datatables.net/zuhojida/1/edit) 中。它有 3 列，Alert、Ack 和 Action。

这是我的数据表代码：

<script type="text/javascript" charset="utf-8">

    $(document).ready(function() {
        var refreshMaintTable = $('#maint-table').dataTable( {
            "bInfo": false,
            "sAjaxSource": 'ajax/maint_json.txt',
            "bServerSide": true,
            "bJQueryUI": true,
            "bPaginate": false,
            "bLengthChange": false,
            "bFilter": false,
            "aoColumns": [
                { "mData": "maint_alert" },
                { "mData": "maint_ack" },
                { "mData": "maint_action" },
            ],
        } );
        setInterval (function() {
            refreshMaintTable.fnDraw();
        }, 50000);
    } );
</script>

我想知道 dataTable 是否可以先检查 Ack 列中的值，如果 value = 0（这意味着警报尚未被确认），那么它应该显示一个可以单击以确认的按钮警报。该按钮会将值从 0 更改为 1。

这是 DataTables 可以做到的吗？

谢谢

Answer 1

您可以尝试以下方法：

$(document).ready(function() {
        var addButton = function(){
             $('#maint-table tr td').each(function(){

            if($(this).index() == 1 && $(this).html() == "0")
             {
               $(this).html($('<input type="button" value="ACK" onclick="$(this).parent().html(1);">'));
              }
             });
           }

        var refreshMaintTable = $('#maint-table').dataTable( {
            "bInfo": false,
            "sAjaxSource": 'ajax/maint_json.txt',
            "bServerSide": true,
            "bJQueryUI": true,
            "bPaginate": false,
            "bLengthChange": false,
            "bFilter": false,
            "aoColumns": [
                { "mData": "maint_alert" },
                { "mData": "maint_ack" },
                { "mData": "maint_action" },
            ],
            "fnDrawCallback": function ( oSettings ) {
               // call add button on page load 
          addButton();
            }
        } );


        setInterval (function() {
            refreshMaintTable.fnDraw();
            addButton();
        }, 50000);
    } );   

Demo