Set classes for internal buttons in a table with deferred loading of data

问题

jquery.dataTables.min.js: DataTables 1.10.12

I need to disable export button if the status is not "success" in the DataTables like this (deferred loading):

The code:

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();

I know that I can disable/enable buttons in the Bootstrap with help of disabled/active classes, like this <a href='#' class='btn btn-default disabled'>export</a>".

But how can I get access to those buttons after the table is drawn and data are fetched from the server?

It seems like initComplete "initComplete": function(settings, json) {} is what I'm looking for. I tried it but only empty array is returned after calling rows() method. And the json is undefined.

回答1:

Try this, I just tested it and got it altering row data. I kept get an empty response from the rows() function, too. So I just loop through the json data object.

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]);

    }
  }
}

回答2:

The rows in a deferred DataTables can be accessed via the rowCallback function. The function allows processing each row after the data has been returned from a server for each table draw.

And now I did the following to disable/enable buttons:

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>"
  }
  ...

来源：https://stackoverflow.com/questions/40632492/set-classes-for-internal-buttons-in-a-table-with-deferred-loading-of-data