Iterate over rows in JQuery Bootgrid table and extract values?

Question

I am trying to iterate over a list of items in a Jquery Bootgrid table and extract the values to be used elsewhere. Here is my pseudo code:

for (each row in or-table) {
  var code = the value in data-column-id="code";
  var latitude = the value in data-column-id="lat";
  var longitude = the value in data-column-id="long";
  
  Console.log("code: " + code);
  Console.log("latitude: " + latitude);
  Console.log("longitude: " + longitude);
}

<table id="or-table" class="table table-condensed table-hover table-striped" data-toggle="bootgrid">
  <thead>
    <tr>
      <th data-column-id="code" >Symbol Code</th>
      <th data-column-id="lat" >Latitude</th>
      <th data-column-id="long" >Longitude</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

I just want to loop through the rows in the table and save the values in the cells to a variable. I have been unable to find an example using Bootgrid.

Mike B · Accepted Answer · 2016-08-03T21:05:55.940

2

You can loop through all the rows and access the elements there by which child it is.

   $("#or-table tr").each(function(i, row){
      var code = $(":nth-child(1)", row).html();
      var latitude = $(":nth-child(2)", row).html();
      var longitude = $(":nth-child(3)", row).html();

      Console.log("code: " + code);
      Console.log("latitude: " + latitude);
      Console.log("longitude: " + longitude);
    });

If not that, add class to each cell type like .code_value, .lat_value, .lng_value and access them in each() as $(row).find(".code_value").html().
Or find them by param name $(row).find("[data-column-id='code']").html()

edited Aug 03 '16 at 21:05

answered Aug 03 '16 at 20:59

Mike B

2,756
2
16
28

Bootgrid already has the ability to select the rows as objects http://www.jquery-bootgrid.com/Documentation#properties - Please see my answer below - your solution depends on the arrangement of the columns - – Dawood Awan May 29 '17 at 11:20

score 2 · Answer 2 · answered Aug 03 '16 at 21:03

This assumes your <td> elements have the data-column-id attributes:

$('tbody tr').each(function(idx, row) {
  var code = $(row).find('[data-column-id="code"]').html();
  var latitude = $(row).find('[data-column-id="lat"]').html();
  var longitude = $(row).find('[data-column-id="long"]').html();

  console.log("code: " + code);
  console.log("latitude: " + latitude);
  console.log("longitude: " + longitude);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="or-table" class="table table-condensed table-hover table-striped" data-toggle="bootgrid">
  <thead>
    <tr>
      <th data-column-id="code">Symbol Code</th>
      <th data-column-id="lat">Latitude</th>
      <th data-column-id="long">Longitude</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-column-id="code">1</td>
      <td data-column-id="lat">2</td>
      <td data-column-id="long">3</td>
    </tr>
    <tr>
      <td data-column-id="code">4</td>
      <td data-column-id="lat">5</td>
      <td data-column-id="long">6</td>
    </tr>
  </tbody>
</table>

I tired changing this to " $('or-table tbody tr').each(function(idx, row) { " but it keeps returning undefined. — bicycle_guy, Aug 03 '16 at 21:34
Sorry, was a typo. It is " $("#or-table tbody tr").each(function(idx, row){ ". I am not sure why, because $("#or-table tr") works just fine when using the $(":nth-child(1)", row).html(); method above instead of $(row).find('[data-column-id="code"]').html(); . — bicycle_guy, Aug 03 '16 at 21:51
@J.Titus Bootgrid already has the ability to select the rows as objects jquery-bootgrid.com/Documentation#properties - Please see my answer below - — Dawood Awan, May 29 '17 at 11:21

score 2 · Answer 3 · answered Aug 08 '16 at 09:07

Even though you have selected an answer, the correct way to select all rows using the jQuery Bootgrid library is like this (Fiddle):

// The Rows from The Table
console.log(dt.data('.rs.jquery.bootgrid').rows)

//With Ajax + Pagination
console.log(dt.data('.rs.jquery.bootgrid').currentRows)

The DataTable:

<table id="employeeList" class="table table-bordered table-condensed table-hover">
  <thead>
    <tr>
      <th data-column-id="iEmployeeId" data-type="numeric" data-visible="false" data-identifier="true" data-noresize>Id</th>
      <th data-column-id="sName" data-order="desc">Name</th>
      <th data-column-id="sAddress">Address</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>dsa</td>
      <td>asd</td>
    </tr>
    <tr>
      <td>2</td>
      <td>sss</td>
      <td>assd</td>
    </tr>

    <tr>
      <td>3</td>
      <td>asd</td>
      <td>aaaaasd</td>
    </tr>

    <tr>
      <td>4</td>
      <td>asd</td>
      <td>aaaaasd</td>
    </tr>

    <tr>
      <td>5</td>
      <td>asd</td>
      <td>aaaaasd</td>
    </tr>

    <tr>
      <td>6</td>
      <td>asd</td>
      <td>aaaaasd</td>
    </tr>
    <tr>
      <td>7</td>
      <td>asd</td>
      <td>aaaaasd</td>
    </tr>
    <tr>
      <td>8</td>
      <td>asd</td>
      <td>aaaaasd</td>
    </tr>
    <tr>
      <td>9</td>
      <td>asd</td>
      <td>aaaaasd</td>
    </tr>
    <tr>
      <td>10</td>
      <td>asd</td>
      <td>aaaaasd</td>
    </tr>

    <tr>
      <td>11</td>
      <td>asd</td>
      <td>aaaaasd</td>
    </tr>

  </tbody>
</table>

Then initialize BootGrid Object:

    var dt = $('#employeeList').bootgrid({
      selection: true,
      rowSelect: true,
      converters: {},
    });

Then Access the Rows and the Bootgrid DataTable Object

// the DT object
console.log(dt.data('.rs.jquery.bootgrid'))

// The Rows from The Table
console.log(dt.data('.rs.jquery.bootgrid').rows)

//With Ajax + Pagination
console.log(dt.data('.rs.jquery.bootgrid').currentRows)

var rows = dt.data('.rs.jquery.bootgrid').rows;

for(var i = 0; i < rows.length; i++)
{
    console.log(rows[i].iEmployeeId);
  console.log(rows[i].sName);
}

But then how do I get the values out of the td? This just gives me the row. — bicycle_guy, Aug 11 '16 at 20:14
I have already posted the answer. You can access the values using the for loop. Look at the last part in the answer — Dawood Awan, Aug 11 '16 at 21:48

Nat Karmios · Answer 4 · 2016-08-03T21:24:20.500

This code does not assume the position, order nor exclusivity of the th tags within each set of tr tags.

$("tr").each(function(row){
    var code = row.find("th[data-column-id='code']").text()
    var latitude = row.find("th[data-column-id='lat']").text()
    var longitude = row.find("th[data-column-id='long']").text()

    Console.log("code: " + code);
    Console.log("latitude: " + latitude);
    Console.log("longitude: " + longitude);
});

score 0 · Answer 5 · answered Aug 03 '16 at 21:01

0

I think you are looking for the BootGrid select method.

http://www.jquery-bootgrid.com/Documentation#methods

var rows = $("#or-table").bootgrid("select");

answered Aug 03 '16 at 21:01

Will

3,201
1
19
17

I am having trouble finding an example of how to use the select method. – bicycle_guy Aug 03 '16 at 21:44
I think the example I gave would work. The Bootgrid documentation says it returns a jQuery object. I've never used Bootgrid so I'm kinda winging it. The answers above essentially do the same thing so you could use one of those instead. – Will Aug 03 '16 at 22:03
Then how would I access the values? console.log("code: " + rows.?); – bicycle_guy Aug 03 '16 at 23:54
I'm not sure what the select method returns exactly but you'd probably then use jQuery's each method to iterate each row, then maybe jQuery's find method to select each table cell. Then html() or text() to get the cell contents. – Will Aug 04 '16 at 05:06

Iterate over rows in JQuery Bootgrid table and extract values?

5 Answers5