Brief:
In Mobile Screen would like to Click on Column in Table 1 will Hide it and Slide to display a Column in Table 2 and I can Click on back button to return back to Column in Table 1 using Javascript/jQuery or it can been done with the help of CSS too. How i can do that and provide an example will be much of help too ?
Screenshot of current page:
https://ibb.co/51SRgKw
Current page structure:
<div class="panel-body blocking">
<div class="row">
<div class="col-lg-4 manage-at__scroll" style="padding:0px;">
<table class="table table-striped table-bordered table-hover">
<tbody>
<tr>
<th class="text-left">Class Names</th>
</tr>
<tr class="odd gradeX">
<td class="text-left">
<a style="font-weight: bold;color:#333" href="#">Actual Class Names List</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-lg-4 manage-at__scroll" style="padding:0px;">
<table class="table table-striped table-bordered table-hover">
<tbody>
<tr>
<th class="text-left">Student Names</th>
</tr>
<tr class="odd gradeX">
<td class="text-left">
<a style="font-weight: bold;color:#333" href="#">Actual Student Names List</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-lg-4 manage-at__scroll" style="padding:0px;">
<table class="table table-striped table-bordered table-hover" id="student_attendance">
<tbody>
<tr>
<th class="text-center">Absent Dates</th>
</tr>
<tr class="gradeX odd">
<td align="center">
<p class="text-left">
<strong>Actual Absent Dates List</strong>
</p>
<p class="text-left"></p>
</td>
</tr>
<tr>
<td>
<p class="text-left">
<input type="text">
</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
my idea with jquery i will use .hide() and .show() to switch your div, first load set style is display:none.
or use jquery mobile.
$(function(){
let switch_page = function(p_id){
$('.manage-at__scroll').hide(200)
$(`#${p_id}`).show(200);
}
$('a.list-class').on('click', function(e){
e.preventDefault();
switch_page('tab2');
});
$('a.list-st').on('click', function(e){
e.preventDefault();
switch_page('tab3');
});
$('#b1').on('click', function(e){
e.preventDefault();
switch_page('tab1');
});
$('#b2').on('click', function(e){
e.preventDefault();
switch_page('tab2');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<body class="container">
<div class="panel-body blocking">
<div class="row">
<div class="col-lg-4 manage-at__scroll" style="padding:0px;" id="tab1">
<table class="table table-striped table-bordered table-hover">
<tbody>
<tr>
<th class="text-left">Class Names</th>
</tr>
<tr class="odd gradeX">
<td class="text-left">
<a class="list-class" style="font-weight: bold;color:#333" href="#">Actual Class Names List</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-lg-4 manage-at__scroll" style="padding:0px;display:none;" id="tab2">
<p>
<a class="btn btn-default" href="#" id="b1"> back </a>
</p>
<table class="table table-striped table-bordered table-hover">
<tbody>
<tr>
<th class="text-left">Student Names</th>
</tr>
<tr class="odd gradeX">
<td class="text-left">
<a class="list-st" style="font-weight: bold;color:#333" href="#">Actual Student Names List</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="col-lg-4 manage-at__scroll" style="padding:0px;display:none;" id="tab3">
<p>
<a class="btn btn-default" href="#" id="b2"> back </a>
</p>
<table class="table table-striped table-bordered table-hover" id="student_attendance">
<tbody>
<tr>
<th class="text-center">Absent Dates</th>
</tr>
<tr class="gradeX odd">
<td align="center">
<p class="text-left">
<strong>Actual Absent Dates List</strong>
</p>
<p class="text-left"></p>
</td>
</tr>
<tr>
<td>
<p class="text-left">
<input type="text">
</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
Related
<div class="row-fluid padTop5">
<div class="col-12">
<div class="row" *ngIf="showFiles">
<div class="col-12 colBorder">
<table datatable class="table table-striped centerAlign">
<thead>
<tr>
<th class="centerAlign">Select All<input type="checkbox" [(ngModel)]="fileSelectAll" name="fileSelectAll" class="d-block" (change)="selectAll($event,fileSelectAll)"></th>
<th>TestCase Name</th>
<!-- <th>Provision Name</th> -->
</tr>
</thead>
<tbody>
<tr *ngFor="let file of fileList;let i =index">
<td>
<input type="checkbox" [(ngModel)]="file.selected" [checked]="isSelected" (change)='checkClicked($event,file)' name="cb">
</td>
<td>{{file.name}}</td>
<!-- <td>PE</td> -->
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
I am using angular datatables ..the table is forming when the user selects the file from local.works fine for the first time..but when the user again selects the file previous records are not gone..how to. Refresh the table
There is a table which is populated by ng_repeat, I am going to show a loading/progress/spinner on it while data is loading
<div class="panel-body panel-success">
<div class="col-lg-12">
<table class="table table-bordered" >
<tr>
<th>Name</th>
<th>Family</th>
<th>Age</th>
</tr>
<tr ng-repeat="r in results track by r.ID">
<td>
{{r.Name}}
</td>
<td>
{{r.Family}}
</td>
<td>
{{r.Gender}}
</td>
</tr>
<tfoot>
<tr>
<td align="center" colspan="8">
<div class="pull-center">
<ul uib-pagination total-items="totalCount" ng-change="pageChanged()"
items-per-page="pageSizeSelected"
direction-links="true" ng-model="pageIndex"
max-size="maxSize"
class="pagination"
boundary-links="true"
rotate="false" num-pages="numPages"></ul>
</div>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
How can show loading/progress/spinner inside table dusring loading data? I want to show spinner inside table (Instead of rows, I mean keep table column name)
Show spinner while data is not loaded... once loaded, hide it !!
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="soQuestion">
<div class="panel-body panel-success" ng-controller="soController">
{{results.length}}
<div class="col-lg-12">
<table class="table table-bordered">
<tr>
<th>Name</th>
<th>Family</th>
<th>Age</th>
</tr>
<tr ng-if="results.length<1">
<td>
//insert the spinner image here
</td>
<td>
//insert the spinner image here
</td>
<td>
//insert the spinner image here
</td>
</tr>
<ng-container ng-if="results.length>0">
<tr ng-repeat="r in results track by r.ID">
<td>
{{r.Name}}
</td>
<td>
{{r.Family}}
</td>
<td>
{{r.Gender}}
</td>
</tr>
</ng-container>
<tfoot>
<tr>
<td align="center" colspan="8">
<div class="pull-center">
<ul uib-pagination total-items="totalCount" ng-change="pageChanged()" items-per-page="pageSizeSelected" direction-links="true" ng-model="pageIndex" max-size="maxSize" class="pagination" boundary-links="true" rotate="false" num-pages="numPages"></ul>
</div>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
I have this javascript / jQuery which essentially wraps every 2 <td> elements with <div class="table-half">, however I specifically state in the variable that I do not want this to take effect if the table has a #profileContent parent.
var divs = $("div:not('#profileContent') table.form tr td");
for(var i = 0; i < divs.length; i+=2) {
divs.slice(i, i+2).wrapAll("<div class='table-half'></div>");
}
However, for some reason the wrapping still takes place with html in this structure:
<div id='profileContent'>
<table width="100%" class="form">
<tr>
<td></td>
<td></td>
</tr>
</table>
</div>
Any ideas why?
The reason it's not working is because your table is nested in multiple levels of DIV, and the selector is written to match a table that's any descendant of a DIV. The parent matches the ID, so the :not excludes it, but the grandparent does not have that ID, so it's it's not excluded.
Instead of putting the :not around the DIV id, put it around the selector for the table itself.
var divs = $("table.form:not(#clientsummarycontainer table) tr td");
.color {
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="contentarea Client-Profile" id="contentarea" style="margin-left:209px;">
<div style="float:left;width:100%;">
<h1>Client Profile</h1>
<div class="tab-content client-tabs">
<li class="dropdown pull-right tabdrop hide"><a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="icon-align-justify"></i> <b class="caret"></b></a>
<ul class="dropdown-menu"></ul>
</li>
<div class="tab-pane active" id="profileContent">
<div id="clientsummarycontainer">
<div class="clearfix">
</div>
<p align="right">
<input type="button" value="Status Filter: Off" class="btn btn-xs btn-small" onclick="toggleStatusFilter()">
</p>
<div id="statusfilter">
<form>
<div class="checkall">
<label class="checkbox-inline">
<input type="checkbox" id="statusfiltercheckall" onclick="checkAllStatusFilter()" checked=""> Check All</label>
</div>
</form>
</div>
<form method="post" action="/redacted/clientssummary.php?userid=redacted&action=massaction">
<input type="hidden" name="token" value="redacted">
<table width="100%" class="form">
<tbody>
<tr>
<td colspan="2" class="fieldarea" style="text-align:center;"><strong>Products/Services</strong></td>
</tr>
<tr>
<td align="center">
<div class="tablebg">
<table class="datatable" width="100%" border="0" cellspacing="1" cellpadding="3">
<tbody>
<tr>
<th width="20">
<input type="checkbox" id="prodsall">
</th>
<th>ID</th>
<th>Product/Service</th>
<th>Amount</th>
<th>Billing Cycle</th>
<th>Signup Date</th>
<th>Next Due Date</th>
<th>Status</th>
<th width="20"></th>
</tr>
<tr>
<td>
<input type="checkbox" name="selproducts[]" value="redacted" class="checkprods">
</td>
<td>redacted</td>
<td style="padding-left:5px;padding-right:5px">redacted 7 Day Free Trial - (No Domain)</td>
<td>$0.00 USD</td>
<td>Free</td>
<td>01/06/2016</td>
<td>-</td>
<td>Active</td>
<td>
<img src="images/edit.gif" width="16" height="16" border="0" alt="Edit">
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<table width="100%" class="form">
<tbody>
<tr>
<td colspan="2" class="fieldarea" style="text-align:center;"><strong>Addons</strong></td>
</tr>
<tr>
<td align="center">
<div class="tablebg">
<table class="datatable" width="100%" border="0" cellspacing="1" cellpadding="3">
<tbody>
<tr>
<th width="20">
<input type="checkbox" id="addonsall">
</th>
<th>ID</th>
<th>Name</th>
<th>Amount</th>
<th>Billing Cycle</th>
<th>Signup Date</th>
<th>Next Due Date</th>
<th>Status</th>
<th width="20"></th>
</tr>
<tr>
<td colspan="9">No Records Found</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<table width="100%" class="form">
<tbody>
<tr>
<td colspan="2" class="fieldarea" style="text-align:center;"><strong>Domains</strong></td>
</tr>
<tr>
<td align="center">
<div class="tablebg">
<table class="datatable" width="100%" border="0" cellspacing="1" cellpadding="3">
<tbody>
<tr>
<th width="20">
<input type="checkbox" id="domainsall">
</th>
<th>ID</th>
<th>Domain</th>
<th>Registrar</th>
<th>Registration Date</th>
<th>Next Due Date</th>
<th>Expiry Date</th>
<th>Status</th>
<th width="20"></th>
</tr>
<tr>
<td colspan="9">No Records Found</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<table width="100%" class="form">
<tbody>
<tr>
<td colspan="2" class="fieldarea" style="text-align:center;"><strong>Current Quotes</strong></td>
</tr>
<tr>
<td align="center">
<div class="tablebg">
<table class="datatable" width="100%" border="0" cellspacing="1" cellpadding="3">
<tbody>
<tr>
<th>ID</th>
<th>Subject</th>
<th>Date</th>
<th>Total</th>
<th>Valid Until Date</th>
<th>Status</th>
<th width="20"></th>
</tr>
<tr>
<td colspan="7">No Records Found</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<div class="btn-container">
<div class="button-container">
<input type="button" id="massUpdateItems" value="Mass Update Items" class="button btn btn-default" onclick="$('#massupdatebox').slideToggle()">
<input type="submit" name="inv" value="Invoice Selected Items" class="button btn btn-warning">
<input type="submit" name="del" value="Delete Selected Items" class="button btn btn-danger">
</div>
</div>
</form>
</div>
<script language="javascript">
$(document).ready(function() {
$("#prodsall").click(function() {
$(".checkprods").attr("checked", this.checked);
});
$("#addonsall").click(function() {
$(".checkaddons").attr("checked", this.checked);
});
$("#domainsall").click(function() {
$(".checkdomains").attr("checked", this.checked);
});
});
</script>
</div>
</div>
</div>
<div class="clear"></div>
</div>
After a few more hours of playing around, I finally figured out something that works, although I don't know if it's really the best way of accomplishing what I'm after (I'm thinking it's probably not) nor do I know how efficient it is:
var divs = $("table.form tr td");
for(var i = 0; i < divs.length; i+=2) {
if ($('table.form').parents('#clientsummarycontainer').length == 0) {
divs.slice(i, i+2).wrapAll("<div class='table-half'></div>");
}
}
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());
I am using a expendable table for that the code is below
<table class="table table-condensed table-bordered">
<thead>
<tr>
<th>
</th>
<th>S. No.</th>
<th>Position</th>
<th>Reporting to</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="position in listPositiondtls | itemsPerPage:10" current-page="currentPage">
<td>
<button ng-click="expanded = !expanded">
<span ng-bind="expanded ? '-' : '+'"></span>
</button>
</td>
<td >{{$index+1}}</td>
<td>{{position.positionName}}</td>
<td>{{position.reportingToName}}</td>
</tr>
<tr ng-show="expanded">
<td></td>
<td colspan="3">
<div class="col-lg-6 margin_all">
<span>Department Code: {{position.depCode}}</span>
</div>
<div class="col-lg-6 margin_all">
<span>Department Name: {{position.depName}}</span>
</div>
<div class="col-lg-6 margin_all">
<span>Position Name: {{position.positionName}}</span>
</div>
<div class="col-lg-6 margin_all">
<span>Is He HOD:
<label>
<input type="checkbox" ng-model="position.isHeadofdepartment">
<span class="text"></span>
</label>
</span>
</div>
</td>
</tr>
</tbody>
</table>
Here I am using ng-repeat-start directive for expandable table.
but pagination showing this alert:
Pagination directive: the pagination controls cannot be used without the corresponding pagination directive, which was not found at link time.
and an error:
pagination directive: the itemsPerPage id argument (id: __default) does not match a registered pagination-id.
Help me I need pagination in expandable table.
You have 2 errors, i think.
dirPaginate require use dir-paginate instead of ng-repeat.
You need use pagination control directive.
To solve you problem do next:
Change ng-repeat on dir-paginate in ng-repeat="position in listPositiondtls | itemsPerPage:10"
Add in html <dir-pagination-controls></dir-pagination-controls>
Modified html
<dir-pagination-controls></dir-pagination-controls>
<table class="table table-condensed table-bordered">
<thead>
<tr>
<th>
</th>
<th>S. No.</th>
<th>Position</th>
<th>Reporting to</th>
</tr>
</thead>
<tbody>
<tr dir-paginate="position in listPositiondtls | itemsPerPage:10" current-page="currentPage">
<td>
<button ng-click="expanded = !expanded">
<span ng-bind="expanded ? '-' : '+'"></span>
</button>
</td>
<td >{{$index+1}}</td>
<td>{{position.positionName}}</td>
<td>{{position.reportingToName}}</td>
</tr>
<tr ng-show="expanded">
<td></td>
<td colspan="3">
<div class="col-lg-6 margin_all">
<span>Department Code: {{position.depCode}}</span>
</div>
<div class="col-lg-6 margin_all">
<span>Department Name: {{position.depName}}</span>
</div>
<div class="col-lg-6 margin_all">
<span>Position Name: {{position.positionName}}</span>
</div>
<div class="col-lg-6 margin_all">
<span>Is He HOD:
<label>
<input type="checkbox" ng-model="position.isHeadofdepartment">
<span class="text"></span>
</label>
</span>
</div>
</td>
</tr>
</tbody>