CODEWITHSUNDEEP
javascriptdatatables
AngelQuesada
AngelQuesada

Reputation: 431

get certain cell data from datatable

I'm trying to get the data from a datatable. I know that i can use datatable.data() but my cells have html data inside so I get something like this:

0:
CIF: "<span class='text-success font-weight-bold'>B81692097</span>"
CODIGO CURSO: "<div class='d-flex justify-content-center'><i data-toggle='tooltip' data-type='CODIGO CURSO' data-placement='top' title='Rellenar celda' class='empty-cell editable-data material-icons text-info'>keyboard</i></div>"
CODIGO USUARIO: "12345678-A"
DT_RowId: "row_1"
EDITORIAL: "CONZEPTO"
FACTURABLE: "<i class='material-icons text-success'>check_circle</i>"
FECHA ACTIVACION: 43831
HORAS: 1
LICENCIA: "-"
NOMBRE CENTRO: "<span class='text-success font-weight-bold'>ACADEMIA LIDER SYSTEM S.L.</span>"
NOMBRE CURSO: "<div class='d-flex justify-content-center'><span data-type='NOMBRE CURSO' class='editable-data text-info font-weight-bold'>Marketing y cosas</div>"
NOMBRE USUARIO: "Jose Perez Perez"
PERFIL: "-"
PRECIO: 1
REFERENCIA: "<div class='d-flex justify-content-center'><i data-toggle='tooltip' data-type='REFERENCIA' data-placement='top' title='Rellenar celda' class='empty-cell editable-data material-icons text-info'>keyboard</i></div>"
URL: "<span class='text-success font-weight-bold'>campusonline.lidersystem.com</span>"
VALIDADO: "↵    <span class='d-none orderable-value'>2</span>↵    <i data-toggle='tooltip

And, for example, from CIF I want to get B81692097 instead of <span class='text-success font-weight-bold'>B81692097</span>

I know that I could make a function to get the specific data from every cell but I wonder if there is an easier way to do this, I have been searching in the docs but I couldnt find anything.

Is there any way to get this with the tools that datatable offers?

Thank you guys

Upvotes: 0

Views: 1379

Answers (2)

andrewJames
andrewJames

Reputation: 21909

Depending on what specific data you need, here are some examples in a stand-alone demo you can run for yourself.

This includes an example showing the removal of HTML tags from cell data.

The demo table:

enter image description here

To see the results, uncomment the relevant console.log() statement(s). The browser console (F12) will show the output:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Iterate Cells</title>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
  <link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">
</head>

<body>

<div style="margin: 20px;">

<table id="demo" class="display dataTable cell-border" style="width:100%">
  <thead>
   <tr><th>Column One</th><th>Column Two</th></tr>
  </thead>
  <tbody>
    <tr><td>alfa</td><td class="foo">bravo</td></tr>
    <tr><td class="foo">charlie</td><td>delta</td></tr>
    <tr><td>echo</td><td><b>foxtrot</b></td></tr>
  </tbody>
</table>

</div>

<script type="text/javascript">

  $(document).ready(function() {
  
    var table = $('#demo').DataTable({
      "columns": [
        null,
        null
      ]
    });
    
    // iterate all cell data as a JavaScript array of arrays:
    var allData = table.data();
    for (var i = 0; i < allData.length; i++) {
      var rowData = allData[i];
      for (var j = 0; j < rowData.length; j++) {
        //console.log("row " + (i+1) + " col " + (j+1) + ": " + rowData[j]);
      }
    }
    
    // get only one cell - row 3 column 2:
    var oneSelectedCell = table.cell(2, 1);
    //console.log(oneSelectedCell.data());
    
    // get one cell's <td> node - row 3 column 2:
    var oneSelectedCell = table.cell(2, 1);
    //console.log(oneSelectedCell.node());
    
    // get some cells using a css class name:
    var someSelectedCells = table.cells(".foo").data();
    for (var i = 0; i < someSelectedCells.length; i++) {
      //console.log(someSelectedCells[i]);
    }

    // get only one cell without the HTML tags - row 3 column 2:
    var oneSelectedCell = table.cell(2, 1);
    var node = oneSelectedCell.node();
    //console.log(node.textContent);
    
  });
</script>

</body>

The final example shown above...

var oneSelectedCell = table.cell(2, 1);
var node = oneSelectedCell.node();
console.log(node.textContent);

...will print "foxtrot", with the enclosing <b> tag removed.

EDIT:

I forgot one useful function: every(). For example:

// get all nodes using the 'every()' function:
table.cells().every( function () {
  console.log(this.node().textContent);
} );

This will list all the table cells' text values (removing embedded HTML, such as the <b> tag).

Upvotes: 1

zenki1201
zenki1201

Reputation: 9

You can use string manipulation with this matter. You just need to get the indexes between the span tag. indexOf will get the first occurance of a string then use it to get the string you need with substring.

I added +1 on the first index because the start index return the position before the character so plus 1 will do the trick to make it after "<". 

var str = "<span class='text-success font-weight-bold'>B81692097</span>";
var res = str.substring(str.indexOf(">")+1, str.indexOf("</"));
document.getElementById("result").innerHTML = res;
<p id="result"></p>

Upvotes: 0

Related Questions