Answers

• colin Posts: 15,240Questions: 1Answers: 2,599

  November 2018 Answer ✓

  Hi @SalmanS ,

  I'm not clear if the edit button is in the row or outside. We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

  Cheers,

  Colin
• SalmanS Posts: 102Questions: 12Answers: 0

  November 2018

  Hi colin,
  first of all apologies, the column is inside the row as you can see i defined the column placed alongside the returned columns defination "data": "null", you will notice i used default content: <A type ="Button"> please see below the code:

  "defaultContent": '<a type="button" class="btn btn-primary" data-toggle="modal" data-target="#editMemberModal" onclick="editMember(data[0])"> <span class="glyphicon glyphicon-edit"></span>Edit</a>

                  "data":  "null",
                 "orderable":      false,
                  "className": "center",
                  "defaultContent": '<a type="button" class="btn btn-primary"  data-toggle="modal" data-target="#editMemberModal"  onclick="editMember(data[0])"> <span class="glyphicon glyphicon-edit"></span>Edit</a> / <a href="" class=class="btn btn-danger">Delete</a>'
              }
  
• SalmanS Posts: 102Questions: 12Answers: 0

  November 2018

  Hi colin,
  First of all my apologies - I was not sure about the test case earlier, will update this afternoon when I am close the home laptop,

  In the meantime, the column is inside the row within column destination, as you can noticed i defined the column placed alongside the returned columns definition "data": "null", you will notice i used default content: <A type ="Button"> please see below the code:

  "defaultContent": '<a type="button" class="btn btn-primary" data-toggle="modal" data-target="#editMemberModal" onclick="editMember(data[0])"> <span class="glyphicon glyphicon-edit"></span>Edit</a>

                  "data":  "null",
                 "orderable":      false,
                  "className": "center",
                  "defaultContent": '<a type="button" class="btn btn-primary"  data-toggle="modal" data-target="#editMemberModal"  onclick="editMember(data[0])"> <span class="glyphicon glyphicon-edit"></span>Edit</a> / <a href="" class=class="btn btn-danger">Delete</a>'
              }
  
• SalmanS Posts: 102Questions: 12Answers: 0

  November 2018

  Here is the js fiddle

  http://live.datatables.net/meqitiho/1/
• colin Posts: 15,240Questions: 1Answers: 2,599

  November 2018

  Gotcha. This example here should help. Don't do the onclick, do a click handler like that example,

  C
• SalmanS Posts: 102Questions: 12Answers: 0

  November 2018 edited November 2018

  Many thanks, love you colin bhai for that simple solution.

  1. Can i directly use click from with the <a type="button" click ="editMember(data[0])"> </a> - If not how do i call my editMember function

             $('#example tbody').on( 'click', 'button', function () {
                     var data = table.row( $(this).parents('tr') ).data();
                     editMember(data[0]);
                 } );
     

  2. and what if I got edit two buttons edit and delete?

  3. "targets": -1, -- What does it do "targets":-1? I guess it is selected data{0]?

  Many thanks for your earlier response.
• SalmanS Posts: 102Questions: 12Answers: 0

  November 2018

  $(document).ready(function() {
      var table = $('#example').DataTable();
  
      $('#example tbody').on('click', 'tr', function () {
          var data = table.row( this ).data();
          alert( 'You clicked on '+data[0]+'\'s row' );
      } );
  } );
  
• SalmanS Posts: 102Questions: 12Answers: 0

  November 2018 edited November 2018

  `table.on( 'select', function () {
      var rowData = table.rows( { selected: true } ).data()[0]['title'];
      // now do what you need to do wht the row data
  
  } );`
  
• colin Posts: 15,240Questions: 1Answers: 2,599

  November 2018 Answer ✓

  This example here is another one that will help. This has a link in the final column, you can easily create two, both with different classes, and have different click handlers. That click handler would then call your editMember() function.
• SalmanS Posts: 102Questions: 12Answers: 0

  November 2018

  Colin Bhai is the World Champion - Authentic Hyderabadi Curry and Biryani on me, whenever you are available?
• colin Posts: 15,240Questions: 1Answers: 2,599

  November 2018 Answer ✓

  Always available for a curry
• SalmanS Posts: 102Questions: 12Answers: 0

  November 2018

  Issue resolved, here is my final code.

      $('#manageMemberTable tbody').on( 'click', 'a.edit', function () {
              var data = manageMemberTable.row( $(this).parents('tr') ).data();
              editMember(data[0]);
                  } );
  
• SalmanS Posts: 102Questions: 12Answers: 0

  November 2018 edited November 2018

  Hi Colin, regarding curry issue, my wife next to me says, she will make curry and biryani for you, let us know when you are available?

  She says, we have a zeal to cook for those who are zealous for the Hyderabadi cuisine.
  We are based in Worcester near Birmingham, let us know if you have any plans visiting worcester?
• colin Posts: 15,240Questions: 1Answers: 2,599

  November 2018 Answer ✓

  Thank you, that's very kind, I will!