Twitter Bootstrap Question posted in

Get id of clicked row-Twitter bootstrap

I am using "jquery": "^3.4.0" and DataTables 1.10.18.

I am having the following table:

$(document).ready(() => {
  var table = $('.datatable-responsive').DataTable();
});

$("#edit-row").click(() => {
  var c = this.id
  console.log(c)
});
<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Global stylesheets -->
  <link href="https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900" rel="stylesheet" type="text/css">
  <link href="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/css/icons/icomoon/styles.css" rel="stylesheet" type="text/css">
  <link href="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
  <!-- /global stylesheets -->
  <!-- Core JS files -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>
  <!-- /core JS files -->
  <!-- Load plugin -->
  <script src="https://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
  <!-- /load plugin -->
  <!-- Theme JS files -->
  <script src="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/js/plugins/sliders/ion_rangeslider.min.js"></script>
  <script src="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/js/plugins/ui/moment/moment_locales.min.js"></script>
</head>

<body class="navbar-top">
  <!-- Page content -->
  <div class="page-content pt-0">
    <!-- Default ordering -->
    <div class="card">
      <div class="card-body">
        <table class="table datatable-responsive dataTable" style="width:100%">
          <thead>
            <tr>
              <th>#</th>
              <th>Status</th>
              <th>Title</th>
              <th>Image</th>
              <th>Profile</th>
              <th class="text-center">Actions</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>-2</td>
              <td><span class="badge badge-success">Posted</span></td>
              <td>Awesome Post</td>
              <td><img src="./assets/img/baby.jpg" alt="" srcset="" style='width:20%;'></td>
              <td>Joe</td>
              <td class="text-center">
                <div class="list-icons">
                  <div class="dropdown">
                    <a href="#" class="list-icons-item" data-toggle="dropdown">
                      <i class="icon-menu9"></i>
                    </a>

                    <div class="dropdown-menu dropdown-menu-right">
                      <a href="#" id="edit-row" class="dropdown-item"><i class="icon-pencil"></i> Edit</a>
                      <a href="#" class="dropdown-item"><i class="icon-bin"></i> Delete</a>
                    </div>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <td>99</td>
              <td><span class="badge badge-secondary">Queued</span></td>
              <td>Cool Post</td>
              <td><img src="./assets/img/diy.jpg" alt="" srcset="" style='width:20%;'></td>
              <td>Brad</td>
              <td class="text-center">
                <div class="list-icons">
                  <div class="dropdown">
                    <a href="#" class="list-icons-item" data-toggle="dropdown">
                      <i class="icon-menu9"></i>
                    </a>

                    <div class="dropdown-menu dropdown-menu-right">
                      <a href="#" id="edit-row" class="dropdown-item"><i class="icon-pencil"></i> Edit</a>
                      <a href="#" class="dropdown-item"><i class="icon-bin"></i> Delete</a>
                    </div>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <td>10</td>
              <td><span class="badge badge-secondary">Queued</span></td>
              <td>Awesome Post</td>
              <td><img src="./assets/img/infographic.jpg" alt="" srcset="" style='width:20%;'></td>
              <td>Tom</td>
              <td class="text-center">
                <div class="list-icons">
                  <div class="dropdown">
                    <a href="#" class="list-icons-item" data-toggle="dropdown">
                      <i class="icon-menu9"></i>
                    </a>

                    <div class="dropdown-menu dropdown-menu-right">
                      <a href="#" id="edit-row" class="dropdown-item"><i class="icon-pencil"></i> Edit</a>
                      <a href="#" class="dropdown-item"><i class="icon-bin"></i> Delete</a>
                    </div>
                  </div>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
        <!-- /default ordering -->
      </div>
    </div>
  </div>
</body>

</html>

I am trying to put a click listener on the clicked edit button.

However, I currently only get undefined back. Instead I would like to get the id within the first column back.

Any suggestions what I am doing wrong?

Tags:

5

Answers


  1. 0

    You are using arrow functions that will change the scope of this to window so to reference the scope of the element, easiest way is to avoid arrow functions for those handlers and simply use traditional functions:

    $(document).ready(function() {
  var table = $('.datatable-responsive').DataTable();
});

$("#edit-row").click(function() {
  var c = this.id
  console.log(c)
});
    <!DOCTYPE html>
<html lang="en">

<head>
  <!-- Global stylesheets -->
  <link href="https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900" rel="stylesheet" type="text/css">
  <link href="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/css/icons/icomoon/styles.css" rel="stylesheet" type="text/css">
  <link href="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
  <!-- /global stylesheets -->
  <!-- Core JS files -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>
  <!-- /core JS files -->
  <!-- Load plugin -->
  <script src="https://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
  <!-- /load plugin -->
  <!-- Theme JS files -->
  <script src="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/js/plugins/sliders/ion_rangeslider.min.js"></script>
  <script src="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/js/plugins/ui/moment/moment_locales.min.js"></script>
</head>

<body class="navbar-top">
  <!-- Page content -->
  <div class="page-content pt-0">
    <!-- Default ordering -->
    <div class="card">
      <div class="card-body">
        <table class="table datatable-responsive dataTable" style="width:100%">
          <thead>
            <tr>
              <th>#</th>
              <th>Status</th>
              <th>Title</th>
              <th>Image</th>
              <th>Profile</th>
              <th class="text-center">Actions</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>-2</td>
              <td><span class="badge badge-success">Posted</span></td>
              <td>Awesome Post</td>
              <td><img src="./assets/img/baby.jpg" alt="" srcset="" style='width:20%;'></td>
              <td>Joe</td>
              <td class="text-center">
                <div class="list-icons">
                  <div class="dropdown">
                    <a href="#" class="list-icons-item" data-toggle="dropdown">
                      <i class="icon-menu9"></i>
                    </a>

                    <div class="dropdown-menu dropdown-menu-right">
                      <a href="#" id="edit-row" class="dropdown-item"><i class="icon-pencil"></i> Edit</a>
                      <a href="#" class="dropdown-item"><i class="icon-bin"></i> Delete</a>
                    </div>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <td>99</td>
              <td><span class="badge badge-secondary">Queued</span></td>
              <td>Cool Post</td>
              <td><img src="./assets/img/diy.jpg" alt="" srcset="" style='width:20%;'></td>
              <td>Brad</td>
              <td class="text-center">
                <div class="list-icons">
                  <div class="dropdown">
                    <a href="#" class="list-icons-item" data-toggle="dropdown">
                      <i class="icon-menu9"></i>
                    </a>

                    <div class="dropdown-menu dropdown-menu-right">
                      <a href="#" id="edit-row" class="dropdown-item"><i class="icon-pencil"></i> Edit</a>
                      <a href="#" class="dropdown-item"><i class="icon-bin"></i> Delete</a>
                    </div>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <td>10</td>
              <td><span class="badge badge-secondary">Queued</span></td>
              <td>Awesome Post</td>
              <td><img src="./assets/img/infographic.jpg" alt="" srcset="" style='width:20%;'></td>
              <td>Tom</td>
              <td class="text-center">
                <div class="list-icons">
                  <div class="dropdown">
                    <a href="#" class="list-icons-item" data-toggle="dropdown">
                      <i class="icon-menu9"></i>
                    </a>

                    <div class="dropdown-menu dropdown-menu-right">
                      <a href="#" id="edit-row" class="dropdown-item"><i class="icon-pencil"></i> Edit</a>
                      <a href="#" class="dropdown-item"><i class="icon-bin"></i> Delete</a>
                    </div>
                  </div>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
        <!-- /default ordering -->
      </div>
    </div>
  </div>
</body>

</html>

    However, if you still want the arrow functions then pass a event parameter to the arrow function and get the element reference using event.target.

    1. To get the id that you have in the first column you can find the closest table row then select the first table column to get that text value.
    2. You need to use a class selector for all those rows instead of id selector #edit-row as id should be unique in the HTML page.
    $(document).ready(() => {
  var table = $('.datatable-responsive').DataTable();
});

$(".edit-row").click((e) => {
  var c = e.target.id
  var hashId = $(e.target).closest('tr').find('td:eq(0)').text().trim();
  console.log(hashId)
});
    <!DOCTYPE html>
<html lang="en">

<head>
  <!-- Global stylesheets -->
  <link href="https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900" rel="stylesheet" type="text/css">
  <link href="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/css/icons/icomoon/styles.css" rel="stylesheet" type="text/css">
  <link href="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
  <!-- /global stylesheets -->
  <!-- Core JS files -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>
  <!-- /core JS files -->
  <!-- Load plugin -->
  <script src="https://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
  <!-- /load plugin -->
  <!-- Theme JS files -->
  <script src="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/js/plugins/sliders/ion_rangeslider.min.js"></script>
  <script src="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/js/plugins/ui/moment/moment_locales.min.js"></script>
</head>

<body class="navbar-top">
  <!-- Page content -->
  <div class="page-content pt-0">
    <!-- Default ordering -->
    <div class="card">
      <div class="card-body">
        <table class="table datatable-responsive dataTable" style="width:100%">
          <thead>
            <tr>
              <th>#</th>
              <th>Status</th>
              <th>Title</th>
              <th>Image</th>
              <th>Profile</th>
              <th class="text-center">Actions</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>-2</td>
              <td><span class="badge badge-success">Posted</span></td>
              <td>Awesome Post</td>
              <td><img src="./assets/img/baby.jpg" alt="" srcset="" style='width:20%;'></td>
              <td>Joe</td>
              <td class="text-center">
                <div class="list-icons">
                  <div class="dropdown">
                    <a href="#" class="list-icons-item" data-toggle="dropdown">
                      <i class="icon-menu9"></i>
                    </a>

                    <div class="dropdown-menu dropdown-menu-right">
                      <a href="#" class="edit-row" class="dropdown-item"><i class="icon-pencil"></i> Edit</a>
                      <a href="#" class="dropdown-item"><i class="icon-bin"></i> Delete</a>
                    </div>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <td>99</td>
              <td><span class="badge badge-secondary">Queued</span></td>
              <td>Cool Post</td>
              <td><img src="./assets/img/diy.jpg" alt="" srcset="" style='width:20%;'></td>
              <td>Brad</td>
              <td class="text-center">
                <div class="list-icons">
                  <div class="dropdown">
                    <a href="#" class="list-icons-item" data-toggle="dropdown">
                      <i class="icon-menu9"></i>
                    </a>

                    <div class="dropdown-menu dropdown-menu-right">
                      <a href="#" class="edit-row" class="dropdown-item"><i class="icon-pencil"></i> Edit</a>
                      <a href="#" class="dropdown-item"><i class="icon-bin"></i> Delete</a>
                    </div>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <td>10</td>
              <td><span class="badge badge-secondary">Queued</span></td>
              <td>Awesome Post</td>
              <td><img src="./assets/img/infographic.jpg" alt="" srcset="" style='width:20%;'></td>
              <td>Tom</td>
              <td class="text-center">
                <div class="list-icons">
                  <div class="dropdown">
                    <a href="#" class="list-icons-item" data-toggle="dropdown">
                      <i class="icon-menu9"></i>
                    </a>

                    <div class="dropdown-menu dropdown-menu-right">
                      <a href="#" class="edit-row" class="dropdown-item"><i class="icon-pencil"></i> Edit</a>
                      <a href="#" class="dropdown-item"><i class="icon-bin"></i> Delete</a>
                    </div>
                  </div>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
        <!-- /default ordering -->
      </div>
    </div>
  </div>
</body>

</html>
    Login or Signup to reply.
  2. 0

    The this in the click handler was pointing to the global Window object because you were using arrow function, change it to a regular callback and it will work as expected.

    Check this answer for more information.

    $(document).ready(() => {
  var table = $('.datatable-responsive').DataTable();
});

$("#edit-row").click(function(event) {
  var c = this.id;
  console.log(c)
});
    <!DOCTYPE html>
<html lang="en">

<head>
  <!-- Global stylesheets -->
  <link href="https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900" rel="stylesheet" type="text/css">
  <link href="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/css/icons/icomoon/styles.css" rel="stylesheet" type="text/css">
  <link href="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
  <!-- /global stylesheets -->
  <!-- Core JS files -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>
  <!-- /core JS files -->
  <!-- Load plugin -->
  <script src="https://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
  <!-- /load plugin -->
  <!-- Theme JS files -->
  <script src="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/js/plugins/sliders/ion_rangeslider.min.js"></script>
  <script src="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/js/plugins/ui/moment/moment_locales.min.js"></script>
</head>

<body class="navbar-top">
  <!-- Page content -->
  <div class="page-content pt-0">
    <!-- Default ordering -->
    <div class="card">
      <div class="card-body">
        <table class="table datatable-responsive dataTable" style="width:100%">
          <thead>
            <tr>
              <th>#</th>
              <th>Status</th>
              <th>Title</th>
              <th>Image</th>
              <th>Profile</th>
              <th class="text-center">Actions</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>-2</td>
              <td><span class="badge badge-success">Posted</span></td>
              <td>Awesome Post</td>
              <td><img src="./assets/img/baby.jpg" alt="" srcset="" style='width:20%;'></td>
              <td>Joe</td>
              <td class="text-center">
                <div class="list-icons">
                  <div class="dropdown">
                    <a href="#" class="list-icons-item" data-toggle="dropdown">
                      <i class="icon-menu9"></i>
                    </a>

                    <div class="dropdown-menu dropdown-menu-right">
                      <a href="#" id="edit-row" class="dropdown-item"><i class="icon-pencil"></i> Edit</a>
                      <a href="#" class="dropdown-item"><i class="icon-bin"></i> Delete</a>
                    </div>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <td>99</td>
              <td><span class="badge badge-secondary">Queued</span></td>
              <td>Cool Post</td>
              <td><img src="./assets/img/diy.jpg" alt="" srcset="" style='width:20%;'></td>
              <td>Brad</td>
              <td class="text-center">
                <div class="list-icons">
                  <div class="dropdown">
                    <a href="#" class="list-icons-item" data-toggle="dropdown">
                      <i class="icon-menu9"></i>
                    </a>

                    <div class="dropdown-menu dropdown-menu-right">
                      <a href="#" id="edit-row" class="dropdown-item"><i class="icon-pencil"></i> Edit</a>
                      <a href="#" class="dropdown-item"><i class="icon-bin"></i> Delete</a>
                    </div>
                  </div>
                </div>
              </td>
            </tr>
            <tr>
              <td>10</td>
              <td><span class="badge badge-secondary">Queued</span></td>
              <td>Awesome Post</td>
              <td><img src="./assets/img/infographic.jpg" alt="" srcset="" style='width:20%;'></td>
              <td>Tom</td>
              <td class="text-center">
                <div class="list-icons">
                  <div class="dropdown">
                    <a href="#" class="list-icons-item" data-toggle="dropdown">
                      <i class="icon-menu9"></i>
                    </a>

                    <div class="dropdown-menu dropdown-menu-right">
                      <a href="#" id="edit-row" class="dropdown-item"><i class="icon-pencil"></i> Edit</a>
                      <a href="#" class="dropdown-item"><i class="icon-bin"></i> Delete</a>
                    </div>
                  </div>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
        <!-- /default ordering -->
      </div>
    </div>
  </div>
</body>

</html>
    Login or Signup to reply.
  3. 0

    I just use your code as example and make some changes in jQuery.

    Please try this, hope this works for you.

    $(document).ready(() => {
    var table = $('.datatable-responsive').DataTable();

    $(document).on("click", "#edit-row", function(){
        console.log('Id : ', $(this).closest('.text-center').siblings('.sorting_1').text());
        alert('Id : '+ $(this).closest('.text-center').siblings('.sorting_1').text());
    });
});
    <!DOCTYPE html>
<html lang="en">

  <head>
    <!-- Global stylesheets -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,300,100,500,700,900" rel="stylesheet" type="text/css">
    <link href="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/css/icons/icomoon/styles.css" rel="stylesheet" type="text/css">
    <link href="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <!-- /global stylesheets -->
    <!-- Core JS files -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>
    <!-- /core JS files -->
    <!-- Load plugin -->
    <script src="https://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
    <!-- /load plugin -->
    <!-- Theme JS files -->
    <script src="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/js/plugins/sliders/ion_rangeslider.min.js"></script>
    <script src="https://gitcdn.link/repo/marcpre/demo_cryptoscreener/master/_other/layout_html/global_assets/js/plugins/ui/moment/moment_locales.min.js"></script>
  </head>

  <body class="navbar-top">
    <!-- Page content -->
    <div class="page-content pt-0">
      <!-- Default ordering -->
      <div class="card">
        <div class="card-body">
          <table class="table datatable-responsive dataTable" style="width:100%">
            <thead>
              <tr>
                <th>#</th>
                <th>Status</th>
                <th>Title</th>
                <th>Image</th>
                <th>Profile</th>
                <th class="text-center">Actions</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>-2</td>
                <td><span class="badge badge-success">Posted</span></td>
                <td>Awesome Post</td>
                <td><img src="./assets/img/baby.jpg" alt="" srcset="" style='width:20%;'></td>
                <td>Joe</td>
                <td class="text-center">
                  <div class="list-icons">
                    <div class="dropdown">
                      <a href="#" class="list-icons-item" data-toggle="dropdown">
                        <i class="icon-menu9"></i>
                      </a>

                      <div class="dropdown-menu dropdown-menu-right">
                        <a href="#" id="edit-row" class="dropdown-item"><i class="icon-pencil"></i> Edit</a>
                        <a href="#" class="dropdown-item"><i class="icon-bin"></i> Delete</a>
                      </div>
                    </div>
                  </div>
                </td>
              </tr>
              <tr>
                <td>99</td>
                <td><span class="badge badge-secondary">Queued</span></td>
                <td>Cool Post</td>
                <td><img src="./assets/img/diy.jpg" alt="" srcset="" style='width:20%;'></td>
                <td>Brad</td>
                <td class="text-center">
                  <div class="list-icons">
                    <div class="dropdown">
                      <a href="#" class="list-icons-item" data-toggle="dropdown">
                        <i class="icon-menu9"></i>
                      </a>

                      <div class="dropdown-menu dropdown-menu-right">
                        <a href="#" id="edit-row" class="dropdown-item"><i class="icon-pencil"></i> Edit</a>
                        <a href="#" class="dropdown-item"><i class="icon-bin"></i> Delete</a>
                      </div>
                    </div>
                  </div>
                </td>
              </tr>
              <tr>
                <td>10</td>
                <td><span class="badge badge-secondary">Queued</span></td>
                <td>Awesome Post</td>
                <td><img src="./assets/img/infographic.jpg" alt="" srcset="" style='width:20%;'></td>
                <td>Tom</td>
                <td class="text-center">
                  <div class="list-icons">
                    <div class="dropdown">
                      <a href="#" class="list-icons-item" data-toggle="dropdown">
                        <i class="icon-menu9"></i>
                      </a>

                      <div class="dropdown-menu dropdown-menu-right">
                        <a href="#" id="edit-row" class="dropdown-item"><i class="icon-pencil"></i> Edit</a>
                        <a href="#" class="dropdown-item"><i class="icon-bin"></i> Delete</a>
                      </div>
                    </div>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
          <!-- /default ordering -->
        </div>
      </div>
    </div>
  </body>

</html>
    Login or Signup to reply.
  4. 0

    DataTables has own solution, you can use select extension to get selected row data, there is an example very useful for you

    Login or Signup to reply.
  5. 0

    Considering your ultimate goal (editable DataTable), I’ll allow myself to suggest few improvements to your app, so that you don’t really need to get id of clicked row and do all the HTML heavy lifting on your own.

    • Instead of using external AJAX-call to populate your DataTables, I’d recommend to use embedded ajax option
    $("#posts").DataTable({
    //specify URL for AJAX-call that retrieves table data in format of array of arrays or array of objects
    //where each element/property corresponds to table columns, ajax.dataSrc property should be set to ''
    //if data array encompassed into 'data' property (default format), 'dataSrc' can be ommitted
    ...
    ajax: {
      url: "/getdata"
      dataSrc: ''
    }
})
    • use columns.render option to modify cell contents, to make it appear as a badge or drop-down menu
    dataTable = $("#posts").DataTable({
    ...
    columns: [
      { data: "id", title: "Id" },
      {
        data: "status",
        title: "Status",
        //render status as a badge, having class, based on status value
        render: data => `<span class="badge ${data == "posted" ? "badge-success" : "badge-secondary"}">${data}</span>`
      }
      ...
    ]
})
    • and essential point – leave row number mark within dropdown element upon rendering, so you can access this value later on as you need to edit/delete table row
    $("#posts").DataTable({
    ...
    columns: [
      ...
      {
        data: null,
        title: "Actions",
        //render 'Actions' column as a drop-down menu wrapper,
        //appending 'row' attribute with corresponding row number
        //as a value
        render: (data, type, row, meta) => `
        <div class="dropdown" row="${meta.row}">
        <a href="#" class="list-icons-item" data-toggle="dropdown">
          <i class="icon-menu9"></i>
        </a>
        <div class="dropdown-menu dropdown-menu-right">
          <a href="#" class="dropdown-item edit-row"><i class="icon-pencil"></i>Edit</a>
          <a href="#" class="dropdown-item delete-row"><i class="icon-bin"></i>Delete</a>
        </div>
      </div>
        `
      }
    ]
});
    • use above row numbers in order to modify target table row, using DataTables API methods (e.g. row().remove() for deletion), I’ll use simplest example (deletion of the row in the front-end), since you didn’t share much details as for whether you want to modify both back end and front end data or only the latter
    //delete-row callback as an example of how to use row attribute to modify necessary table row
$("#posts").on("click", ".delete-row", function () {
    //grab dropdown wrapper and obtain row number
    const rowNumber = $(this)
        .closest(".dropdown")
        .attr("row");
    //delete corresponding table row and re-draw the table
    dataTable.row(rowNumber).remove();
    dataTable.draw();
});

    Complete working DEMO of your sample project can be found over here or you can examine that demo in your browser’s Dev Tools, using this link.

    P.S. if, for some reason, you still decide to proceed with your approach, you may inquiry this post (which is pretty similar to yours) for a way of getting data model properties (‘id’, in particular) of clicked row

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search