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>
Related
I'm trying the row to be deleted when I click the delete icon in the table using bootstrap table.
My table:
<table id="checkDataTable">
<thead style="color: #31708f; background-color: #d9edf7 ">
<tr>
<th data-field="AssetReference">Referans</th>
<th data-field="Customer">Müsteri</th>
<th data-field="ReceiverCompanyName">Alici Firma</th>
<th data-field="Tools" data-formatter="StatuFormatter">Islem</th>
</tr>
</thead>
</table>
Javascript:
function StatuFormatter(value, row, index) {
return "<a onclick='removeAssetEconomyCheckBillOfLadingRow()'><i class='fa fa-trash fa-2x' aria-hidden='true'></i></a>";
}
function removeAssetEconomyCheckBillOfLadingRow(id) {
alert(id);
}
It's fine until the removeAssetEconomyCheckBillOfLadingRow function.
How can I delete inside this function?
Please try below:
$(document).on('click', 'button.deleteRow', function(event) {
$(this).closest("tr").remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="checkDataTable" class="table">
<thead style="color: #31708f; background-color: #d9edf7 ">
<tr>
<th data-field="AssetReference">Referans</th>
<th data-field="Customer">Müşteri</th>
<th data-field="ReceiverCompanyName">Alıcı Firma</th>
<th data-field="Tools" data-formatter="StatuFormatter">İşlem</th>
</tr>
</thead>
<tobdy>
<tr>
<td>Data1</td>
<td>Data1</td>
<td>Data1</td>
<td><button type="button" class="deleteRow">
Delete
</button></td>
</tr>
<tr>
<td>Data2</td>
<td>Data2</td>
<td>Data2</td>
<td><button type="button" class="deleteRow">
Delete
</button></td>
</tr>
<tr>
<td>Data3</td>
<td>Data3</td>
<td>Data3</td>
<td><button type="button" class="deleteRow">
Delete
</button></td>
</tr>
</tobdy>
</table>
First of all, you need to set id to to identify the deleting row.
<tr id="1"></tr>
And get tr and remove
function removeAssetEconomyCheckBillOfLadingRow(id) {
$('#checkDataTable').row($('#{{id}}'))).remove().draw();
}
I have a Bootstrap table that is just a clickable row. I put a button in that row which is going to be a href to another location. When I click on the button, the row is activated and gets highlighted.
I am reading that I need to stop pagination use jQuery however I am not sure how to do that. This is my current jQuery that is used to toggle the clickable row.
$(document).ready(function() {
$('.myTable').on('click', '.clickable-row', function(event) {
$(this).toggleClass('table-warning');
});
});
I am not sure what needs to be added so that my row does not get highlighted when click on the button
EDIT:
<table class="table table-hover" id="myTable">
<thead>
<tr class="clickable-row">
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr class="clickable-row">
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr class="clickable-row">
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr class="clickable-row">
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td><a class="btn btn-primary" href="#" target="_blank" role="button">Link</a></td>
</tr>
</tbody>
You may have read that you need to stop propagation, not pagination. To stop propagation means to prevent further propagation of the current event in the capturing and bubbling phases. Applied to your example, it means that a click on the button in the table won't be also counted as click on the row. More info on stopPropagation(). Note that I've also added event.preventDefault(); in the example as it would result in opening a broken link. Omit this in your real code when you add a link address to the button.
$(document).ready(function() {
$('#myTable').on('click', '.clickable-row', function(event) {
$(this).toggleClass('table-warning');
});
$('#myTable').on('click', '.btn', function(event) {
event.preventDefault();
event.stopPropagation();
$(this).parent("td").toggleClass("clicked");
});
});
.table-warning {
background-color: yellow;
}
.clicked {
background-color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-hover" id="myTable">
<thead>
<tr class="clickable-row">
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr class="clickable-row">
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr class="clickable-row">
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr class="clickable-row">
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td><a class="btn btn-primary" href="#" target="_blank" role="button">Link</a></td>
</tr>
</tbody>
</table>
So what I'm currently trying to do know is if a column has a value of "TO BE CHECK" the "Print" button will be disabled.
Can someone help me with this?
Code is attached below.
<form action="" method="POST">
<table id="MyTable" class="table">
<thead>
<tr>
<th scope="col">Food Lane Sticker Control Number</th>
<th scope="col">OR/CR #</th>
<th scope="col">Business Permit #</th>
<th scope="col" id="test">Status</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody name="MyTable" id="tbody">
<tr name="MyTable">
<th name="MyTable"></th>
<th name="MyTable"></th>
<th name="MyTable"></th>
<th name="MyTable">TO BE CHECK</th>
<td name="MyTable">
<button type="submit" id="print" name="print" class="btn btn-success">Print</button>
</td>
</tr>
</tbody>
</table>
</form>
With JQuery, you could do
$('#MyTable th[name="MyTable"], #MyTable td[name="MyTable"]').each( function(i,e){
if (e.innerHTML === "TO BE CHECK") {
$('#Print').prop('disabled', true);
}
} );
disabled onclick="addtocart()" />
I have two tables - addFriends and existingFriends. The addFriends table has a button in the fourth column that, when clicked, should delete the corresponding row from that table and add it to the existingFriends table.
Right now, my code deletes the entire row (correct) and moves it to the other table (correct) but it includes the button and I don't want it to do that. The formatting also gets messed up and I can't figure out why.
Code:
HTML
<body>
<h1>Your Friends</h1>
<div class="mx-auto" style="width: 700;">
<table id="existingFriends" class="table table-striped table-dark table-hover">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Office</th>
<th scope="col">Friend Level</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dwayne 'The Rock' Johnson</td>
<td>Dallas></td>
<td>Top Dog/BFF</td>
</tr>
</tbody>
</table>
</div>
<h1>Suggested Friends</h1>
<div class="table-container" style="width:500;" align="center;">
<table id="addFriends" class="table table-striped table-dark table-hover">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Office</th>
<th scope="col">Friend Level</th>
<th scope="col">Add</th>
</tr>
</thead>
<tbody>
<tr id="ryan">
<td>Ryan Reynolds</td>
<td>Dallas</td>
<td>Acquaintance</td>
<td>
<a role="button" class="btn btn-success btn-sm" value="Shift Row" onclick="shiftFunc(); putBack();">
<i class="fas fa-check-square"></i>
</a>
</td>
</tr>
</tbody>
</table>
</div>
</body>
JS
<script language="javascript">
var row = document.getElementById("ryan");
function shiftFunc() {
row.parentNode.removeChild(row);
}
function putBack() {
var tbl = document.getElementById("existingFriends");
tbl.appendChild(row);
}
</script>
Picture Output: Before Click
Picture Output: After Click
Both of the below answers solved the problem of moving one row to a different table. I am not going to bother fixing the formatting issue as I am now required to convert everything to react and react does not have value or onclick javascript functions.
You can give the table cell with the add button a class so it can be selected with a query selector and removed.
To make the adding button more dynamic, you should pass this as an argument to the function and set row as the parentNode of the parentNode of the button so the function will work for more than one row.
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<h1>Your Friends</h1>
<div class="mx-auto" style="width: 700;">
<table id="existingFriends" class="table table-striped table-dark table-hover">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Office</th>
<th scope="col">Friend Level</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dwayne 'The Rock' Johnson</td>
<td>Dallas></td>
<td>Top Dog/BFF</td>
</tr>
</tbody>
</table>
</div>
<h1>Suggested Friends</h1>
<div class="table-container" style="width:500;" align="center;">
<table id="addFriends" class="table table-striped table-dark table-hover">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Office</th>
<th scope="col">Friend Level</th>
<th scope="col">Add</th>
</tr>
</thead>
<tbody>
<tr id="ryan">
<td>Ryan Reynolds</td>
<td>Dallas</td>
<td>Acquaintance</td>
<td class="addColumn">
<a role="button" class="btn btn-success btn-sm" value="Shift Row" onclick="shiftFunc(this); putBack();">
<i class="fas fa-check-square"></i>
</a>
</td>
</tr>
<tr id="daniel">
<td>Daniel </td>
<td>Dallas</td>
<td>Acquaintance</td>
<td class="addColumn">
<a role="button" class="btn btn-success btn-sm" value="Shift Row" onclick="shiftFunc(this); putBack();">
<i class="fas fa-check-square"></i>
</a>
</td>
</tr>
</tbody>
</table>
</div>
<script language="javascript">
var row = document.getElementById("ryan");
function shiftFunc(elem) {
row = elem.parentNode.parentNode;
row.parentNode.removeChild(row);
}
function putBack() {
var tbl = document.getElementById("existingFriends");
var add = row.querySelector('.addColumn');
row.removeChild(add);
tbl.appendChild(row);
}
</script>
</body>
</html>
your javascript should look like this ...
<script language="javascript">
var row = document.getElementById("ryan");
function shiftFunc() {
row.parentNode.removeChild(row);
}
function putBack() {
var tbl = document.getElementById("existingFriends");
row.lastElementChild.remove();
tbl.appendChild(row);
}
</script>
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
});
}