Return datatable input field - javascript

How can I return the value of an input in my jquery datatable? Here is my table:
<table id="productsTable" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th>Product Code</th>
<th>Brand</th>
<th>Category</th>
<th>Description</th>
<th>Price</th>
<th>Quantity</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
{{#each context}}
<tr>
<td class="product_code">{{product_code}}</td>
<td class="brand">{{brand}}</td>
<td class="category">{{category}}</td>
<td class="description">{{description}}</td>
<td class="price">$ {{invoice_price}}</td>
<td class="quantity"><input type="text"></td> //WANT TO RETURN THIS
<th>Details</th>
<th><button type="button" class="btn btn-info" style="background-color: #337ab7; border-color: #337ab7">Add to Cart</button></th>
</tr>
{{/each}}
</tbody>
</table>
I specifically want to return the value in this input with the click of a button that is also part of that row:
<td class="quantity"><input type="text"></td>
So far I tried:
$(".btn-btn-info").click(function() {
var quantity: $(this).parent().parent().children('td.quantity').val();
console.log(quantity) // returns undefined
}
Thank you in advance!


You can access textbox value as
var quantity = $(this).parents("tr:first").find('.quantity input').val();


You are using the wrong class, there isn't any class by the name of btn-btn-info
$("button.btn").click(function(){
console.log( $(this).parent().parent().find('input').val() );
// console.log(quantity) // returns undefined
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="productsTable" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th>Product Code</th>
<th>Brand</th>
<th>Category</th>
<th>Description</th>
<th>Price</th>
<th>Quantity</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td class="product_code">{{product_code}}</td>
<td class="brand">{{brand}}</td>
<td class="category">{{category}}</td>
<td class="description">{{description}}</td>
<td class="price">$ {{invoice_price}}</td>
<td class="quantity"><input type="text" value="hello world"></td> //WANT TO RETURN THIS
<th>Details</th>
<td><button type="button" class="btn btn-info" style="background-color: #337ab7; border-color: #337ab7">Add to Cart</button></td>
</tr>
</tbody>
</table>


<html>
<head>
<title>sample Page</title>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function () {
szTr = '<tr><td class="product_code">product_code</td>';
szTr=szTr+'<td class="brand">brand</td>';
szTr=szTr+'<td class="category">category</td>';
szTr=szTr+'<td class="description">description</td>';
szTr=szTr+'<td class="price">$ invoice_price</td>';
szTr=szTr+'<td class="quantity"><input type="text" value="222222"></td>';
szTr=szTr+'<th>Details</th>';
szTr=szTr+'<th><button type="button" class="btn btn-info" style="background-color: #337ab7; border-color: #337ab7">Add to Cart</button></th>';
szTr = szTr + '</tr>';
$('#productsTable tbody').append(szTr)
$('#productsTable').on('click', '.btn-info', function () {
alert($(this).closest('tr').find('td.quantity').find('input').val());
});
});
</script>
</head>
<body>
<table id="productsTable" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th>Product Code</th>
<th>Brand</th>
<th>Category</th>
<th>Description</th>
<th>Price</th>
<th>Quantity</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>

Related

How to duplicate specific row in table (JS/JQuery)?

I am trying to duplicate a specific line in my table when I click in "duppliquer" button
See my code to create my table below
<table id="myTable" class="table table-striped table-bordered table order-list" data-page-length='100'>
<thead>
<tr>
<th style="width: 5%">Col 1</th>
<th style="width: 5%">Col 2</th>
<th style="width: 5%">Col 3</th>
<th style="width: 5%">Col 4</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">Test1</td>
<td align="center">Test2</td>
<td align="center">Test3</td>
<td align="center">
<a class="Duppliquer" title="Duppliquer" data-toggle="tooltip" style="cursor: pointer;"><i class="material-icons">control_point_duplicate</i></a>
</td>
</tr>
<tr>
<td align="center">Test4</td>
<td align="center">Test5</td>
<td align="center">Test6</td>
<td align="center">
<a class="Duppliquer" title="Duppliquer" data-toggle="tooltip" style="cursor: pointer;"><i class="material-icons">control_point_duplicate</i></a>
</td>
</tr>
</tbody>
I know that I have to use Javascript ou Jquery, but I don't understand how to get the line that i want to duplicate
I made a lot of research on this subject, but cannot find any answer ...

You should get the current row element and then use clone(true) function to clone it and finally append the cloned row into the table so that it is placed after the current row elemnt. Here is an example:
$(".Duppliquer").click(function(){
var $rw = $(this).closest( "tr" );
var $new_rw = $rw.clone( true );
$rw.after($new_rw);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable" class="table table-striped table-bordered table order-list" data-page-length='100'>
<thead>
<tr>
<th style="width: 5%">Col 1</th>
<th style="width: 5%">Col 2</th>
<th style="width: 5%">Col 3</th>
<th style="width: 5%">Col 4</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">Test1</td>
<td align="center">Test2</td>
<td align="center">Test3</td>
<td align="center">
<a class="Duppliquer" title="Duppliquer" data-toggle="tooltip" style="cursor: pointer;"><i class="material-icons">control_point_duplicate</i></a>
</td>
</tr>
<tr>
<td align="center">Test4</td>
<td align="center">Test5</td>
<td align="center">Test6</td>
<td align="center">
<a class="Duppliquer" title="Duppliquer" data-toggle="tooltip" style="cursor: pointer;"><i class="material-icons">control_point_duplicate</i></a>
</td>
</tr>
</tbody>
EDIT:
according to the comments the following code will also change the first cell of copied row:
$(".Duppliquer").click(function(){
var $rw = $(this).closest( "tr" );
var $new_rw = $rw.clone( true );
var $first_cell = $new_rw.find("td:first");
$first_cell.html($first_cell.html() + " Copy!");
$rw.after($new_rw);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable" class="table table-striped table-bordered table order-list" data-page-length='100'>
<thead>
<tr>
<th style="width: 5%">Col 1</th>
<th style="width: 5%">Col 2</th>
<th style="width: 5%">Col 3</th>
<th style="width: 5%">Col 4</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">Test1</td>
<td align="center">Test2</td>
<td align="center">Test3</td>
<td align="center">
<a class="Duppliquer" title="Duppliquer" data-toggle="tooltip" style="cursor: pointer;"><i class="material-icons">control_point_duplicate</i></a>
</td>
</tr>
<tr>
<td align="center">Test4</td>
<td align="center">Test5</td>
<td align="center">Test6</td>
<td align="center">
<a class="Duppliquer" title="Duppliquer" data-toggle="tooltip" style="cursor: pointer;"><i class="material-icons">control_point_duplicate</i></a>
</td>
</tr>
</tbody>

//I also recommend using lowercase ids and classes.
$(document).ready(function(){
$(document).on('click', '.Duppliquer', function(e){
e.preventDefault();
var row = $(e.target).closest('tr'),
copy = row.clone();
copy.insertAfter(row);
});
});

Use JQuery find:
$('#myTable').find('tr').click(function () {
var indx = $(this).index() +1; --gets row index
var tr = $(this); --gets row
});

How to search data from multiple table through jQuery

I have three different tables and I want to search for data in them. In this task I successfully searched data but when I search data of one of the table remaining two tables are also being searched. Can anyone help to search data according to the respect of their, Like when I searched data of the first table that time it should give me only data of the first table.
<html>
<head>
<script src="jquery-3.3.1.js"></script>
<script>
function SearchTable()
{
$(document).ready(function(){
$("#myInput, #yourInput, #ourInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
debugger;
$("#myTable tr,#yourTable tr,#ourTable tr").filter(function() {
debugger;
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
}
SearchTable();
</script>
</head>
<body>
<input type="text" id="myInput" placeholder="Search" title="Type">
<br>
<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Email Id</th>
<th>Contact Number</th>
</tr>
</thead>
<tbody id="myTable">
<tr>
<td>Enesh</td>
<td>eneshpal#gmail.com</td>
<td>123456789</td>
</tr>
<tr>
<td>Ramesh</td>
<td>palenesh#gmail.com</td>
<td>174125896</td>
</tr>
<tr>
<td>Suresh</td>
<td>suresh#gmail.com</td>
<td>987654123</td>
</tr>
</tbody>
</table>
<hr>
<input type="text" id="yourInput" placeholder="Search" title="Type">
<br>
<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Email Id</th>
<th>Contact Number</th>
</tr>
</thead>
<tbody id="yourTable">
<tr>
<td>Rakesh</td>
<td>rakes#gmail.com</td>
<td>00014151</td>
</tr>
<tr>
<td>Naval</td>
<td>Naval#gmail.com</td>
<td>1234567879</td>
</tr>
<tr>
<td>Rohit</td>
<td>rohit#gmail.com</td>
<td>123456</td>
</tr>
</tbody>
</table>
<hr>
<input type="text" id="ourInput" placeholder="Search" title="Type">
<br>
<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Email Id</th>
<th>Contact Number</th>
</tr>
</thead>
<tbody id="ourTable">
<tr>
<td>Shubham</td>
<td>Shubham#gmail.com</td>
<td>023456789</td>
</tr>
<tr>
<td>pal</td>
<td>palenesh#gmail.com</td>
<td>111125896</td>
</tr>
<tr>
<td>Suresh</td>
<td>suresh#gmail.com</td>
<td>987654123</td>
</tr>
</tbody>
</table>
</body>
</html>

//put the document ready around your whole logic, not inside the method
$(document).ready(function() {
function SearchTable() {
//bind on all your different inputs
$("#myInput, #yourInput, #ourInput").on("keyup", function() {
//get the input value, trimmed, and lowercased
var value = this.value.trim().toLowerCase();
//get the associated table
var $table = $("#"+ this.getAttribute('data-target'));
//show all the rows to "undo" previous filtering
$table.find('tr').show();
//only filter if the value is not blank
if (value) {
//find all the rows that do not match the filter, and hide them
$table.find('tr').filter(function(){
return this.innerText.toLowerCase().indexOf(value) < 0;
}).hide();
}
});
}
SearchTable();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="myInput" placeholder="Search" title="Type" data-target="myTable">
<br>
<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Email Id</th>
<th>Contact Number</th>
</tr>
</thead>
<tbody id="myTable">
<tr>
<td>Enesh</td>
<td>eneshpal#gmail.com</td>
<td>123456789</td>
</tr>
<tr>
<td>Ramesh</td>
<td>palenesh#gmail.com</td>
<td>174125896</td>
</tr>
<tr>
<td>Suresh</td>
<td>suresh#gmail.com</td>
<td>987654123</td>
</tr>
</tbody>
</table>
<hr>
<input type="text" id="yourInput" placeholder="Search" title="Type" data-target="yourTable">
<br>
<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Email Id</th>
<th>Contact Number</th>
</tr>
</thead>
<tbody id="yourTable">
<tr>
<td>Rakesh</td>
<td>rakes#gmail.com</td>
<td>00014151</td>
</tr>
<tr>
<td>Naval</td>
<td>Naval#gmail.com</td>
<td>1234567879</td>
</tr>
<tr>
<td>Rohit</td>
<td>rohit#gmail.com</td>
<td>123456</td>
</tr>
</tbody>
</table>

why search is not working on jquery-dataTable javascript jquery

i have a table there i have included a button for action , because of that the search is not working on that table.
Here is Demo:https://jsfiddle.net/pkxmnh2a/33/
$(document).ready(function() {
var table = $('#examples').DataTable();
$('a.toggle-vis').on('click', function(e) {
e.preventDefault();
var column = table.column($(this).attr('data-column'));
column.visible(!column.visible());
});
$('#examples tfoot th').each(function() {
var title = $('#examples thead th').eq($(this).index()).text();
$(this).html('<input tyepe="text" placeholder="Search ' + title + '"/>');
});
table.columns().eq(0).each(function(colIdx) {
$('input', table.column(colIdx).footer()).on('keyup change', function() {
table
.column(colIdx)
.search(this.value)
.draw();
});
});
});
.widthind {
width: 30px;
height: 30px;
background-color: black;
color: white;
}
form {
margin: 0;
padding: 0;
display: -webkit-inline-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css" rel="stylesheet" />
<table class="table table-boardered" id="examples">
<thead class="thead-dark">
<tr>
<th>Id</th>
<th>Customer Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>2PslfYy</td>
<td>He-man </td>
<td>good product 1</td>
</tr>
<thead class="thead-dark excludeAction" style="background-color: !important;">
<tr>
<th colspan="50">
Delete
</th>
</tr>
</thead>
<tr>
<td>3lpnSrv</td>
<td>Jhon Doe</td>
<td>good product 2</td>
</tr>
<thead class="thead-dark excludeAction" style="background-color: !important;">
<tr>
<th colspan="50">
Delete
</th>
</tr>
</thead>
</tbody>
<tfoot>
<tr>
<th>Id</th>
<th>Customer Name</th>
<th>Description</th>
</tr>
</tfoot>
</table>

The problem is you are heading thead tags within the rows of the table. This is not within the spec plus it won't work for Datatables. Plus Datatables doesn't support colspan or rowspan within the tbody (rows).
After fixing the buttons the search still doesn't work because of the selector you have on this line:
$('input', table.column(colIdx).footer()).on('keyup change', function () {
This is affecting the global search also. Compare your code to this example:
https://datatables.net/examples/api/multi_filter.html
Kevin

A thead never goes inside tbody.
Check this jsfiddle.net/nfycu6o5/1.
Correct html table:
<table class="table table-boardered" id="examples">
<thead class="thead-dark">
<tr>
<th>Id</th>
<th>Customer Name</th>
<th>Description</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>2PslfYy</td>
<td>He-man </td>
<td>good product 1</td>
<td>Delete</td>
</tr>
<tr>
<td>3lpnSrv</td>
<td>Jhon Doe</td>
<td>good product 2</td>
<td>Delete</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Id</th>
<th>Customer Name</th>
<th>Description</th>
<th></th>
</tr>
</tfoot>
</table>

Your row is creating inside the thead element, the search given in datatable will search from the tbody element instead of thead
Eg: when you type on the searchbox, keyup event will trigger and find the results from table body and your table header always remains the same
<table class="table table-boardered" id="examples">
<thead class="thead-dark">
<tr>
<th>Id</th>
<th>Customer Name</th>
<th>Description</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>2PslfYy</td>
<td>He-man </td>
<td>good product 1</td>
<td>Delete</td>
</tr>
<tr>
<td>3lpnSrv</td>
<td>Jhon Doe</td>
<td>good product 2</td>
<td>Delete</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Id</th>
<th>Customer Name</th>
<th>Description</th>
<th></th>
</tr>
</tfoot>
</table>

Accordion table showing another table

I am trying to set an accordion in multiple tables.
Once user clicks on a <tr>, another table shows at the bottom.
HTML
<table class="table m-0 stocks" border="0" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr class="parent-clickable">
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
<td>+</td>
</tr>
<tr class="hidden">
<td colspan="5">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
<td>+</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
JS
$(document).ready(function() {
$("parent-clickable").click(function() {
var text = $(this).closest("tr").find(".hidden").slideToggle(200, "linear");
});
console.log("Clicked");
});
JSFIDDLE

Some little things to fix in your code, HTML is fine.
$(document).ready(function() {
$(".parent-clickable").click(function() {
$(this).next(".hidden").slideToggle(200, "linear");
console.log("Clicked");
});
});
You forgot to add the selector in front of "parent-clickable" in this case, a class so prefix it with a dot.
using .closest and .find seems redudant in this case, when a single .next can help achieve what you want. Finally, if you are not using it elsewhere, there's no need to store all this in a variable.

$(".parent-clickable").click(function() {
$(this).closest("tr").next(".hidden").slideToggle(200, "linear");
console.log("Clicked");
});
.hidden {
display: none
}
table {
border: 1px solid red;
}
td,
th {
padding: 5px 10px;
}
.parent-clickable {
background: rgba(0, 0, 0, .3);
cursor: pointer;
z-index: 100000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<table class="table m-0 stocks" border="0" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr class="parent-clickable">
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
<td>+</td>
</tr>
<tr class="hidden">
<td colspan="5">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
<td>+</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
$(".parent-clickable").on("click", function() {
　$(this).closest("tr").next(".hidden").slideToggle(200, "linear");
console.log("Clicked");
});
How about this? A missing . on the parent-clickable selector and use next instead of find?

Getting values of selected table rows in bootstrap using jquery

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.

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>

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 Show Selected Rows 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>

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

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

Categories

Resources