Question

这是表格;

 <table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Extn.</th>
            <th>Start date</th>
            <th>Process</th>
        </tr>
    </thead>
</table>

这是javascript;

 $(document).ready(function () {
        var table = $('#example').DataTable({
            "sPaginationType": "full_numbers",
            "bProcessing": true,
            "bServerSide": true,
            "sAjaxSource": "ServerSideProcessor.aspx",
            "columnDefs": [{
                "targets": -1,
                "data": null,  
                "defaultContent": "<button type='button' class='btn btn-success'>PAY</button>"
            }]
        });

        $('#example tbody').on('click', 'button', function () {
            var data = table.row($(this).parents('tr')).data();
            alert(data[1] + " is recieved.");
        });
    });

我需要的是在＆＃34; Process＆＃34;中创建不同类型的按钮。例如，coloumb;

"columnDefs": [{
                "targets": -1,
                "data": null,  
               if(data[5]=='1')
                "defaultContent": "<button type='button' class='btn btn-success'>PAY</button>"
               else
"defaultContent": "<button type='button' class='btn btn-warning'>UNPAID</button>"
            }]
        });

我怎样才能做到这一点？谢谢

Answer 1

使用render定义输出，如下所示：

"render": function ( data, type, full) {
   if(full[5] == '1'){
        return "<button type='button' class='btn btn-success'>PAY</button>";
    }else{
        return "<button type='button' class='btn btn-warning'>UNPAID</button>";
    }
}

这是一个有效的jsfiddle DEMO。我已经改变了条件，使它可以使用虚拟数据，但你明白了。

使用ajax服务器端数据表动态创建不同的按钮

1 个答案: