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
});
}
Related
Is there any simple way to move data from table to another table using the id? I want to get all the info inside the first table using the id, insert it to another table, and then delete it from current one using Laravel.
In my Html table. For example I have pending reservation table and there's an action button "accept" then if I will click it the data will go to the accepted reservation table.
Pleaser refer to this photo.
enter image description here
you can use sortablejs to do the trick
check this example from the docs
if you are using datatable , then you can do something like that
var table1 = $("#pending").DataTable();
var table2 = $("#reserved").DataTable();
$(document).on("click", "#pending .move", function () {
var row = table1.row( $(this).parents('tr') );
var rowNode = row.node();
row.remove();
table2
.row.add( rowNode )
.draw();
});
$(document).on("click", "#reserved .move", function () {
var row =table2.row( $(this).parents('tr') );
var rowNode = row.node();
row.remove();
table1
.row.add( rowNode )
.draw();
});
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<table id="pending" class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">action</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td><button type="button" class="btn btn-primary btn-sm move">move</button></td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td><button type="button" class="btn btn-primary btn-sm move">move</button></td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td><button type="button" class="btn btn-primary btn-sm move">move</button></td>
</tr>
</tbody>
</table>
<table id="reserved" class="table mt-5">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js"></script>
I want to remove each row in a table by its id. But, how can I concatenate the row selector with a variable? This is the jQuery code:
$(document).ready(function() {
$('.btn-tambah').click(function() {
var html = $(this).closest("tr").clone().find('td:last').after("<td id='action'><button class='btn btn-danger btn-hapus'>Hapus</button></td>").remove().end().prop('outerHTML');
$("#daftar-buku-dipinjam").append(html);
$('tr').each(function() {
var id = $(this).index() + 1;
$(this).attr("id", id);
$('.btn-hapus').click(function() {
$('#daftar-buku-dipinjam tr td #' + id).parent().remove(); // how to concatenate the selector?
});
});
$('tr td').each(function() {
$(this).attr("name", "bukudipinjam[]");
});
$('tr #action').each(function() {
$(this).removeAttr("name");
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-striped table-bordered" id="daftar-buku-dipinjam">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">Judul</th>
<th scope="col">Penulis</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<!--
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td> Hapus </td>
</tr>
-->
</tbody>
</table>
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>
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>
i have a very simple table. When i click in a row does i become the id from the clicked column. Any ideas?
<table id="myTable" class="display table-striped">
<thead>
<tr>
<th id="address">Address</th>
<th id="country">Country</th>
<th id="number">number</th>
</tr>
<thead>
<tbody>
<tr>
<td>address1</td>
<td>country1</td>
<td>number1</td>
</tr>
<tr>
<td>address2</td>
<td>country2</td>
<td>number2</td>
</tr>
<tr>
<td>address3</td>
<td>country3</td>
<td>number3</td>
</tr>
</tbody>
</table>
Example:
Click on Country2: country(column id)
Click on Number3: number(column id)
$('#myTable tbody').on('click', 'tr', function () {
alert('clicked in row, but which column?');
}
Best regards
you could check the index of the td with respect row and then find the respected column th id using eq() function of jquery
$('tr td').click(function(){
var a = $(this).index();
var id = $('tr th').eq(a).attr('id')
console.log(id);
})
table ,tr,td{
border:1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable" class="display table-striped">
<thead>
<tr>
<th id="address">Address</th>
<th id="country">Country</th>
<th id="number">number</th>
</tr>
<thead>
<tbody>
<tr>
<td>address1</td>
<td>country1</td>
<td>number1</td>
</tr>
<tr>
<td>address2</td>
<td>country2</td>
<td>number2</td>
</tr>
<tr>
<td>address3</td>
<td>country3</td>
<td>number3</td>
</tr>
</tbody>
</table>
Get the row index using $(this).index() + 1:
$('#myTable tbody').on('click', 'tr', function () {
alert('You clicked on row '+ ($(this).index() + 1 ) );
});
Use index . Index start with 0 so add 1 .
$('#myTable tbody').on('click', 'tr', function() {
var row = $(this).index() + 1; // Index start with 0 so add 1
alert(row);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable" class="display table-striped">
<thead>
<tr>
<th id="address">Address</th>
<th id="country">Country</th>
<th id="number">number</th>
</tr>
<thead>
<tbody>
<tr>
<td>address1</td>
<td>country1</td>
<td>number1</td>
</tr>
<tr>
<td>address2</td>
<td>country2</td>
<td>number2</td>
</tr>
<tr>
<td>address3</td>
<td>country3</td>
<td>number3</td>
</tr>
</tbody>
</table>
var $table = $('#myTable'),
$th = $table.find('thead tr th');
$table.find('tbody tr').on('click', 'td', function () {
console.log($th[$(this).index()].id);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable" class="display table-striped">
<thead>
<tr>
<th id="address">Address</th>
<th id="country">Country</th>
<th id="number">number</th>
</tr>
<thead>
<tbody>
<tr>
<td>address1</td>
<td>country1</td>
<td>number1</td>
</tr>
<tr>
<td>address2</td>
<td>country2</td>
<td>number2</td>
</tr>
<tr>
<td>address3</td>
<td>country3</td>
<td>number3</td>
</tr>
</tbody>
</table>
Hope this helpful.
Html:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="test.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<table id="myTable" class="display table-striped">
<tr>
<th id="address">Address</th>
<th id="country">Country</th>
<th id="number">number</th>
</tr>
<tr>
<td>address1</td>
<td>country1</td>
<td>number1</td>
</tr>
<tr>
<td>address2</td>
<td>country2</td>
<td>number2</td>
</tr>
<tr>
<td>address3</td>
<td>country3</td>
<td>number3</td>
</tr>
</table>
</body>
</html>
Script:
<script>
$('#myTable tbody').on('click','td', function () {
var row = $(this).index() ;
alert(row);
});
</script>
specify the 'td' in the script function. Doing this you will get the column id of the selected column in particular row.