Add an Action Button based on column value using DataTable

问题

I have a text file that contains data in json format. The datas are displayed in the [table] (http://live.datatables.net/zuhojida/1/edit). Its got 3 columns, Alert, Ack, and Action.

This is my datatable code:

<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>

I want to know if dataTable can first check the value in the Ack column and if value is = 0 (this means that the alert has not yet been acknowledged), then it should display a button one can click on to acknowledge the alert. That button will change the value from 0 to 1.

Is this something DataTables can do?

Thanks

回答1:

You can try something like below :

$(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

来源：https://stackoverflow.com/questions/25305020/add-an-action-button-based-on-column-value-using-datatable

标签

jquery

datatable

jquery-datatables