Search code examples
htmljquerybootstrap-modal

Bootstrap table-striped get td value by click


I have a table table-striped and in which row there is a delete button. When the user click in the delete button, a modal dialog show askig id the user really want to delete that row.

I need to get the value to be delete, how could I get id td?

function modalAvisoExclusao() {
  $('#confirmaExclusao').modal('show');
}

function excluirUO() {
  $('#confirmaExclusao').modal('hide');
  var table = $('#Lista').DataTable();
  var d = table.cell(this).data();
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap.min.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/select/1.3.3/js/dataTables.select.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<form class="form-horizontal">
  <div class="modal fade" id="confirmaExclusao" role="dialog" aria-labelledby="confirmDeleteLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title">Dele&ccedil;&atilde;o Permanente</h4>
        </div>
        <div class="modal-body">
          <p>Deseja realmente excluir este registro ?</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
          <button type="button" class="btn btn-danger" id="confirmUo" onclick="excluirUO();">Excluir</button>
        </div>
      </div>
    </div>
  </div>

  <div class="panel-body">
    <table id="Lista" class="table table-striped table-bordered" style="width:100%">
      <thead>
        <tr>
          <th>Name</th>
          <th>Position</th>
          <th>Office</th>
          <th>Age</th>
          <th>Start date</th>
          <th>Salary</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Tiger Nixon</td>
          <td>System Architect</td>
          <td>Edinburgh</td>
          <td>61</td>
          <td>2011/04/25</td>
          <td>$320,800</td>
          <td>
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#alterarModal" onClick="">
                                            <i class='glyphicon glyphicon-pencil'></i> Alterar
                                        </button>

            <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#excluirModal" onClick="modalAvisoExclusao();">
                                            <i class='glyphicon glyphicon-trash'></i> Excluir
                                        </button>
          </td>
        </tr>
        <tr>
          <td>Garrett Winters</td>
          <td>Accountant</td>
          <td>Tokyo</td>
          <td>63</td>
          <td>2011/07/25</td>
          <td>$170,750</td>
          <td>
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#alterarModal" onClick="">
                                            <i class='glyphicon glyphicon-pencil'></i> Alterar
                                        </button>

            <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#excluirModal" onClick="modalAvisoExclusao();">
                                            <i class='glyphicon glyphicon-trash'></i> Excluir
                                        </button>
          </td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <th>Name</th>
          <th>Position</th>
          <th>Office</th>
          <th>Age</th>
          <th>Start date</th>
          <th>Salary</th>
        </tr>
      </tfoot>
    </table>
  </div>
</form>


Solution

  • Use ligneSel to get the data you want. It's an array.

    var table = $('#Lista').DataTable({
      select: 'single'
    });
    //Get selected row data
    $('#Lista tbody').on('click', 'tr', function() {
      ligneSel = table.row(this).data();
      $('#user_').html(ligneSel[0]);
      alert(ligneSel)
    });
    <!DOCTYPE html>
    <html lang="en" dir="ltr">
    
    <head>
      <meta charset="utf-8">
      <title></title>
      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.25/datatables.min.css" />
      <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.25/datatables.min.js"></script>
    </head>
    
    <body>
      <form class="form-horizontal">
        <div class="modal fade" id="confirmaExclusao" role="dialog" aria-labelledby="confirmDeleteLabel" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Dele&ccedil;&atilde;o Permanente</h4>
              </div>
              <div class="modal-body">
                <p>Deseja realmente excluir este registro <span id="user_"></span>?</p>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
                <button type="button" class="btn btn-danger" id="confirmUo">Excluir</button>
              </div>
            </div>
          </div>
        </div>
    
        <div class="panel-body">
          <table id="Lista" class="table table-striped table-bordered" style="width:100%">
            <thead>
              <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
                <th>Actions</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
                <td>
                  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#alterarModal">
                    <i class='glyphicon glyphicon-pencil'></i> Alterar
                  </button>
    
                  <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#confirmaExclusao">
                    <i class='glyphicon glyphicon-trash'></i> Excluir
                  </button>
                </td>
              </tr>
              <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
                <td>
                  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#alterarModal" onClick="">
                    <i class='glyphicon glyphicon-pencil'></i> Alterar
                  </button>
    
                  <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#excluirModal">
                    <i class='glyphicon glyphicon-trash'></i> Excluir
                  </button>
                </td>
              </tr>
            </tbody>
            <tfoot>
              <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
                <th>Action</th>
              </tr>
            </tfoot>
          </table>
        </div>
      </form>
    </body>
    
    </html>