HTML get data from table footer (dataTable)

Question

I have dataTable with this html:

<table id="example" class="table table-striped table-bordered table-responsitive dataTable" cellspacing="0" width="100%" role="grid" aria-describedby="example_info" style="width: 100%;">
        <thead>
            <tr role="row"><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Naziv: activate to sort column ascending" style="width: 44px;">Naziv</th><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Povrsina: activate to sort column ascending" style="width: 69px;">Povrsina</th><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Lokacija: activate to sort column ascending" style="width: 67px;">Lokacija</th><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Osnov: activate to sort column ascending" style="width: 53px;">Osnov</th><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Kultura: activate to sort column ascending" style="width: 59px;">Kultura</th><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Seme-sadnice: activate to sort column ascending" style="width: 109px;">Seme-sadnice</th><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Radnici $: activate to sort column ascending" style="width: 74px;">Radnici $</th><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Gorivo $: activate to sort column ascending" style="width: 68px;">Gorivo $</th><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Inputi $: activate to sort column ascending" style="width: 61px;">Inputi $</th><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Ukupno $: activate to sort column ascending" style="width: 77px;">Ukupno $</th><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Dobit $: activate to sort column ascending" style="width: 58px;">Dobit $</th><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="ROI %: activate to sort column ascending" style="width: 49px;">ROI %</th><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label=": activate to sort column ascending" style="width: 85px;"></th></tr>
        </thead>

        <tfoot>
            <tr><th rowspan="1" colspan="1">Parcela</th><th rowspan="1" colspan="1">5.0607</th><th rowspan="1" colspan="1">Lokacija</th><th rowspan="1" colspan="1">Osnov</th><th rowspan="1" colspan="1">Kultura</th><th rowspan="1" colspan="1"></th><th rowspan="1" colspan="1">960</th><th rowspan="1" colspan="1">1355</th><th rowspan="1" colspan="1">1150</th><th rowspan="1" colspan="1">3465</th><th rowspan="1" colspan="1">17500</th><th rowspan="1" colspan="1">405</th><th rowspan="1" colspan="1"></th></tr>
        </tfoot>
    <tbody><tr role="row" class="odd"><td>prva</td><td>5.0607</td><td>ns</td><td>vlasnistvo</td><td>vocnjak</td><td>Breskva</td><td>960</td><td>1355</td><td>1150</td><td>3465</td><td>17500</td><td>405 %</td><td><div style="float:right;"><button class="btn btn-info" data-toggle="modal" data-target="#myModal1">Detalji...</button> <i data-toggle="modal" data-target="#delete" class="fa fa-times"></i></div></td></tr></tbody></table>

How I can get values from table footer (value from columns radnici$, gorivo$, inputi$)?

I need this data to create chart with google visualisation... so I need:

var data = google.visualization.arrayToDataTable([
          ['aaa', 'bbb'],
          ['Radnici',     here I need value from table footer of column radici],
          ['Gorivo',      from column gorivo],
          ['Inputi',  from column inputi],

        ]);

How to get this data?

HTML table: Fiddle

Answer 1

Use the following jQuery to access the values:

var radnici = $("tfoot th:nth-child(7)").text();
var gorivo = $("tfoot th:nth-child(8)").text();
var inputi = $("tfoot th:nth-child(9)").text();

After accessing the values, you may pass them to create a chart with google visualization.

Here's a DEMO .

Answer 2

You can give the footer TH's in question some IDs, and fetch the values by using jQuery:

<tfoot>
  <tr>
    <th rowspan="1" colspan="1">Parcela</th>
    <th rowspan="1" colspan="1">5.0607</th>
    <th rowspan="1" colspan="1">Lokacija</th>
    <th rowspan="1" colspan="1">Osnov</th>
    <th rowspan="1" colspan="1">Kultura</th>
    <th rowspan="1" colspan="1"></th>
    <th rowspan="1" colspan="1" id="radnici">960</th>
    <th rowspan="1" colspan="1" id="gorivo">1355</th>
    <th rowspan="1" colspan="1" id="inputi">1150</th>
    <th rowspan="1" colspan="1">3465</th>
    <th rowspan="1" colspan="1">17500</th>
    <th rowspan="1" colspan="1">405</th><th rowspan="1" colspan="1"></th>
  </tr>
</tfoot>

---

var radnici = Number($('#radnici').html());
var gorivo = Number($('#gorivo').html());
var inputi = Number($('#inputi').html());
console.log(radnici, gorivo, inputi);

var data = google.visualization.arrayToDataTable([
          ['aaa', 'bbb'],
          ['Radnici', radnici],
          ['Gorivo', gorivo],
          ['Inputi', inputi],

        ]);

http://jsfiddle.net/L3kh39t1/3/