0

I want to check the Article's Status, if true the Edit button will be disabled else the user can click and switch to the Edit page. How to use it?

                    return '<a href="Student/EditArticle/' + data + '" class="btn btn-success mr-1"> Edit </a>';
                }}
        ],
        order: [1, 'asc']
    });
Huy Nguyen
  • 27
  • 7
  • You could just return the string " Edit ". That will take up the same space and not be clickable. – Tim Roberts Mar 17 '21 at 18:21
  • It came up when I hadn't done the status check, I tried it but it wasn't successful so I left it there and asked the question. – Huy Nguyen Mar 17 '21 at 18:23

1 Answers1

0

The column render function you are using:

render: function (data) { ... }

is capable of accessing all the data in the current row. Its full signature is:

render: function ( data, type, row, meta ) { ... }

So, you can use the row parameter to access other columns in that row, such as row.status:

{
  data: 'id',
  className: "center",
  title: 'Actions',
  render: function (data, type, row, meta) {
    if (row.status === true) {
      return '<a href="Student/EditArticle/' + data + '" class="btn btn-success mr-1"> Edit </a>';
    } else {
      return '<a href="Student/EditArticle/' + data + '" class="btn btn-success mr-1" disabled> Edit </a>';
    }
  }
}

You can see further details and examples here.

It is worth looking at why the type parameter is provided and how it is used. It basically helps you to provide multiple versions of a value - one value for the table display (the HTML link); a different value for sorting; another value for filtering, and so on.

So, for example, for your clickable link, you may prefer the sort and filter values to be simply the data value (without any of the extraneous HTML).

But this is completely optional - you don't have to use it. See orthogonal data for more info.

Update:

I forgot that a hyperlink cannot be disabled in the same way as a button (so you cannot use "disabled"). Instead, you can look at these approaches, or do what TimRoberts suggested in your question's comments. Having said that, the render function with the row parameter should be what you need.

else {
  return 'Edit'; // or, alternatively: return ''
}
andrewJames
  • 19,570
  • 8
  • 19
  • 51
  • 1
    I tried it but it doesn't seem to work. It can still be clicked without being disabled as desired. – Huy Nguyen Mar 18 '21 at 06:05
  • That is my mistake - I forgot that a hyperlink cannot be disabled in the same way as a button (so you cannot use "disabled"). Instead, you can look at [these approaches](https://stackoverflow.com/questions/13955667/disabled-href-tag/13955695), or do what TimRoberts suggested in your question's comments. Having said that, the render function with the `row` parameter should be what you need. – andrewJames Mar 18 '21 at 12:11