CODEWITHSUNDEEP
jquerydatatables
Akshay Shrivastav
Akshay Shrivastav

Reputation: 1227

How to create a dynamic edit and delete option for each data in jQuery dataTables

Following is my HTML table code:

<table id="datatable-buttons" class="table table-bordered" style="overflow: hidden;">
<thead>
  <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
  </tr>
</thead>
<tbody></tbody>
<tfoot>
  <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
  </tr>
</tfoot>

This is the jQuery code I am using:

$(document).on('mouseover', '#datatable-buttons tbody tr', function()
        {
            $(this).addClass('bg-show');
            $(this).mouseout(function()
                {
                    if($(this).hasClass('bg-show'))
                        {
                            $(this).removeClass('bg-show');
                        }
                });

            $(this).children(":last").html("<i class='glyphicon glyphicon-edit edit'></i> &nbsp &nbsp <i class='glyphicon glyphicon-trash delete'></i>");
        });

    $(document).on('click', '#datatable-buttons tbody tr td td i.glyphicon.glyphicon-edit.edit', function()
        {
            var specificValue = $(this).children(":first").text();
            alert("Edit Clicked For "+specificValue);
        });

By using this code i am able to show the edit and thrash icon in the very last element of the DataTable however I am facing 2 issues.

1.) I want to perform specific operations on every data that is present in the datatable for edit and delete

2.) The shown edit and delete buttons stay constant they do not again revert back the values that are present in the salary field.

I have dumped the data in the dataTables via JSON format.

Upvotes: 1

Views: 1249

Answers (2)

Carsten L&#248;vbo Andersen
Carsten L&#248;vbo Andersen

Reputation: 27041

I've changed a bit in your code, but it should do now what you want.

In your "hover tr function" you replaces the Salary value with your buttons, I've rewrote the code so it adds the buttons after the Salary td

in your Edit click you had tr td td i.glyphicon note that you have 2 td, that is 1 too many.

also use .closest() to get the text of the first td as in $(this).closest("tr").children(":first").text();

$(document).on('mouseover', '#datatable-buttons tbody tr', function() {
  $(this).addClass('bg-show');
  $(this).mouseout(function() {
    if ($(this).hasClass('bg-show')) {
      $(this).removeClass('bg-show');
    }
  });

  $(this).children(":last:not(.custom)").after("<td class='custom'><i class='glyphicon glyphicon-edit edit'>edit</i> &nbsp &nbsp <i class='glyphicon glyphicon-trash delete'>delete</i></td>");
});

$(document).on('click', '#datatable-buttons tbody tr td i.glyphicon.glyphicon-edit.edit', function() {
  var specificValue = $(this).closest("tr").children(":first").text();
  alert("Edit Clicked For " + specificValue);
});

$(document).on('click', '#datatable-buttons tbody tr td i.glyphicon.glyphicon-trash.delete', function() {
  $(this).closest("tr").remove()
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="datatable-buttons" class="table table-bordered" style="overflow: hidden;">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th colsplan="2">Salary</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Peter</th>
      <th>Manager</th>
      <th>2</th>
      <th>23</th>
      <th>16-06-2017</th>
      <th>35000</th>
    </tr>
    <tr>
      <th>Peter</th>
      <th>Manager</th>
      <th>2</th>
      <th>23</th>
      <th>16-06-2017</th>
      <th>35000</th>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th colsplan="2">Salary</th>
    </tr>
  </tfoot>

Upvotes: 1

Ortund
Ortund

Reputation: 8245

Add an attribute to your <tr> that identifies the data in your markup. This you will do just by inserting the value from the data when you build each row.

<tbody>
    <tr id="1">
        ...
    </tr>
</tbody>

When you click on an icon (edit/trash icon), you can use this value to target the data that you want to work with.

$("#datatable-buttons tbody tr td td i.glyphicon.glyphicon-edit.edit").on("click", function () 
{
    var dataId = $(this)parent("tr").attr("id");

    // Populate data for the edit form and show that form.
}

Upvotes: 0

Related Questions