I have implemented 2 tab datatable. However when the page first load it will show both datatable.
I cant seem to find the solution. Please help.
Below is the snippet of my code and attached an image.
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#example1-tab1"
aria-controls="example1-tab1" role="tab" data-toggle="tab">Pending
Approval</a></li>
<li role="presentation"><a href="#example1-tab2"
aria-controls="example1-tab2" role="tab" data-toggle="tab">Approved</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active"
id="example1-tab1">
<div class="row">
<div class="col-md-6">
<h3>Pending Approval</h3>
</div>
</div>
<div class="table-responsive">
<table id="pendingOffTable"
class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Name</th>
<th>Start Date</th>
<th>End Date</th>
<th>Leave Type</th>
<th>Remarks</th>
<th>Status</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<tr data-th-each="off : ${pendingOffList}">
<td data-th-text="${off.user.name}">...</td>
<td data-th-text="${off.startDate}">...</td>
<td data-th-text="${off.endDate}">...</td>
<td data-th-text="${off.leaveType}">...</td>
<td data-th-text="${off.remarks}">...</td>
<td data-th-text="${off.status}">...</td>
<td><input hidden="hidden" name="offId" th:value="${off.id}" />
<button th:id="${off.id}"
class="btn btn-success btn-xs approve-off" type="submit"
value="approve">
<span class="fa fa-check-square-o"></span> Approve
</button>
<button th:id="${off.id}"
class="btn btn-danger btn-xs reject-off" type="submit"
value="reject">
<span class="fa fa-times"></span> Reject
</button></td>
</tr>
</tbody>
</table>
</div>
</div>
<div role="tabpanel" class="tab-pane fade in active"
id="example1-tab2">
<div class="row">
<div class="col-md-6">
<h3>Approved</h3>
</div>
</div>
<div class="table-responsive">
<table id="approvedOffTable"
class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Name</th>
<th>Start Date</th>
<th>End Date</th>
<th>Leave Type</th>
<th>Remarks</th>
<th>Status</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<tr data-th-each="off : ${approvedOffList}">
<td data-th-text="${off.user.name}">...</td>
<td data-th-text="${off.startDate}">...</td>
<td data-th-text="${off.endDate}">...</td>
<td data-th-text="${off.leaveType}">...</td>
<td data-th-text="${off.remarks}">...</td>
<td data-th-text="${off.status}">...</td>
<td><input hidden="hidden" name="offId" th:value="${off.id}" />
<button th:id="${off.id}"
class="btn btn-danger btn-xs delete-ocoff" type="submit"
value="delete">
<span class="fa fa-times"></span> Delete
</button></td>
</tr>
</tbody>
</table>
</div>
</div>
Javascript
<script type="text/javascript">
$(document).ready(function() {
$('table.table').DataTable();
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
$($.fn.dataTable.tables(true)).DataTable().columns.adjust();
});
});
As shows in the image, the 2 tabs appear but both the datatable appears. After selecting the tabs only 1 table shows. This just occurs when the page first load.
Related
I am doing the pagination in UI side using angular14. But the issue I am facing is that if the items in a page is less than the "itemsPerPage" value then my pagination bar is moving its place. Can't I have the static pagination bar?
I am using NgxPaginationModule for the pagination.
component.html code
<div class="container mt-5">
<div *ngIf="successMsg" class="alert alert-success alert-dismissible fade show" role="alert">
<strong>{{successMsg}}</strong>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">Employee ID</th>
<th scope="col">Employee Name</th>
<th scope="col">Employee Designation</th>
<th scope="col">Employee Photo</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor= 'let i of readData | paginate: { itemsPerPage: 3, currentPage: p, totalItems: total}'>
<th scope="row">{{i.id}}</th>
<td>{{i.name}}</td>
<td>{{i.des}}</td>
<td><img class="smaller" [src]= "i.image" [alt]= "i.image"> </td>
<td>
<button class="btn btn-sm btn-danger" (click)="deleteID(i.id)">
Delete
</button>
<a [routerLink]="['/create',i.id]" class= "btn btn-sm btn-primary">Update</a>
</td>
</tr>
</tbody>
</table>
<div>
<pagination-controls (pageChange)="pageChangeEvent($event)"></pagination-controls>
</div>
</div>
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>
how to add buttons horizontaly something like below image, please help me i want add subjects button horizontally in one column dynamically how to possible in angularjs
<table class="table table-bordered table-striped table-hover table-condensed mb-none dataTable no-footer" role="grid">
<thead>
<tr>
<th style="width: 120px;" colspan="1" rowspan="1">Days</th>
<th style="width: 760px;" colspan="1" rowspan="1">Schedules</th>
<th style="width: 100px;" colspan="1" rowspan="1">Add</th>
</tr>
</thead>
<tbody class="gradeX">
<tr ng-repeat="x in additems">
<td>{{x.teacher_name }}</td>
<td><div class="btn-group" role="group">
<button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Math
</button>
<div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
<a class="dropdown-item" href="#">Dropdown link</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
<td><i class="fa fa-close text-danger" aria-hidden="true"></i></td>
</tr>
</tbody>
</table>
i want below image like this
Here is presented base logic:
angular.module('app',[]).controller('MyController', function($scope){
$scope.items=[
{name:'Sunday', stuff:[]},
{name:'Monday', stuff:[]}
];
$scope.add = function(stuff){
stuff.push(stuff.length);
};
})
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='app' ng-controller='MyController'>
<table>
<tr>
<th>Day</th>
<th>Schedule</th>
<th></th>
</tr>
<tr ng-repeat='item in items'>
<td>{{item.name}}</td>
<td>
<span ng-repeat='sub in item.stuff'>{{sub}}{{$last ? '' : ','}}</span>
</td>
<td>
<input type='button' value='Add' ng-click='add(item.stuff)'/>
</td>
</tr>
</table>
</div>
I have created multiple tabs which contain one table each. Each row of the table has a checkbox and there is a check box on heading of each table which when checked selects all check-boxes in a particular table. Now this checkbox is working for first tab but when I switch tabs the other select all check-boxes are not working. All have the same id so I think one jQuery function would be enough. Below is the structure of tab and table inside it
Same happens with email button only first tab email works
$('#all').change(function() {
if ($(this).prop('checked')) {
$('tbody tr td input[type="checkbox"]').each(function() {
$(this).prop('checked', true);
});
} else {
$('tbody tr td input[type="checkbox"]').each(function() {
$(this).prop('checked', false);
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul class="nav nav-tabs">
<li class="active">
<a href="#profile" data-toggle="tab">
<span class="glyphicon glyphicon-info-sign"></span> EN
</a>
</li>
<li>
<a href="#tab-emp-name" data-toggle="tab">
<span class="glyphicon glyphicon-home"></span> EN
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="profile">
<div class="clearfix" style="margin: 10px 0;">
<a href="https://mail.xxxx.com" class="btn btn-warning" id="email">
<span class="glyphicon glyphicon-envelope"></span> Email
</a>
</div>
<table class="table table-striped">
<thead>
<tr>
<th>
<span class="label label-danger">Select All</span>
<input type='checkbox' name='check_all' id='all'>
</th>
<th></th>
<th>Number</th>
<th>Name</th>
<th>Gender</th>
<th>Date of Birth</th>
<th>Email</th>
</tr>
</thead>
<tbody id="tbody-emps"></tbody>
</table>
</div>
<div class="tab-pane" id="tab-emp-name">
<div class="clearfix" style="margin: 10px 0;">
<a href="https://mail.xxx.com" class="btn btn-warning" id="email">
<span class="glyphicon glyphicon-envelope"></span> Email
</a>
</div>
<table class="table table-striped">
<thead>
<tr>
<th>
<span class="label label-danger">Select All</span>
<input type='checkbox' name='check_all' id='all'>
</th>
<th></th>
<th>Number</th>
<th>Name</th>
<th>Gender</th>
<th>Date of Birth</th>
<th>Email</th>
</tr>
</thead>
<tbody id="tbody-emp-name"></tbody>
</table>
</div>
</div>
ids must be unique, change it to a class or use a different selector
$('th input[type="checkbox"]').change(function() {
if ($(this).prop('checked')) {
$(this).closest('table').find('input[type="checkbox"]').prop('checked', true);
} else {
$(this).closest('table').find('input[type="checkbox"]').prop('checked', false);
}
});
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>");
}
}