Question

137

Getting values of selected table rows in bootstrap using jquery

rated 0 times [ 140] [ 3] / answers: 1 / hits: 81649 / 9 Years ago, fri, august 21, 2015, 12:00:00

I'm using bootstrap table. In that I want to get Item ID value/values of selected table rows after clicking 'Add to cart' button present on same page.

Table code:

<table data-toggle=table id=table-style data-row-style=rowStyle data-url=tables/data2.json  data-show-refresh=true data-show-toggle=true data-show-columns=true data-search=true data-select-item-name=toolbar1 data-pagination=true data-sort-name=name data-sort-order=desc data-single-select=false data-click-to-select=true data-maintain-selected=true>

  <thead>

    <tr>

      <th data-field=state data-checkbox=true></th>

      <th data-field=id >Item ID</th>

      <th data-field=name data-sortable=true>Product Name</th>

      <th data-field=price data-sortable=true>Actual Price</th>

      <th data-field=discount_price data-sortable=true>Discount Price</th>

      <th data-field=stock_avail data-sortable=true>Stock Available</th>

    </tr>

  </thead>

</table>

JQuery code:

$(document).ready(function()

{

   $(#add_cart).click(function()

   {

      //foreach selected row retrieve 'Item ID' values in array;

      //call ajax for otherpage.php?arr='Item ID array';

   });

});

As I'm new in bootstrap I'm trying to tackle this but not getting proper solution anybody please advise me this.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

helenat

Add To Favorites

Follow

Total Points: 450

Total Questions: 95

Total Answers: 97

Location: Central African Republic

Member since Mon, Aug 10, 2020

4 Years ago

answered 9 Years ago ellisw · Accepted Answer

Just use the check.bs.table and uncheck.bs.table events to collect your checked rows.

BS-Table Basic Events

Here is an example:

var checkedRows = [];



$('#eventsTable').on('check.bs.table', function (e, row) {

  checkedRows.push({id: row.id, name: row.name, forks: row.forks});

  console.log(checkedRows);

});



$('#eventsTable').on('uncheck.bs.table', function (e, row) {

  $.each(checkedRows, function(index, value) {

    if (value.id === row.id) {

      checkedRows.splice(index,1);

    }

  });

  console.log(checkedRows);

});



$(#add_cart).click(function() {

  $(#output).empty();

  $.each(checkedRows, function(index, value) {

    $('#output').append($('<li></li>').text(value.id +  |  + value.name +  |  + value.forks));

  });

});

<link href=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css rel=stylesheet/>

<link rel=stylesheet href=//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.1/bootstrap-table.min.css>

<script src=https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js></script>

<script src=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js></script>

<script src=//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.1/bootstrap-table.min.js></script>



<table id=eventsTable

       data-toggle=table

       data-height=300

       data-url=https://api.github.com/users/wenzhixin/repos?type=owner&sort=full_name&direction=asc&per_page=100&page=1

       data-pagination=true

       data-search=true

       data-show-refresh=true

       data-show-toggle=true

       data-show-columns=true

       data-toolbar=#toolbar>

    <thead>

    <tr>

        <th data-field=state data-checkbox=true></th>

        <th data-field=name>Name</th>

        <th data-field=stargazers_count>Stars</th>

        <th data-field=forks_count>Forks</th>

        <th data-field=description>Description</th>

    </tr>

    </thead>

</table>



<button id=add_cart>Add to card</button>

<ul id=output></ul>