How to see the data of a hidden column of Datatables

Question

How to see the data of a hidden column of Datatables

Navigation

#1 by (1 votes)
#2 by (1 votes)

1

How to see the data of a column that is hidden, but I need to display the content in a texbox that is next to the datatable . Next I have the datatable configured to hide the column.

$(document).ready(function() {
$('#example').DataTable( {
    "columnDefs": [
        {
            "targets": [ 3 ],
            "visible": false
        }
    ]
} );
} );

Then to recover the data of the selected row I use the following function:

 $(function() {

   $('#example tbody').delegate("tr", "click", rowClick);
    });

 function rowClick()
 {
   if (hlr)
      $("td:first", hlr).parent().children().each(function(){
   $(this).removeClass('markrow');});
   hlr = this;
   $("td:first", this).parent().children().each(function()
   {
      $(this).addClass('markrow');
   });
   var valor= $("td:eq(3)", this).text();
   //añadiendo el valor a un textbox
   $("#textbox").html(valor);
 }

The problem is that if the column is hidden, it no longer shows the value of column 3 but that of column 4 below.

jquery datatables

asked by SergioDen Almendras 28.09.2016 в 23:40

source

2 answers

"Exception in thread" error "java.lang.NoClassDefFoundError:" exporting sqlserver data to postgresql How can I know if a server allows JSONP or CORS

score 1 · Answer 1

1

Use the :visible selector to select only those visible elements. Then concatenate your selector: eq () to get the element in the position you indicate.

var valor = $('td:visible', this).eq(3).text();

answered by 16.12.2016 в 10:46

score 1 · Answer 2

If the element is invisible, jQuery can not find it, try accessing the value using the api of datatables:

var valor = dtTable.row(this).data()[3];

for this, when creating the datatables assign a name that serves as a reference:

dtTable = $('#example').DataTable({
...

Complete code:

<!DOCTYPE html>
<html lang="es">
<head>
<title>datatablesvaloroculto</title>
<style>
.markrow{background:#fe0;}
</style>
</head>
<body>
<table id="example">
<thead>
    <tr>
        <th>Columna 1</th>
        <th>Columna 2</th>
        <th>Columna 3</th>
        <th>Columna 4</th>
        <th>Columna 5</th>
    </tr>
    </thead>
     <tbody>
    <tr>
        <td>Row 1 Data 1</td>
        <td>Row 1 Data 2</td>
        <td>Row 1 Data 3</td>
        <td>Row 1 Data 4</td>
        <td>Row 1 Data 5</td>
    </tr>
    <tr>
        <td>Row 2 Data 1</td>
        <td>Row 2 Data 2</td>
        <td>Row 2 Data 3</td>
        <td>Row 2 Data 4</td>
        <td>Row 2 Data 5</td>
    </tr>
    <tr>
        <td>Row 3 Data 1</td>
        <td>Row 3 Data 2</td>
        <td>Row 3 Data 3</td>
        <td>Row 3 Data 4</td>
        <td>Row 3 Data 5</td>
    </tr>
   </tbody>
  </table>
<div id="textbox"></div>
</body>
<script
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E="
crossorigin="anonymous"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.js"></script>
<script>
$(document).ready(function() {
    dtTable = $('#example').DataTable({
        "columnDefs": [
            {
                "targets": [ 3 ],
                "visible": false
            }
        ]
    });
});


$(function() {
    $('#example tbody').delegate("tr", "click", rowClick);
});

function rowClick()
 {
     $(this).parent().find('tr').removeClass('markrow');
     $(this).addClass('markrow');

      var valor = dtTable.row(this).data()[3];  
      $("#textbox").html(valor);
} 
</script>
</html>