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();
}
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 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>
I need to show another tbody of table on Click. I have following table which is in foreach so there will be multiple buttons.:
<table class="table" id="call-table">
<tr>
<th>Show more buttons</th>
</tr>
<tbody>
<tr>
<td class="show-more-button">Show more</td> //It will open first tbody
<tr>
<tr>
<td class="show-more-button">Show more</td> //It will open second tbody
<tr>
<tbody class="show-more"> //First tbody
<tr>
<th scope="col">Data</th>
<th scope="col">Value</th>
</tr>
<tr>
<td>Some data....</td>
<td>A value..</td>
</tr>
</tbody>
<tbody class="show-more"> //Second tbody
<tr>
<th scope="col">Data</th>
<th scope="col">Value</th>
</tr>
<tr>
<td>Some more data....</td>
<td>Another value..</td>
</tr>
</tbody>
</tbody>
I'm using python with DjangoFramework. And that's the script i came up with. But it only works for changing the 's text but doesn't show the tbody.
<script>
$(document).on("click", ".show-more-button", function() {
if ($(this).text() == "Show more") {
$(this).text("Show less");
$(this).parent().children(".show-more").style.display = "block";
} else {
$(this).text("Show more");
$(this).parent().children(".show-more").style.display = "block";
}
});
</script>
and in CSS:
.show-more {
display: none;
}
What error do i have in my script?
Because $(this).parent() will be <tr>. For example you might use closest and find first parent table and there will be able using .children('.show-more'). See an example below.
$(document).on("click", ".show-more-button", function() {
if ($(this).text() == "Show more") {
$(this).text("Show less");
$(this).closest('table').children(".show-more").css('display', 'block');
} else {
$(this).text("Show more");
$(this).closest('table').children(".show-more").css('display', 'none');
}
});
.show-more { display: none; }
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<table>
<thead>
<tr>
<th>Name</th>
<th>Lastname</th>
<th>Age</th>
</tr>
</thead>
<tr>
<td class="show-more-button">Show more</td>
<tr>
<tbody class="show-more">
<tr>
<td>John</td>
<td>Doe</td>
<td>27</td>
</tr>
<tr>
<td>Alice</td>
<td>Lo</td>
<td>43</td>
</tr>
<tr>
<td>Linda</td>
<td>Morrison</td>
<td>45</td>
</tr>
</tbody>
</table>
Example changed and i prepared new solution.
$(document).on("click", ".show-more-button", function() {
var forId = $(this).data('more-for');
var $showMoreElement = $(this).closest('table').children('.show-more[data-more-id="' + forId + '"]');
if ($(this).text() == "Show more") {
$(this).text("Show less");
$showMoreElement.css('display', 'block');
} else {
$(this).text("Show more");
$showMoreElement.css('display', 'none');
}
});
.show-more {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table" id="call-table">
<tr>
<th>Show more buttons</th>
</tr>
<tbody>
<tr>
<!--It will open first tbody -->
<td class="show-more-button" data-more-for="1">Show more</td>
</tr>
<tr>
<!--It will open second tbody -->
<td class="show-more-button" data-more-for="2">Show more</td>
</tr>
</tbody>
<!--First tbody -->
<tbody class="show-more" data-more-id="1">
<tr>
<th scope="col">Data</th>
<th scope="col">Value</th>
</tr>
<tr>
<td>Some data....</td>
<td>A value..</td>
</tr>
</tbody>
<!--Second tbody-->
<tbody class="show-more" data-more-id="2">
<tr>
<th scope="col">Data</th>
<th scope="col">Value</th>
</tr>
<tr>
<td>Some more data....</td>
<td>Another value..</td>
</tr>
</tbody>
</table>
Here two ways. Choose anyone. It works well:
$(function(){
$('.show-more-button').click(function(){
var b_id = $(this).data('id');
var b_text = $(this).text() == "Show more" ? "Show less" : "Show more";
$(this).text(b_text);
$('.shm'+b_id).toggle();
});
$('.show-more-button2').click(function(){
var b_id = $(this).data('id');
var b_text = $(this).text() == "Show more" ? "Show less" : "Show more";
$(this).text(b_text);
$('.shm'+b_id+'_2').toggle();
th_sh();
});
})
function th_sh(){
var o = 0;
$('#call-table2').find('.shows').each(function(){
var u = $(this).css('display') == 'table-row' ? 1 : 0;
o = o + u;
});
o>0 ? $('.th_disp').css('display','block') : $('.th_disp').css('display','none');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-striped" id="call-table">
<thead>
<tr>
<th>Show more buttons</th>
<th></th>
</tr>
</thead>
<tr>
<td class="show-more-button" data-id="1">Show more</td> <!--//It will open first tbody-->
<td></td>
<tr>
<tr>
<td class="show-more-button" data-id="2">Show more</td><!--//It will open second tbody -->
<td></td>
<tr>
<tr>
<td class="show-more-button" data-id="3">Show more</td><!--//It will open second tbody -->
<td></td>
<tr>
<tbody>
<!--<tbody class="show-more"> //First tbody-->
<tr class="shm1" style="display:none;">
<th scope="col">Data1</th>
<th scope="col">Value</th>
</tr>
<tr class="shm1" style="display:none;">
<td>Some data..1..</td>
<td>A value..</td>
</tr>
<!--</tbody>//Second tbody-->
<tr class="shm2" style="display:none;">
<th scope="col">Data2</th>
<th scope="col">Value</th>
</tr>
<tr class="shm2" style="display:none;">
<td>Some data..2..</td>
<td>A value..</td>
</tr>
<!--</tbody>//Second tbody-->
<tr class="shm3" style="display:none;">
<th scope="col">Data3</th>
<th scope="col">Value</th>
</tr>
<tr class="shm3" style="display:none;">
<td>Some data..3..</td>
<td>A value..</td>
</tr>
</tbody>
</table>
<br><hr><br>
<table class="table table-striped" id="call-table2">
<thead>
<tr>
<th>Show more buttons</th>
<th></th>
</tr>
</thead>
<tr>
<td class="show-more-button2" data-id="1">Show more</td> <!--//It will open first tbody-->
<td></td>
<tr>
<tr>
<td class="show-more-button2" data-id="2">Show more</td><!--//It will open second tbody -->
<td></td>
<tr>
<tr>
<td class="show-more-button2" data-id="3">Show more</td><!--//It will open second tbody -->
<td></td>
<tr>
<tbody>
<!--<tbody class="show-more"> //First tbody-->
<tr class="th_disp" style="display:none;">
<th scope="col">Data</th>
<th scope="col">Value</th>
</tr>
<tr class="shm1_2 shows" style="display:none;">
<td>Some data..1..</td>
<td>A value..</td>
</tr>
<!--</tbody>//Second tbody-->
<tr class="shm2_2 shows" style="display:none;">
<td>Some data..2..</td>
<td>A value..</td>
</tr>
<!--</tbody>//Second tbody-->
<tr class="shm3_2 shows" style="display:none;">
<td>Some data..3..</td>
<td>A value..</td>
</tr>
</tbody>
</table>
I am using sorttable to sort my columns in table.
Now I have a table as follows:
<table class="sortable draggable">
<thead>
<tr>
<th class="col-salesOrderId">Order Number</th>
<th class="col-orderDate">Date of Order</th>
<th class="col-party">Party</th>
<th class="col-edit">Edit</th>
<th class="col-delete">Delete</th>
</tr>
</thead>
<tbody>
{#orders}
<tr>
<td class="col-salesOrderId">{.salesOrderId}</td>
<td class="col-orderDate">{#formatDate date=orderDate format="DD-MM-YYYY" /}</td>
<td class="col-party">{.party.partyName}</td>
<td class="col-edit">
<button class="btn btn-info btn-edit">
</button>
</td>
<td class="col-delete">
<button class="btn btn-danger btn-delete">
</button>
</td>
</tr>
<tr class="row-details">
<td>{.salesOrderId}</td>
<td colspan="4">
<table class="sortable draggable">
<thead>
<tr>
<th class="col-itemName">Item Name</th>
<th class="col-quantity">Quantity</th>
<th class="col-rate">Rate</th>
<th class="col-amount">Amount</th>
</tr>
</thead>
<tbody>
{#items}
<tr>
<td>{.item.itemName}</td>
<td>{.quantity}</td>
<td>{.rate}</td>
<td>{#math key="{.quantity}" method="multiply" operand="{.rate}"/}</td>
</tr>
{/items}
</tbody>
</table>
</td>
</tr>
{/orders}
</tbody>
</table>
Have you noted in the above mentioned table I have row details for each row?
Now when I click on a column header to sort it, I get the row details first and then I get all the main rows.
Here is how my table looks before sorting:
Here is how my table looks after sorting:
Is there any solution to this problem still using sorttable?
Update:
Here is sample jsFiddle
Row details are now sorted correctly as shown in the above jsFiddle. But now the problem is :
When you click on City column everything looks fine. Now if we again click on City Column, the row details are displayed before the actual rows which is wrong.
Please look at the images below for more information on problem:
After Clicking on City Column: (Which looks perfect)
After Clicking on City Column Again: (Expected for a developer but unexpected for a user)
I'am guessing but maybe the problem is the empty td beside the row details. I added first name as value and set css style display:none. Now the row details will be sorted also correctly.
Updated answer:
try to just nest the table inside the td like the below example.
Try this:
<table class="sortable">
<thead>
<tr>
<th>First Name</th>
<th>LastName</th>
</tr>
</thead>
<tbody>
<tr>
<td>Vishal</td>
<td> Sherathiya
<table>
<thead>
<tr>
<th>Degree</th>
<th>Percentage</th>
</tr>
</thead>
<tbody>
<tr>
<td>B.E.</td>
<td>67</td>
</tr>
</tbody>
</table>
<td>
</tr>
<tr>
<td>Nikunj</td>
<td>Ramani
<table>
<thead>
<tr>
<th>Degree</th>
<th>Percentage</th>
</tr>
</thead>
<tbody>
<tr>
<td>B.E.</td>
<td>80</td>
</tr>
<tr>
<td>M.E.</td>
<td>54</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>Raj</td>
<td>Gosai</td>
</tr>
</tbody>
</table>
I am trying to select a class which is from the same table (and row).
If the user clicks on "Remove", I need to grab the text from "form_delete_id".
Unfortunately I get an empty string back. I tried "closest()" and "parent()" without luck.
This is my code:
<table class="responsive-table bordered striped">
<thead>
<tr>
<th>id</th>
<th>page</th>
<th>parameter</th>
<th>method</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td class="form_delete_id">2</td>
<td class="form_delete_page">dqfsq</td>
<td class="form_delete_parameter">qsdfqs</td>
<td class="form_delete_method">post</td>
<td class="form_delete_trigger"><a class="waves-effect waves-light btn red"><i class="material-icons left">delete</i>Remove</a></td>
</tr>
</tbody>
</table>
And the Javascript below it:
<script>
$(".form_delete_trigger").click(function() {
alert($(this).closest(".form_delete_id").text());
});
</script>
My code can also be found on JSFIDDLE
.form_delete_id is sibling element of clicked .form_delete_id .You need to use .siblings() instead of .closest():
$(function(){
$(".form_delete_trigger").click(function() {
alert($(this).siblings(".form_delete_id").text());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="responsive-table bordered striped">
<thead>
<tr>
<th>id</th>
<th>page</th>
<th>parameter</th>
<th>method</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td class="form_delete_id">2</td>
<td class="form_delete_page">dqfsq</td>
<td class="form_delete_parameter">qsdfqs</td>
<td class="form_delete_method">post</td>
<td class="form_delete_trigger"><a class="waves-effect waves-light btn red"><i class="material-icons left">delete</i>Remove</a></td>
</tr>
</tbody>
</table>
Try getting the parent and searching it for the delete id:
<script>
$(".form_delete_trigger").click(function() {
alert($(this).parent().find(".form_delete_id").text());
});
</script>
or using sibiling
<script>
$(".form_delete_trigger").click(function() {
alert($(this).siblings(".form_delete_id").text());
});
</script>
https://jsfiddle.net/t8okf8kc/