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>
Related
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.
I wanted to sort the column data in ascending order on click of a button.But due to nested ng-repeat directives and nested objects in my json I'm not able to do it.My Json data is very large.I'm kinda stuck from quite a few days now.Any help will be appreciated.
JSON data link is-json link
My HTML looks like this-
<div class="container" >
<div class="row searchbar">
<div class="col-xs-8 col-xs-offset-2">
<div class="input-group">
<div class="input-group-btn search-panel dropdown">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span id="search_concept">Sort by<span class="caret"></span>
</button>
<ul ng-model="sortColumn" class="dropdown-menu" role="menu">
<li><a >Team 1</a></li>
<li><a >Team 2</a></li>
<li><a >Score 1</a></li>
<li><a >Score 2</a></li>
</ul>
</div>
<input type="text" class="form-control" name="x" ng-model=filterField placeholder="Search term...">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"></span></button>
</span>
</div>
</div>
</div>
<table class="table table-striped" id="myTable">
<thead >
<tr class="info ">
<th class="text-center">Match</th>
<th class="text-center">Team 1</th>
<th class="text-center">Score 1</th>
<th class="text-center">Team 2</th>
<th class="text-center">Score 2</th>
</tr>
</thead>
<div ng-controller="matchesController as matchCtrl">
<tbody ng-repeat="match in matchCtrl.matchesData ">
<tr ng-repeat="mydata in match.matches | filter:filterField | orderBy:matchCtrl.orderProperty">
<td class="text-center" >{{match.name |filter:matchname}}<br>
<span id="date">{{mydata.date | date:fullDate }}</span></td>
<td class="text-center" >{{mydata.team1.name | uppercase}}<br>
<span id="code">[{{mydata.team1.code}}]</span>
</td>
<td class="text-center">{{mydata.score1}}<span ng-show="mydata.score1 === null">Not Available</span></td>
<td class="text-center" >{{mydata.team2.name | uppercase}}<br>
<span id="code">[{{mydata.team2.code}}]</span>
</td>
<td class="text-center">{{mydata.score2}}<span ng-show="mydata.score2 === null">Not Available</span></td>
</tr>
</tbody>
</table>
</div>
</div>
My controller looks like this-
myApp.controller('matchesController',['$http',function($http) {
//create a context
var match = this;
this.matchesData=[];
this.loadAllMatches = function(){
$http({
method: 'GET',
url:'https://raw.githubusercontent.com/openfootball/football.json
/master/2016-17/en.1.json',
}).then(function successCallback(response) {
match.matchesData=response.data.rounds;
console.log(match.matchesData);
}, function errorCallback(response) {
alert("some error occurred. Check the console.");
console.log(response);
});
};// end load all blogs
this.loadAllMatches();
}]); // end controller
It would help if you create plunkers for these questions. Basically, just implement a method to change the value of a property using ng-model, and set the orderBy col to ng-model.
I've added '.' notation to ng-model to help with scoping issues as ng-repeat creates it's own scope.
Try this:
<select name="singleSelect" ng-model="sorting.orderCol">
<option value="name">Name</option>
<option value="age">Age</option>
<option value="phone">Phone</option>
</select>
<table class="friends">
<tr>
<th>Name</th>
<th>Phone Number</th>
<th>Age</th>
</tr>
<tr ng-repeat="friend in friends | orderBy:sorting.orderCol">
<td>{{friend.name}}</td>
<td>{{friend.phone}}</td>
<td>{{friend.age}}</td>
</tr>
</table>
Plunker: https://plnkr.co/edit/Rh6TbmbIUkAjwMeevdP1?p=preview
I am using the DataTables Jquery https://datatables.net/ , but i am filling in the table with AngularJS, but when i use any of properties of Data Table the results disappear, i think that is because is running the page and then running the code js , how is correct way for filling the table with AngularJS?
<table
class="table table-striped table-bordered table-hover table-checkable order-column"
id="sample_1">
<!--sample_1 -->
<thead>
<tr>
<th>ID</th>
<th>E-mail</th>
<th>Ações</th>
</tr>
</thead>
<tbody>
<tr class="odd gradeX"
ng-repeat="obterUsers in ObterUsuarios | orderBy:'username'">
<td>{{obterUsers.id }}</td>
<td class="center">{{ obterUsers.username}}</td>
<td>
<div class="btn-group">
<button class="btn btn-xs green dropdown-toggle" type="button"
data-toggle="dropdown" aria-expanded="false">
Ações <i class="fa fa-angle-down"></i>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#!/UsuarioAlteracao/{{obterUsers.id}}">
<i class="fa fa-edit"></i> Editar
</a></li>
<li><a ng-click="deleteUsuario(obterUsers)" href="">
<i class="fa fa-remove"></i> Excluir
</a></li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
Some pictures about program:
I have got two tables mytable1 and mytable2
I am trying to move the checked tr rows (from table mytable1) to different table mytable2
I have tried as following
$(document).ready(function() {
$(document).on("click", ".movemultiple", function(event)
{
$('.mytable1 > tbody > tr').each(function() {
$(this).find('td:eq(0) .updatecheckboxvalueindb:checked')
});
});
});
.fa fa-check
{
background-color:red!importnt
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="mytable1 table table-bordered table-hover" id="videosfromtagstable">
<thead>
<tr class="existingvideos">
<th>Action</th>
<th>Name</th>
<th>File</th>
<th>Badge</th>
<th>Equipments</th>
</tr>
</thead>
<tbody class="connectedSortable ui-sortable">
<tr video-id="37" title="" class="newvideos exercises-add-table-content">
<td class="removecheckboxtd" style="vertical-align: middle ; display:block;"><label class="mt-checkbox mt-checkbox-outline"><input class="new-checkbox updatecheckboxvalueindb" value="new_flag" type="checkbox"><span></span></label></td>
<td>crunches</td>
<td>ht4_970_979.mp4</td>
<td>
<span class="btn btn-sm btn-success btn-circle">Push Ups</span>
</td>
<td><i class="fa fa-check"></i></td>
</tr>
<tr video-id="38" title="" class="newvideos exercises-add-table-content">
<td class="removecheckboxtd" style="vertical-align: middle ; display:block;"><label class="mt-checkbox mt-checkbox-outline"><input class="new-checkbox updatecheckboxvalueindb" value="new_flag" type="checkbox"><span></span></label></td>
<td>Sit Ups</td>
<td>ht4_970_345.mp4</td>
<td>
<span class="btn btn-sm btn-success btn-circle">Push Ups</span>
</td>
<td><i class="fa fa-check"></i></td>
</tr>
</tbody>
</table>
<br><br>
<button type="button" class="btn red default movemultiple">Move </button>
<br><br>
<table class="mytable2 table table-bordered table-hover" id="videosexistingtable">
<tbody class="connectedSortable ui-sortable">
<tr class="existingvideos">
<th>Name</th>
<th>File</th>
<th>Badge</th>
<th>Equipments</th>
<th>Action</th>
</tr>
<tr class="existingvideos" video-id="34">
<td>Push Ups</td>
<td>ht4_970_285.mp4</td>
<td>
<span class="btn btn-sm btn-success btn-circle">Push Ups</span>
</td>
<td>
<i class="fa fa-check"></i>
</td>
<td class="deletevidetd"><a data-videoid="34" class="fa fa-trash remove-delete-icon deletevideo" title="Delete"></a></td>
</tr>
</tbody>
</table>
Could you please let me know how to do this ?
http://jsfiddle.net/o2gxgz9r/1879/
You could use jQuery .closest() to get the closest table row (or table cell) and jQuery .remove() to remove the table cell with the checkbox from DOM:
$(document).ready(function () {
$(document).on('click', '.movemultiple', function() {
var $myTable2Body = $('.mytable2 tbody');
$('.mytable1 .updatecheckboxvalueindb:checked').each(function(index, item) {
var $checkbox = $(item);
$myTable2Body.append($checkbox.closest('tr'));
$checkbox.closest('td').remove();
});
});
});
.fa fa-check
{
background-color:red!importnt
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="mytable1 table table-bordered table-hover" id="videosfromtagstable">
<thead>
<tr class="existingvideos">
<th>Action</th>
<th>Name</th>
<th>File</th>
<th>Badge</th>
<th>Equipments</th>
</tr>
</thead>
<tbody class="connectedSortable ui-sortable">
<tr video-id="37" title="" class="newvideos exercises-add-table-content">
<td class="removecheckboxtd" style="vertical-align: middle ; display:block;"><label class="mt-checkbox mt-checkbox-outline"><input class="new-checkbox updatecheckboxvalueindb" value="new_flag" type="checkbox"><span></span></label></td>
<td>crunches</td>
<td>ht4_970_979.mp4</td>
<td>
<span class="btn btn-sm btn-success btn-circle">Push Ups</span>
</td>
<td><i class="fa fa-check"></i></td>
</tr>
<tr video-id="38" title="" class="newvideos exercises-add-table-content">
<td class="removecheckboxtd" style="vertical-align: middle ; display:block;"><label class="mt-checkbox mt-checkbox-outline"><input class="new-checkbox updatecheckboxvalueindb" value="new_flag" type="checkbox"><span></span></label></td>
<td>Sit Ups</td>
<td>ht4_970_345.mp4</td>
<td>
<span class="btn btn-sm btn-success btn-circle">Push Ups</span>
</td>
<td><i class="fa fa-check"></i></td>
</tr>
</tbody>
</table>
<br><br>
<button type="button" class="btn red default movemultiple">Move </button>
<br><br>
<table class="mytable2 table table-bordered table-hover" id="videosexistingtable">
<tbody class="connectedSortable ui-sortable">
<tr class="existingvideos">
<th>Name</th>
<th>File</th>
<th>Badge</th>
<th>Equipments</th>
<th>Action</th>
</tr>
<tr class="existingvideos" video-id="34">
<td>Push Ups</td>
<td>ht4_970_285.mp4</td>
<td>
<span class="btn btn-sm btn-success btn-circle">Push Ups</span>
</td>
<td>
<i class="fa fa-check"></i>
</td>
<td class="deletevidetd"><a data-videoid="34" class="fa fa-trash remove-delete-icon deletevideo" title="Delete"></a></td>
</tr>
</tbody>
</table>
JSFiddle
like this?
$(document).on("click", ".movemultiple", function(event){
$('.updatecheckboxvalueindb:checked').parents('tr').appendTo('.mytable2').find('.removecheckboxtd').remove();
});
check out the fiddle : http://jsfiddle.net/h9q8o340/
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);
}
});