Add Click Function To Two Buttons Inside Jquery DataTable

Question

I have a jquery datatable with dynamically added buttons for edit and delete as below:

Below is my JS:

 ajaxLoadSuccess: function (data) {
     var datatableVariable = $('#articleTable').DataTable({ 
         data: data,
         columns: [
             { 'data': 'Topic' },
             { 'data': 'SubTopic' },
             { 'data': 'Title' },
             //{ 'data': 'ParsedText' },
             {
                 'data': 'AddedOn', 'render': function (date) {
                      var date = new Date(parseInt(date.substr(6)));
                      var month = date.getMonth() + 1;
                      return date.getDate() + "/" + month + "/" + date.getFullYear();
                 }
             },
             { 'data': 'AddedBy' },
             {
                'data': 'Action', 'render': function (data, type, row, meta) {
                 return '<input id="btnEdit" type="button" value="Edit" class="sfBtn sfPrimaryBtn sfLocale" /> <input id="btnDelete" type="button" value="Delete" class="sfBtn sfPrimaryBtn sfLocale" />';
                 }
             }]
        });

And Below is my code for button click:

$("#articleTable tbody").on("click", "tr", function () {
    alert($(this).text());
});

The above function gets fired when I click Edit or Delete button, what I want is to add another function for delete button so that separate functions are fired when edit and delete is clicked. How can I acheve that?

Kiran Shahi · Accepted Answer · 2017-08-22 11:53:07Z

6

+50

In this code you have triggered the click event to tr. Instead of triggering event to tr you can trigger click event to specific id. Here you have #btnEdit and #btnDelete

so your code looks like

$(document).on('click', '#btnEdit', function () {
    // Do something on edit
});

$(document).on('click', '#btnDelete', function () {
    // Do something on delete
});

answered Aug 22, 2017 at 11:53

Kiran Shahi

8,0009 gold badges40 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Vanojx1 Over a year ago

This will always trigger click on the first row as selecting by id will target the first element in the DOM with that id.

Rupesh Jain Over a year ago

Have classes for the buttons instead of ID

Rupesh Jain Over a year ago

As the edit & delete buttons are repeating for every row, one cannot have different IDs for each one of them. Using classes will be ideal and the required functionality can also be acheived.

baj9032 · Accepted Answer · 2017-08-29 12:12:17Z

0

I think you want like this

$("#articleTable tbody tr").on("click", "input", function () {
    if ($(this).attr('id') == "btnEdit") {
        fn_edit();
    }
    else {
        fn_delete();
    }
});

edited Aug 29, 2017 at 12:12

answered Aug 22, 2017 at 11:54

baj9032

2,5923 gold badges25 silver badges41 bronze badges

Comments

Anmol Mehta · Accepted Answer · 2018-03-25 13:36:48Z

It seems like you want to perform the operation on specific row when the button of that row is clicked if that's the case then my suggestion would be access the button by giving the class to it because the approach you're using will generate multiple button with same ids and the html form cannot have elements with same ids.

ajaxLoadSuccess: function (data) {
 var datatableVariable = $('#articleTable').DataTable({ 
     data: data,
     columns: [
         { 'data': 'Topic' },
         { 'data': 'SubTopic' },
         { 'data': 'Title' },
         //{ 'data': 'ParsedText' },
         {
             'data': 'AddedOn', 'render': function (date) {
                  var date = new Date(parseInt(date.substr(6)));
                  var month = date.getMonth() + 1;
                  return date.getDate() + "/" + month + "/" + date.getFullYear();
             }
         },
         { 'data': 'AddedBy' },
         {
            'data': 'Action', 'render': function (data, type, row, meta) {
             return '<input type="button" value="Edit" class="btnEdit sfBtn sfPrimaryBtn sfLocale" /> <input type="button" value="Delete" class="btnDelete sfBtn sfPrimaryBtn sfLocale" />';
             }
         }]
    });

now you can access the button using the below code:

$("#articleTable tbody").on("click", ".btnEdit", function () {
                alert($(this).text());
            });

$("#articleTable tbody").on("click", ".btnDelete", function () {
                alert($(this).text());
            });

Collectives™ on Stack Overflow

Add Click Function To Two Buttons Inside Jquery DataTable

3 Answers 3

3 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Related