I'm working on a Spring MVC project and what I need now is to generate a table with a number of rows that is specified by the user from an input and doing that without refreshing the page.
Here is my HTML file
..............
<input type="number" class="form-control" id="numberRow1" placeholder="number">
<button type="button" id="execute1">Execute</button>
<div th:text="${myvar}" class="test"></div>
<div id="table1" class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">Column Name</th>
<th scope="col">Type</th>
<th scope="col">Index</th>
<th scope="col">AI</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" class="form-control"></td>
<td><select id="inputState" class="form-control">
<option selected>Choose...</option>
<option>INT</option>
<option>VARCHAR</option>
<option>DATE</option>
</select></td>
<td><input type="checkbox"></td>
<td><input type="checkbox"></td>
</tr>
</tbody>
</table>
</div>
.....................
And The script I'm trying to working with
<script th:inline="javascript">
/*<![CDATA[*/
$(document).ready(function() {
$("#execute1").click(function() {
var getVal = $("#numberColumn1").val();
$(".test").html(getVal);
var myvar = /*[[${myvar}]]*/ getVal;;
});
})
/*]]>*/
</script>
At this point I'm just trying to get the value of "myvar" and show it in this section <div th:text="${myvar}" class="test"></div>
But nothing works for me so far ..
Any help please because I really need it.
TY.
Related
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.
Hello everyone I was wondering how i could retrieve all rows of my table. I would like to have an alert message popping up showing the rows and all the data within it.
here is my table code
<table id="adminTable" class="table table-bordered table-responsive-sm table-hover">
<input class="form-control" id="myInput" type="text" placeholder="Search..">
<br>
<thead>
<tr>
<th>Emailaddress</th>
<th>Name</th>
<th>Admin</th>
<th>BHV'er</th>
</tr>
</thead>
<tbody id="myTable">
<tr class="table">
<td class="table">email</td>
<td class="table">name</td>
<td class="table">
<form>
<select id="isAdmin">
<option selected>false</option>
<option value="false">false</option>
<option value="true">true</option>
</select>
</form>
</td>
<td class="table">bhv</td>
</tr>
</tbody>
</table>
<button type="button" onclick="onSubmit()" class="btn btnprimary">Submit</button>
This is what I have gotten so far
function onSubmit() {
var table = document.getElementById('adminTable');
var rows = table.getElementsByTagName("tr");
for(i = 0; i < rows.length; i++)
{
alert( i + " row : " + rows[i].innerHTML);
}
}
This is the output in the alert box which for some reason is an entire piece of code
Maybe the following is of some help to you:
onSubmit=()=>alert([...document.querySelectorAll("#adminTable tbody tr")]
.map(tr=>[...tr.children].map(td=>{
let s=td.querySelector('select');
return s && s.value || td.textContent })
.join(',')).join('\n'))
<input class="form-control" id="myInput" type="text" placeholder="Search.."><br>
<table id="adminTable" class="table table-bordered table-responsive-sm table-hover">
<thead>
<tr>
<th>Emailaddress</th>
<th>Name</th>
<th>Admin</th>
<th>BHV'er</th>
</tr>
</thead>
<tbody id="myTable">
<tr class="table">
<td class="table">email</td>
<td class="table">name</td>
<td class="table">
<form>
<select id="isAdmin">
<option selected>false</option>
<option value="false">false</option>
<option value="true">true</option>
</select>
</form>
</td>
<td class="table">bhv</td>
</tr>
</tbody>
</table>
<button type="button" onclick="onSubmit()" class="btn btnprimary">Submit</button>
I moved your input element to a position where it will result in valid HTML.
Feel free to change the column (,) in line separators (\n) in the line .join(',')).join('\n')) to something you like.
I have a problem , when i do click on one or select all , all data coming. But i need when I click on single checkbox then only that particular data should come.
html file
<div class="row">
<div class="col-md-12">
<h1>Student Information</h1>
<table id="example" class="table">
<tr>
<th>Name</th>
<th>Mobile</th>
<th>Siblling</th>
<th>select all <input type="checkbox" ng-click="vm.selectAll()"/></th>
</tr>
<tr ng-repeat="data in vm.data">
<td>{{data.name}}</td>
<td>{{data.mobileNumber}}</td>
<td>{{data.isMigrated}}</td>
<td><input type="checkbox" ng-model="data.selected" class="duplicateRow" /></td>
</tr>
<tr>
<tr>
<button class="button pull-right" ng-click="vm.process()">Process</button>
</tr>
</table>
<table class="table">
<tr>
<td colspan="4">
<pagination ng-if="renderpagination" page-number='{{vm.pageNumber}}' page-count="{{vm.pageCount}}" total-records="{{vm.totalRecords}}" api-url="duplicate-student"></pagination>
</td>
</tr>
</table>
</div>
</div>
Java script file
vm.selectAll =function(){
angular.forEach(vm.data, function(data){
data.selected=true;
});
}
vm.selectedUsers = [];
vm.process = function() {
vm.selectedUsers.splice(0, vm.selectedUsers.length);
for (var i in vm.data) {
vm.selectedUsers.push(vm.data[i]);
}
}
This link may what your looking for : Angular Checkboxes “Select All” functionality with only one box selected initially
.
i have a basic html table with some data displayed, what i want is when i click on specific row the value of incident Id cell is passed to the hidden variable value i have developed this part, what i don't know how can i put hidden variable value in the session for other functionality purposes.
my table
<div id="tab1" class="tab active">
<table class="table table-striped">
<thead style="background-color: #F0F1F2">
<tr>
<th>Incident Id</th>
<th>Party Name</th>
<th>Max Rank</th>
<th>Incident Description</th>
</tr>
</thead>
<tbody>
<c:forEach items="${incidents}" var="incident">
<tr id="tr" onclick="changeIncidentValue(${incident.incidentId})">
<td>${incident.incidentId}</td>
<td>xxx</td>
<td>${incident.partyNameMaxRank}</td>
<td>${incident.incidentDesc}</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
<input type="hidden" id="incidentId" name="incidentId" value=""/>
js function
<script>
function changeIncidentValue(incidentId){
$('#incidentId').val(incidentId);
var x = $('#incidentId').val();
console.log(x);
}
</script>
I have a table as follows. How to reset the table using jQuery to its original state during on change(with all th,tds). Not to reload the entire page because I have another tables also. I tried with dataTables but it adds search filters and paginations unnecessarily
<table class="table table-bordered table-hover table-sm" id="t01">
<thead style="text-align:center">
<tr>
<th class="col-md-6" style="text-align:center">Dxx</th>
<th class="col-md-2" style="text-align:center">Rxx/Unit</th>
<th class="col-md-2" style="text-align:center">Txxx</th>
<th class="col-md-2" style="text-align:center">Pxxx</th>
</tr>
</thead>
<tbody>
<tr>
<th>Full</th>
<td id="fp" style="text-align:right">0</td>
<td id="fr" style="text-align:center">0</td>
<td>
<div style="float:left">$</div>
<div style="float:right" id="fpT">0.00</div>
</td>
</tr>
<tr>
<th >Fractional</th>
<td id="fr" style="text-align:right">0</td>
<td id="frN" style="text-align:center">0</td>
<td>
<div style="float:left">$</div>
<div id="frT" style="float:right">0.00</div>
</td>
</tr>
<tr>
<th >Premium</th>
<td id="pRate" style="text-align:right">0</td>
<td id="pNos" style="text-align:center">0%</td>
<td>
<div style="float:left">$</div>
<div id="pTotal" style="float:right">0.00</div>
</td>
</tr>
<tr class="active">
<th>Premium Discount</th>
<td style="text-align:right" id="premium-discount-rate">0</td>
<td style="text-align:center">
<select id="premium-disc-list">
<option value=""></option>
</select>
</td>
<td>
<div style="float:left">$</div>
<div style="float:right" id="premium-discount-total">0.00</div>
</td>
</tr>
</tbody>
</table>
jQuery
var table = $('#t01').dataTable();
//table.clear().draw();
//table.fnClearTable();
//table.fnDraw();
//table.fnDestroy();
//table.fnDraw();
I have 2 options in my mind:
1) You can mark all the elements that could be reset with some 'resetable' class and add data-original-val property, and once you decide to reset it do something like that:
$('.resetable','#t01').each(function(){
var originalVal = $(this).data('original-val');
$(this).html(originalVal);
})
2) Render another copy of the table inside type="text/html" script like this:
<script type="text/html" id="t01-original">
<table class="table table-bordered table-hover table-sm" id="t01">
<thead style="text-align:center">
<tr>
<th class="col-md-6" style="text-align:center">Dxx</th>
<th class="col-md-2" style="text-align:center">Rxx/Unit</th>
<th class="col-md-2" style="text-align:center">Txxx</th>
<th class="col-md-2" style="text-align:center">Pxxx</th>
</tr>
</thead>
...
</table>
</script>
this way all the content of the script tag won't be parsed and you won't have duplicate id issues. On the reset simply replace the content of the table with the one from the script:
//t01-container is the id of div that wraps the table:
$( '#t01-container').html($('#t01-original').html());