Getting values of selected table rows in bootstrap using jquery

Question

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

Answer 1

Bootstrap table has a function getSelections

with the javascript funciton you can get all selected rows. (your checkobx fiels should be bound to data-field="state")

            function getIdSelections() {
            return $.map($table.bootstrapTable('getSelections'), function (row) {
                return row.Id
            });
        }

Answer 2

To get the selected (checked) rows, use getSelections method.

Note that if you are using pagination, then you have to use the maintainMetaData table option.

Here is an example which displays selected product's names when user clicks on Ad to cart button:

var $table = $('#myTable');

function getRowSelections() {
  return $.map($table.bootstrapTable('getSelections'), function(row) {
    return row;
  })
}

$('#showSelectedRows').click(function() {
  var selectedRows = getRowSelections();
  var selectedItems = '\n';
  $.each(selectedRows, function(index, value) {
    selectedItems += value.name + '\n';
  });

  alert('The following products are selected: ' + selectedItems);
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.15.5/dist/bootstrap-table.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.15.5/dist/bootstrap-table.min.js"></script>

<div id="toolbar">
  <button id="showSelectedRows" class="btn btn-primary" type="button">Show Selected Rows</button>
</div>

<table id="myTable" data-toolbar="#toolbar" data-toggle="table" data-maintain-meta-data="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">Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td>1</td>
      <td>Chair</td>
      <td>$80</td>
    </tr>
    <tr>
      <td></td>
      <td>2</td>
      <td>Sofa</td>
      <td>$500</td>
    </tr>
    <tr>
      <td></td>
      <td>3</td>
      <td>Desk</td>
      <td>$300</td>
    </tr>
    <tr>
      <td></td>
      <td>4</td>
      <td>Rug</td>
      <td>$200</td>
    </tr>
  </tbody>
</table>

Answer 3

Here is example give it to you :

HTML

<table id="table-style">
<thead>
    <tr>
        <th data-field="state" data-checkbox="true"></th>
        <th data-field="id">Item ID</th>
    </tr>
    <tr>
        <td>
            <input type="checkbox" />
        </td>
        <td>5</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" />
        </td>
        <td>15</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" />
        </td>
        <td>10</td>
    </tr>
</thead>
</table>

<button>Add to cart</button>

JS

var arr;
$('button').click(function(){
  arr = $('#table-style').find('[type="checkbox"]:checked').map(function(){
      return $(this).closest('tr').find('td:nth-child(2)').text();
  }).get();

  console.log(arr);
});

DEMO

Answer 4

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>