CODEWITHSUNDEEP
javascriptjqueryjquery-bootgrid
bicycle_guy
bicycle_guy

Reputation: 299

Iterate over rows in JQuery Bootgrid table and extract values?

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.

Upvotes: 1

Views: 2594

Answers (5)

Dawood Awan
Dawood Awan

Reputation: 7338

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);
}

Upvotes: 2

Nat Karmios
Nat Karmios

Reputation: 355

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);
});

Upvotes: 1

Mike B
Mike B

Reputation: 2784

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()

Upvotes: 2

J. Titus
J. Titus

Reputation: 9690

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>

Upvotes: 2

Will
Will

Reputation: 3241

I think you are looking for the BootGrid select method.

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

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

Upvotes: 0

Related Questions