We Keep Coding

Submit all data from DataTable table with checkboxes using jQuery

So I have this Data Table [Fig. 1] inside a form which submits the table's data, the problem is it doesn't submit all the checked rows in all pages, it only submits what's shown. Then I found a way to fix that "code on[Fig. 2]" but now yes it submits all data from other pages but how can I like connect and submit layer_box's value with data-checkid's value.
The scenario is all the checked rows that'll be submitted will run a query like this
UPDATE table SET sub_group = **layer_box** WHERE id = **data-checkid's value**
[Fig.1]
<form method="POST" id="manage-layers" name="manage-layers">
<button class="btn btn-warning" type="submit" id="save_layers">
<i class="fa fa-save"></i>
<strong>Save</strong>
</button>
<table id="subgrp_layertbl" class="table table-responsive text-dark">
<thead class="thead-dark">
<tr>
<th scope="col">ID</th>
<th scope="col">Layer Name</th>
<th scope="col">Associate Layer</th>
</tr>
</thead>
<tbody>
<tr>
<td width="1%">1</td>
<td width="50%">Value 1</td>
<td width="30%">
<div class="text-center">
<input class="form-check-input layer_box" type="checkbox" name="layer_box" value="12,27" data-checkid="40" >
</div>
</td>
</tr>
<tr>
<td width="1%">3</td>
<td width="50%">Value 3</td>
<td width="30%">
<div class="text-center">
<input class="form-check-input layer_box" type="checkbox" name="layer_box" value="14" data-checkid="3" >
</div>
</td>
</tr>
<tr>
<td width="1%">8</td>
<td width="50%">Value 8</td>
<td width="30%">
<div class="text-center">
<input class="form-check-input layer_box" type="checkbox" name="layer_box" value="16" data-checkid="8" >
</div>
</td>
</tr>
</tbody>
</table>
</form>
[Fig.2]
<script type="text/javascript">
$(document).ready(function (){
var table = $('#subgrp_layertbl').DataTable();
$('#manage-layers').on('submit', function(e){
e.preventDefault();
var data = table.$('input,select,textarea').serializeArray();
console.log(data);
});
});
</script>

I really think this should answer your problem
https://stackoverflow.com/a/59550389/10888948 and just add other functions if you ever have more.

Sorting A Table With Tabs & Javascript

I'm hoping someone can help me out. I have created a table and have multiple Tabs. Each Tab has different data inside the table. Each table row has a column with a number of votes and I want to sort the rows automatically with the columns that have more votes at the top.
This is my HTML code:
<div class="row" style="text-align: center;">
<div class="container" style="margin-top: 8%;">
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="pills-comedy-tab" data-bs-toggle="pill" data-bs-target="#pills-comedy" type="button" role="tab" aria-controls="pills-comedy" aria-selected="false">COMEDY MOVIES</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pills-horror-tab" data-bs-toggle="pill" data-bs-target="#pills-horror" type="button" role="tab" aria-controls="pills-horror" aria-selected="false">HORROR MOVIES</button>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<!--START OF COMEDY MOVIES TAB-->
<div class="tab-pane fade show active" id="pills-comedy" role="tabpanel" aria-labelledby="pills-comedy-tab">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Director</th>
<th scope="col" class="d-none d-md-table-cell">Starring</th>
<th scope="col">Votes</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Hot Rod</td>
<td>Akiva Schafer</td>
<td class="d-none d-md-table-cell">Andy Samberg</td>
<td><span class="vote">38</span></td>
<td> <button type="button" class="btn btn-primary">UPVOTE</button></td>
</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Game Night</td>
<td>Jonathon Goldstein</td>
<td class="d-none d-md-table-cell">Jason Bateman</td>
<td><span class="vote">99</span></td>
<td> <button type="button" class="btn btn-primary">UPVOTE</button></td>
</tr>
<tr>
<th scope="row">3</th>
<td>The First Wives Club</td>
<td>Hugh Wilson</td>
<td class="d-none d-md-table-cell">Keenan Wayans</td>
<td><span class="vote">21</span></td>
<td> <button type="button" class="btn btn-primary">UPVOTE</button></td>
</tr>
<tr>
<th scope="row">4</th>
<td>Scary Movie</td>
<td>Keenan Wayans</td>
<td class="d-none d-md-table-cell">Marlon Wayons</td>
<td><span class="vote">1</span></td>
<td> <button type="button" class="btn btn-primary">UPVOTE</button></td>
</tr>
<tr>
<th scope="row">5</th>
<td>Blockers</td>
<td>Kay Cannon</td>
<td class="d-none d-md-table-cell">Leslie Mann</td>
<td><span class="vote">11</span></td>
<td> <button type="button" class="btn btn-primary">UPVOTE</button></td>
</tr>
<tr>
<th scope="row">6</th>
<td>The Bank Dick</td>
<td>Eddie Cline</td>
<td class="d-none d-md-table-cell">W.C Fields</td>
<td><span class="vote">87</span></td>
<td> <button type="button" class="btn btn-primary">UPVOTE</button></td>
</tr>
<tr>
<th scope="row">7</th>
<td>Mrs Doubtfire</td>
<td>Chris Columbus</td>
<td class="d-none d-md-table-cell">Robin Williams</td>
<td><span class="vote">38</span></td>
<td> <button type="button" class="btn btn-primary">UPVOTE</button></td>
</tr>
</tbody>
</table>
</div>
<!--END OF COMEDY MOVIES TAB-->
<!--START OF HORROR MOVIES TAB-->
<div class="tab-pane fade" id="pills-horror" role="tabpanel" aria-labelledby="pills-horror-tab">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Director</th>
<th scope="col" class="d-none d-md-table-cell">Starring</th>
<th scope="col">Votes</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Acacia</td>
<td>Park Ki-Young</td>
<td class="d-none d-md-table-cell">$50,000,000</td>
<td><span class="vote">38</span></td>
<td> <button type="button" class="btn btn-primary">UPVOTE</button></td>
</tr>
<tr>
<th scope="row">2</th>
<td>Dead End</td>
<td>Fabrise Canepa</td>
<td class="d-none d-md-table-cell">Ray Wise</td>
<td><span class="vote">38</span></td>
<td> <button type="button" class="btn btn-primary">UPVOTE</button></td>
</tr>
<tr>
<th scope="row">3</th>
<td>Malefic</td>
<td>Steve Sessions</td>
<td class="d-none d-md-table-cell">Cynder moon</td>
<td><span class="vote">99</span></td>
<td> <button type="button" class="btn btn-primary">UPVOTE</button></td>
</tr>
<tr>
<th scope="row">4</th>
<td>Love Object</td>
<td>Robert Parigi</td>
<td class="d-none d-md-table-cell">Udo Kier</td>
<td><span class="vote">125</span></td>
<td> <button type="button" class="btn btn-primary">UPVOTE</button></td>
</tr>
<tr>
<th scope="row">5</th>
<td>Jeepers Creepers II</td>
<td>Victor Salva</td>
<td class="d-none d-md-table-cell">Jonathan Breck</td>
<td><span class="vote">3368</span></td>
<td> <button type="button" class="btn btn-primary">UPVOTE</button></td>
</tr>
<tr>
<th scope="row">6</th>
<td>Into The Mirror</td>
<td>Kim Sung-Ho</td>
<td class="d-none d-md-table-cell">Yoo Ji-Tae</td>
<td><span class="vote">380</span></td>
<td> <button type="button" class="btn btn-primary">UPVOTE</button></td>
</tr>
<tr>
<th scope="row">7</th>
<td>Threshold</td>
<td>Chuck Bowman</td>
<td class="d-none d-md-table-cell">Nicholas lea</td>
<td><span class="vote">32</span></td>
<td> <button type="button" class="btn btn-primary">UPVOTE</button></td>
</tr>
</tbody>
</table>
</div>
<!--END OF HORROR MOVIES TAB-->
</div>
</div>
</div>
</div>
This is the Javacript code I am using to sort by the vote column
$(document).ready(function(e) {
var dataRows = [];
//Create an array of all rows with its value (this assumes that the amount is always a number. You should add error checking!! Also assumes that all rows are data rows, and that there are no header rows. Adjust selector appropriately.
$('tr').each(function(i, j) {
dataRows.push({ 'vote': parseFloat($(this).find('.vote').text()), 'row': $(this) });
})
//Sort the data smallest to largest
dataRows.sort(function(a, b) {
return b.vote - a.vote;
});
//Remove existing table rows. This assumes that everything should be deleted, adjust selector if needed :).
$('table').empty();
//Add rows back to table in the correct order.
dataRows.forEach(function(ele) {
$('table').append(ele.row);
})
});
So What I have noticed is if I run this code it does sort by column, but it also removes the table from the HORROR TAB and places inside the COMEDY TAB and makes duplicates. If I remove the tabs then everything is fine. So something somewhere is messing with the sorting by having tabs and i just can't figure out whats going on.
I could really use some help, i've been trying to figure this out for days.
Thanks guys

Having separate arrays for each tab(comedy and horror) worked for me, so you just create a second array and duplicate the javascript functions, using more specific JS selectors.
var dataRows1 = []
var dataRows2 = []
function sortRows() {
//Create an array of all rows with its value (this assumes that the amount is always a number. You should add error checking!! Also assumes that all rows are data rows, and that there are no header rows. Adjust selector appropriately.
$('#pills-comedy tr').each(function () {
dataRows1.push({
'vote': parseFloat($(this).find('.vote').text()),
'row': $(this)
});
})
$('#pills-horror tr').each(function () {
dataRows2.push({
'vote': parseFloat($(this).find('.vote').text()),
'row': $(this)
});
})
//Sort the data smallest to largest
dataRows1.sort(function (a, b) {
return b.vote - a.vote;
});
dataRows2.sort(function (a, b) {
return b.vote - a.vote;
});
//Remove existing table rows. This assumes that everything should be deleted, adjust selector if needed :).
$('#pills-comedy table').empty();
$('#pills-horror table').empty();
//Add rows back to table in the correct order.
dataRows1.forEach(function (ele) {
$('#pills-comedy table').append(ele.row);
})
dataRows2.forEach(function (ele) {
$('#pills-horror table').append(ele.row);
})
};
This works for what you intended, but at least here it's still breaking some of the Bootstrap layout and I'm not sure why now, need to dig into this.

2 Tables on one page - buttons on Rows to run different script

I have a page with 2 tables and each row has a 'Select' button which needs to run a script when clicked. I've got this working with the first table but can't work out how to get it working with both tables.
Here's the HTML for the tables:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<h2>Select Main</h2>
<div>
<br />
<table class="table table-condensed table-striped table-bordered">
<thead>
<th scope="col">Code</th>
<th scope="col">Description</th>
<th class="text-center" scope="col">Select</th>
</thead>
<tbody>
<tr class="" id="SK5543333">
<td>BJ2345</td>
<td>Laptop 13 inch display</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
<tr class="" id="SK3241235213">
<td>AZ77656</td>
<td>Laptop 15 inch display</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
</tbody>
</table>
</div>
<h2>Select Accessories</h2>
<div>
<br />
<table class="table table-condensed table-striped table-bordered">
<thead>
<th scope="col">Code</th>
<th scope="col">Description</th>
<th class="text-center" scope="col">Select</th>
</thead>
<tbody>
<tr class="" id="SK3412541">
<td>MM42412341</td>
<td>Mouse</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
<tr class="" id="SK95390485">
<td>KB42341243</td>
<td>Keyboard</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
<tr class="" id="SK42353">
<td>USB421341234</td>
<td>USB Adapter</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
<tr class="" id="SK543647585">
<td>PWR363456534</td>
<td>POWER ADAPTER</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
</tbody>
</table>
</div>
I need to run a different script when users select from the top/Main table and another script when users select from the bottom/Accessories table. Here's my script that runs when the Select button from the first table is clicked:
$(document).ready(function() {
$('button.btn-success:not([type="submit"])').click(function() {
// Remove the classes from all of the TR elements
$(this).parents('table').find('tr').removeClass('success warning danger');
var productID = $(this).closest('tr').attr('id');
console.log(productID);
$this = $(this);
// add the success class to the row and remove the danger class if it was present
$this.closest('tr').addClass("success");
$this.closest('tr').removeClass("danger");
// update the hidden input with the selected productID
$('#productID').val(productID);
});
});
Not sure how to have another version of this that only runs when the Select button from the 2nd table is clicked?

Was interrupted writing the answer but you could try something like this:
const selectHelper =
($me,classToAdd,inputSelector) => {
$me.parents("table")
.eq(0)
.find("tr")
.removeClass("success warning danger");
const id =
$me.parents("tr")
.eq(0)
.addClass(classToAdd)
.attr("id")
;
$(inputSelector).val(id);
}
;
const clickActions = {
one:(e,$me)=>
selectHelper(
$me
,"warning"
,"#inputidOne"
)
,two:(e,$me)=>
selectHelper(
$me
,"success"
,"#inputidTwo"
)
};
$(document.body)
.on(
"click"
,`[data-action-click]`
,e=>{
const action = e.target.getAttribute("data-action-click");
if(typeof clickActions[action] === "function"){
clickActions[action](e,$(e.target))
}
debugger;
}
)
The button needs a data-action-click attribute that has the name of the function you want to execute when clicked:
<button
type="button"
data-action-click="two"
class="btn btn-success btn-sm"
>
Select
</button>

I believe this is what you're looking for:
$(document).ready(function() {
$("table:first").find('button[type!="submit"]').click(function() {
$("table:first").find("tr").removeClass("success warning danger");
$(this).parents("tr").addClass("success");
$("#productID").val($(this).parents("tr").attr("id"));
});
$("table").eq(1).find('button[type!="submit"]').click(function() {
$("table").eq(1).find("tr").removeClass("success warning danger");
//Do whatever color you want
$(this).parents("tr").addClass("warning");
//Wasn't provided this snippet so I just made up accessoryID
$("#accessoryID").val($(this).parents("tr").attr("id"));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<h2>Select Main</h2>
<div>
<br />
<table class="table table-condensed table-striped table-bordered">
<thead>
<tr>
<th>Code</th>
<th>Description</th>
<th class="text-center">Select</th>
</tr>
</thead>
<tbody>
<tr id="SK5543333">
<td>BJ2345</td>
<td>Laptop 13 inch display</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
<tr id="SK3241235213">
<td>AZ77656</td>
<td>Laptop 15 inch display</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
</tbody>
</table>
</div>
<h2>Select Accessories</h2>
<div>
<br />
<table class="table table-condensed table-striped table-bordered">
<thead>
<tr>
<th>Code</th>
<th>Description</th>
<th class="text-center">Select</th>
</tr>
</thead>
<tbody>
<tr id="SK3412541">
<td>MM42412341</td>
<td>Mouse</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
<tr id="SK95390485">
<td>KB42341243</td>
<td>Keyboard</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
<tr id="SK42353">
<td>USB421341234</td>
<td>USB Adapter</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
<tr id="SK543647585">
<td>PWR363456534</td>
<td>POWER ADAPTER</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm">Select</button></td>
</tr>
</tbody>
</table>
</div>
.eq This returns a jQuery object from a list of jQuery objects by index, whereas indexing with brackets will return HTML content.
P.S. You don't really need class="" and scope="col" in the table, the HTML I provided doesn't have those. The only real point of the class attribute is to assign multiple CSS attributes easily, unless you're using classes as selectors. Same with scope, I've made many tables and never used scope.
Also, when you do a thead, you need to add a tr before you add the headers. I fixed that in the code above. (Yes, this does mean that tables support multiple header rows).

How to use expressions inside ng-click and ng-show

I am trying to make a expandable rows to the table. I do not get any error messages but it is not working as expected. I suspect there is something wrong how I am using expressions with ng-show here?
plunker
my code:
<table class='table'>
<thead>
<tr>
<th>name</th>
<th>itemOne</th>
<th>itemTwo</th>
</tr>
</thead>
<tbody ng-repeat="data in tableData| orderBy:'-clintonValuemain'">
<tr>
<td>
<button ng-show="data.expand" ng-click='data.expand = true'>+</button>
<button ng-show="!data.expand" ng-click='data.expand = false'>-</button>
<input type="checkbox" class='checkbox'>
<a rel="noopener" target="_blank" href={{data.url}}>
{{data.name}}
</a>
</td>
<td>{{data.valueMain}}</td>
<td>{{data.tValue}}</td>
<tr>
<tr ng-show="data.expand" ng-repeat="subs in data.subvalues| orderBy:'-clintonValuesub'" >
<td>
{{subs.name}}
</td>
<td>
{{subs.valueSub}}
</td>
<td>
{{subs.tValue}}
</td>
</tr>
</tr>
</tr>
</tbody>
</table>

Try this out
<button ng-show="data.expand" ng-click='data.expand = false'>-</button>
<button ng-show="!data.expand" ng-click='data.expand = true'>+</button>
updated plunker
https://plnkr.co/edit/sJDFAp1KDvhYh8K3q7z2?p=preview

How to check array value is null in ng-repeat using Angular.js

I need one help.I need to check if the array has no value and display one message there using Angular.js.I am explaining my code below.
<table class="table table-bordered table-striped table-hover" id="dataTable">
<thead>
<tr>
<th>Sl. No</th>
<th>Date</th>
<th>
Info(Academic Year,Section,Subject,Semester)
</th>
<th>
Unit Name
</th>
<th>
Lecture Plan
</th>
<th>Action</th>
</tr>
</thead>
<div ng-if="viewIncompletePlanData.length>0">
<tbody id="detailsstockid">
<tr ng-repeat="p in viewIncompletePlanData">
<td>{{$index+1}}</td>
<td>{{p.date}}</td>
<td>{{p.session}},{{p.section_name}},{{p.subject_name}},{{p.semester}}</td>
<td>{{p.unit_name}}</td>
<td>{{p.plan}}</td>
<td>
<a >
<input type='button' class='btn btn-xs btn-success' value='Update' ng-click="">
</a>
</td>
</tr>
</tbody>
</div>
<div ng-if="viewIncompletePlanData.length==0">
<tr>
<center><p><b>No Record Matched</b></p></center>
</tr>
</div>
</table>
In the above code i need when viewIncompletePlanData has no value it will display message there No record found Otherwise display the array result.Please help me.

You can check the length of the array. If the length > 0 then show the records in table else if array is undefined or length === 0 then show No Record Found in the first row of table.
<table>
<tbody id="detailsstockid">
<tr ng-repeat="p in viewIncompletePlanData" ng-if="viewIncompletePlanData.length>0">
<td>{{$index+1}}</td>
<td>{{p.date}}</td>
<td>{{p.session}},{{p.section_name}},{{p.subject_name}},{{p.semester}}</td>
<td>{{p.unit_name}}</td>
<td>{{p.plan}}</td>
<td>
<a>
<input type='button' class='btn btn-xs btn-success' value='Update' ng-click="">
</a>
</td>
</tr>
<tr ng-if="viewIncompletePlanData== null || viewIncompletePlanData.length === 0">
<td>
No Record Found
</td>
</tr>
</tbody>
</table>

You can do it by ng-if / ng-show / ng-hide
Try like this
<table class="table table-bordered table-striped table-hover" id="dataTable">
<thead>
<tr>
<th>Sl. No</th>
<th>Date</th>
<th>Info(Academic Year,Section,Subject,Semester)</th>
<th>Unit Name</th>
<th>Lecture Plan</th>
<th>Action</th>
</tr>
</thead>
<tbody id="detailsstockid">
<tr ng-repeat="p in viewIncompletePlanData" ng-if="viewIncompletePlanData.length>0">
<td>{{$index+1}}</td>
<td>{{p.date}}</td>
<td>{{p.session}},{{p.section_name}},{{p.subject_name}},{{p.semester}}</td>
<td>{{p.unit_name}}</td>
<td>{{p.plan}}</td>
<td>
<a>
<input type='button' class='btn btn-xs btn-success' value='Update' ng-click="">
</a>
</td>
</tr>
<tr ng-if="viewIncompletePlanData.length==0">
<td colspan="6">
<center>
<p><b>No Record Matched</b>
</p>
</center>
</td>
</tr>
</tbody>
</table>