Because it does not rescue me the values of the datatable

Question

Because it does not rescue me the values of the datatable

Navigation

#1 by (1 votes)

1

I want to get the Codigo of a row in a table. And this value can be displayed in a Modal My Controller

   $data['personals'] = $this->m->getAllPersonal();
   $this->load->view('list-personal',$data);

my table

 <table id="tbl_personal" class="table table-hover">
      <thead>
        <tr>
          <th>Codigo</th>
          <th>Nombre</th>
          <th></th>
      </tr>
     </thead>
     <tbody>
     <?php if ($personals): ?>
     <?php foreach ($personals as $personal): ?>
       <tr>
        <td>
       <?php echo $personal-> Codigo; ?>
        </td>
        <td>
       <?php echo $personal-> Nombre; ?>
       </td>
        <td>
     <button type="button"  class="change badge badge-primary" data-toggle="modal" data-target="#myModalthree">

     </button>
     </td>
    </tr>
   <?php endforeach; ?>
   <?php endif; ?>
    </tbody>
 </table>

This is my Javascript

<script type="text/javascript">
      $(document).ready(function() {

          var table = $('#tbl_personal').DataTable({
            "order": [
                        [0, "desc"]
                    ],
                    "columns":[{
                      "data" :0
                    },{
                      "data" :1,
                      "searchable": false,
                      "sortable": false
                    },],
            "language": idioma_espanol

          });
          obtener_data("#tbl_personal tbody", table);

      });

      var obtener_data = function(tbody, table) {
        $(tbody).on("click", "button.change", function() {
        var data = table.row($(this).parents("tr")).data();
        var idd = $("#usuario_idd").val(data.Codigo),
            nombre = $("#nombre").val(data.Nombre);

    });
}


      </script>

Here my Modal

<div class="modal-body">
        <input type="text" name="usuario_idd" id="usuario_idd" value="">
        <input type="text" name="nombre" id="nombre" value="">
      </div>

What am I doing wrong? to val can it be?

javascript datatables

asked by MoteCL 05.07.2018 в 17:21

source

1 answer

Help in project using ArrayLists declare list list as object attribute c #

score 1 · Accepted Answer

The data() function returns a simple array. It is not an object that has knowledge of the headers of your table. The correct way would be like this:

$(document).ready(function() {

          var table = $('#tbl_personal').DataTable({
            "order": [
                        [0, "desc"]
                    ],
                    "columns":[{
                      "data" :0
                    },{
                      "data" :1,
                      "searchable": false,
                      "sortable": false
                    },{}]            

          });
          obtener_data("#tbl_personal tbody", table);

      });

      var obtener_data = function(tbody, table) {
        $(tbody).on("click", "button.change", function() {
        var data = table.row($(this).parents("tr")).data();        
        var idd = $("#usuario_idd").val(data[0]),
            nombre = $("#nombre").val(data[1]);       
    });
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<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/1.10.19/css/jquery.dataTables.css">
  
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
<table id="tbl_personal" class="table table-hover">
      <thead>
        <tr>
          <th>Codigo</th>
          <th>Nombre</th>
          <th></th>
      </tr>
     </thead>
     <tbody>     
       <tr>
        <td>
       1
        </td>
        <td>
       A
       </td>
        <td>
     <button type="button"  class="change badge badge-primary" data-toggle="modal" data-target="#myModalthree">
Cambiar
     </button>
     </td>
    </tr>
   <tr>
        <td>
       2
        </td>
        <td>
       b
       </td>
        <td>
     <button type="button"  class="change badge badge-primary" data-toggle="modal" data-target="#myModalthree">
Cambiar
     </button>
     </td>
    </tr>
    </tbody>
 </table>
<div id="myModalthree" class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <input type="text" name="usuario_idd" id="usuario_idd" value="">
        <input type="text" name="nombre" id="nombre" value="">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>