使用DataTable根据列值添加一个Action按钮 [英] Add an Action Button based on column value using DataTable

问题描述

我有一个包含json格式数据的文本文件。数据显示在[表格]中（ http://live.datatables.net/zuhojida/1 / edit ）。它有3列，警报，确认和操作。

这是我的数据表代码：

 < script type =text / javascriptcharset =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可以做的事吗？

谢谢

解决方案

您可以尝试以下内容：

 code> $（document）.ready（function（）{
 var addButton = function（）{
 $（'＃maint-table tr td' b 
 $ b if（$（this）.index（）== 1&& $（this）.html（）==0）
 {
 $（this ）.html（$（'< input type =buttonvalue =ACKonclick =$（this）.parent（）。html（1）;>'））; 
} $ 
 
 
 var refreshMaintTable = $（'＃maint-table'）。dataTable（{
bInfo：false，
 sAjaxSource：'ajax / maint_json.txt'，
bServerSide：true，
bJQueryUI：true，
bPaginate：false，
bLengthChange ，
bF $$$$$$$$$$$$$ ：maint_action}，
]，
fnDrawCallback：function（oSettings）{
 //页面上的调用添加按钮
 addButton（）; 
} 
}）; 
 
 
 setInterval（function（）{
 refreshMaintTable.fnDraw（）; 
 addButton（）; 
}，50000）; 
}）; 
  

演示

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

解决方案

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

这篇关于使用DataTable根据列值添加一个Action按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！