使用延迟加载数据为表中的内部按钮设置类

jquery.dataTables.min.js：DataTables 1.10.12

如果状态在DataTables中不是“成功”，我需要禁用export按钮（ 延迟加载 ）：

代码：

 var data_table = task_submit_table.DataTable({ "processing": true, "serverSide": true, "deferRender": true, "deferLoading": 0, "ordering": true, "order": [[ 0, "desc" ]], "ajax": { "url": "get_task_tasks/", "type": "POST", "data": function (d) { var form_data = {"ukis_project_id": ukis_proj_id.find(":selected").val(), "task_project_id": task_proj_id.val(), "project_salt": proj_salt.val()}; d.form = JSON.stringify(form_data); } }, "columns": [ {"title": "Id", "data": "id"}, {"title": "Date", "data": "date"}, {"title": "Project Id", "data": "project_id"}, {"title": "Project Name", "data": "project_name"}, {"title": "project", "data": "biobank_project"}, {"title": "#Hashes", "data": "nhashes"}, {"title": "#Success", "data": "nsuccess"}, {"title": "#Fail", "data": "nfail"}, {"title": "Status", "data": "status"}, {"title": "Report", "data": null}, {"title": "", "data": null}, {"title": "", "data": null} ], "columnDefs": [ { "targets": [0], "visible": false, "searchable": true }, { "targets": [2], "visible": false, "searchable": true }, { "targets": -3, "data": null, "defaultContent": "
"+ "export
" }, { "targets": -2, "data": null, "defaultContent": "delete" }, { "targets": -1, "data": null, "defaultContent": "restart" } ], "dom": "rtip", "buttons": [ { "title": "Refresh", "text": "Refresh", "action": function () { data_table.draw(); } } ] }); data_table.draw(); 

我知道我可以在disabled/active类的帮助下禁用/启用Bootstrap中的按钮，例如export" 。

但是，在绘制表格并从服务器获取数据后，如何才能访问这些按钮？

看起来像initComplete "initComplete": function(settings, json) {}正是我正在寻找的。 我试了一下但是在调用rows（）方法后只返回空数组。 并且json undefined 。

Answer 1

试试这个，我只是测试它并让它改变行数据。 我也一直得到rows（）函数的空响应。 所以我只是遍历json数据对象。

 initComplete: function(settings, json){ // Assign the JSON array to a variable for easier readability var rows = json["data"]; // Loop through it for(var i = 0; i < rows.length; i++){ if(rows[i]["Status"] == "success"){ // Make changes to the row data rows[i]["Report"] == ""; // .. remove the other two buttons in here too // Set the row this.api().row(i).data(row[i]); } } } 

Answer 2

可以通过rowCallback函数访问延迟DataTable中的行。 该函数允许在从服务器返回数据后为每个表绘制处理每一行。

现在我执行以下操作来禁用/启用按钮：

 var data_table = task_submit_table.DataTable({ "rowCallback": function(row, data) { if (data.status === 'success') { $('td:eq(-3) a', row).removeClass('disabled'); } if (data.status === 'success' || data.status === 'pending' || data.status === 'error') { $('td:eq(-2) a', row).removeClass('disabled'); } if (data.status === 'success' || data.status === 'error') { $('td:eq(-1) a', row).removeClass('disabled'); } }, ... { "targets": -3, "data": null, "defaultContent": "
"+ "export
" }, { "targets": -2, "data": null, "defaultContent": "delete" }, { "targets": -1, "data": null, "defaultContent": "restart" } ...