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

时间:2014-08-14 09:47:29

标签: jquery datatable jquery-datatables

我有一个包含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列中的值,如果值为= 0(这意味着尚未确认警报),那么它应该显示一个可以点击的按钮以确认警报。该按钮会将值从0更改为1.

这是DataTables能做的吗?

由于

1 个答案:

答案 0 :(得分: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