Question

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": "<form id='tool-export' method='post' action='export/'>"+
          "<a href='#' id='export' class='btn btn-default export-link'>export</a></form>"
      },
      {
        "targets": -2,
        "data": null,
        "defaultContent": "<a href='#' id='task-delete' class='btn btn-default task-delete-link'"+
          "data-toggle='modal' data-target='#confirm_modal'>delete</a>"
      },
      {
        "targets": -1,
        "data": null,
        "defaultContent": "<a href='#' id='task-restart' class='btn btn-default task-restart-link'"+
          "data-toggle='modal' data-target='#confirm_modal'>restart</a>"
      }
    ],
    "dom": "<\"dt-btn-floatLeft\"l><\"dt-btn-floatRight\"B><\"dt-btn-clear\">rtip",
    "buttons": [
      {
        "title": "Refresh",
        "text": "Refresh",
        "action": function () {
          data_table.draw();
        }
      }
    ]
  });
  data_table.draw();

我知道我可以在disabled/active类的帮助下禁用/启用Bootstrap中的按钮，例如<a href='#' class='btn btn-default disabled'>export</a>"。

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

似乎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": "<form id='tool-export' method='post' action='export/'>"+
      "<a href='#' id='export' class='btn btn-default disabled export-link'>export</a></form>"
  },
  {
    "targets": -2,
    "data": null,
    "defaultContent": "<a href='#' id='task-delete' class='btn btn-default disabled task-delete-link'"+
      "data-toggle='modal' data-target='#confirm_modal'>delete</a>"
  },
  {
    "targets": -1,
    "data": null,
    "defaultContent": "<a href='#' id='task-restart' class='btn btn-default disabled task-restart-link'"+
      "data-toggle='modal' data-target='#confirm_modal'>restart</a>"
  }
  ...

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

2 个答案: