I have a datatable with a column that contains values of type integer, but when i show those values on my view numbers arent aligned well, so i have a value in a row = 600 and in another row = 1200 and the 6 of 600 is aligned with the thousand digit (1) instead with the hundreeds.
And this is my view with my data table:
<table id="example1" class="table table-striped table-responsive" width="100%">
<thead class="thead">
<tr>
<th style="display: none">Codigo</th>
<th>ID</th>
<th>Producto</th>
<th>Tipo de Producto</th>
<th>Marca</th>
<th>Modelo</th>
<th>Moneda de Compra</th>
<th class="quitarDecimales">Costo Total</th>
<th>Moneda de Venta</th>
<th class="quitarDecimales">Precio de Lista</th>
<th>Margen Bruto</th>
<th style="width: 12%">Accion</th>
</tr>
</thead>
<tbody>
#foreach($file as $key => $product)
#if($product->status == 1)
<tr>
<td style="display: none">{{ $key+1 }}</td>
<td>{{ $product->id }}</td>
<td>{{$product->marca->brandName . " " . $product->modelo->modelName}}</td>
<td>{{ $product['ptype']['productType']}}</td>
<td>{{ $product->marca->brandName }}</td>
<td>{{ $product->modelo->modelName}}</td>
<td>{{ $product->coin }}</td>
<td>{{ $product->costUSD }}</td>
<td>{{$product->sale_coin}}</td>
<td>{{$product->list_priceUSD}}</td>
<td>{{$product->marginUSD}}</td>
#php
$count_product = App\Model\Purchase::where('product_id',$product->id)->count();
#endphp
<td>
<!--<a title="Download" id="download" class="btn btn-sm btn-success"
href="/products/download/{{ $product->file }}"><i
class="fa fa-download"></i></a>-->
<a title="Edit" class="btn btn-sm text-white"
style="background-image: linear-gradient(200deg, #070525ce 1%, rgb(1, 0, 5)100%);"
href="{{ route('products.edit', $product->id) }}"><i
class="fa fa-edit"></i></a>
<a title="Delete" id="delete" class="btn btn-sm btn-danger"
href="{{ route('products.delete', $product->id) }}"><i
class="fa fa-trash"></i></a>
<a title="Info" id="info" class="btn btn-sm btn-info" href="{{route('products.detail', $product->id)}}" ><i class="fa fa-eye" ></i></a>
</td>
</tr>
#endif
#endforeach
</tbody>
</table>
So i tried doing this:
div tbody tr{
text-align: center;
}
Which aligns my number digits of the different rows in my table but my thead titles are not aligned. My values go too far to the right.
By default text is aligned to the left in tables which is what you are seeing above. If you want the numbers to be aligned correctly you need to add text-align:right; to the td elements which contain numbers.
It looks like you might be using BootStrap, in which case they already have a class you can use called text-right which will set the text-align to right.
If you are not using BootStrap you can add the class yourself like this:
<style>
.text-right{
text-align: right;
}
</style>
then add the class to the td elements as needed.
My stylesheet:
div tbody tr .numero{
text-align: right;
padding-right: 50px;
}
div tbody tr{
text-align: center;
}
div thead tr{
text-align: center;
}
My view:
<table id="example1" class="table table-striped table-responsive" width="100%">
<thead class="thead">
<tr>
<th style="display: none">Codigo</th>
<th>ID</th>
<th>Producto</th>
<th>Tipo de Producto</th>
<th>Marca</th>
<th>Modelo</th>
<th>Moneda de Compra</th>
<th class="quitarDecimales">Costo Total</th>
<th>Moneda de Venta</th>
<th class="quitarDecimales">Precio de Lista</th>
<th>Margen Bruto</th>
<th style="width: 12%">Accion</th>
</tr>
</thead>
<tbody>
#foreach($file as $key => $product)
#if($product->status == 1)
<tr>
<td style="display: none">{{ $key+1 }}</td>
<td>{{ $product->id }}</td>
<td>{{$product->marca->brandName . " " . $product->modelo->modelName}}</td>
<td>{{ $product['ptype']['productType']}}</td>
<td>{{ $product->marca->brandName }}</td>
<td>{{ $product->modelo->modelName}}</td>
<td >{{ $product->coin }}</td>
<td class="numero">{{ $product->costUSD }}</td>
<td>{{$product->sale_coin}}</td>
<td class="numero">{{$product->list_priceUSD}}</td>
<td class="numero">{{$product->marginUSD}}</td>
#php
$count_product = App\Model\Purchase::where('product_id',$product->id)->count();
#endphp
<td>
<!--<a title="Download" id="download" class="btn btn-sm btn-success"
href="/products/download/{{ $product->file }}"><i
class="fa fa-download"></i></a>-->
<a title="Edit" class="btn btn-sm text-white"
style="background-image: linear-gradient(200deg, #070525ce 1%, rgb(1, 0, 5)100%);"
href="{{ route('products.edit', $product->id) }}"><i
class="fa fa-edit"></i></a>
<a title="Delete" id="delete" class="btn btn-sm btn-danger"
href="{{ route('products.delete', $product->id) }}"><i
class="fa fa-trash"></i></a>
<a title="Info" id="info" class="btn btn-sm btn-info" href="{{route('products.detail', $product->id)}}" ><i class="fa fa-eye" ></i></a>
</td>
</tr>
#endif
#endforeach
</tbody>
</table>
Related
i am trying to get data from html table in angular.
component.html:
<div class="col-lg-6">
<table style="width: 90%;">
<tr>
<th
style="
border-left-color: white;
border-top-color: white;
"
></th>
<th class="t1">Name</th>
<th class="t1">Issue Date</th>
<th class="t1">Expiry Date</th>
<th class="t1">Add License</th>
</tr>
<tr *ngFor="let licence of licencesImages">
<!-- Licence Image -->
<td>
<img [src]="licence.path" style="max-width: 30px" />
</td>
<!-- Licence Name -->
<td>{{ getLicenceVehicleType(licence.name) }}</td>
<!-- Licence Issue Date -->
<td>
{{ getLicenceDate(licence.issued_date) }}
</td>
<!-- Licence Due Date -->
<td>{{ getLicenceDate(licence.due_date) }}</td>
<!-- Add Licence -->
<td>
<i
class="fa fa-plus-circle cursor-pointer"
aria-hidden="true"
style="color: green"
(click)="onAddLicense(output)"
></i>
</td>
</tr>
</table>
</div>
in component.ts:
onAddLicense(output) {
console.log(output)
}
my case is different from mat-table, in each row i have a button related to this row.
how i can get data from this row on click on button?
i try to replace output by $event.target.valuebut not work.
#op instead of doing like :
<i
class="fa fa-plus-circle cursor-pointer"
aria-hidden="true"
style="color: green"
(click)="onAddLicense(output)"
></i>
do it like :
<i
class="fa fa-plus-circle cursor-pointer"
aria-hidden="true"
style="color: green"
(click)="onAddLicense(licence)"
></i>
I'm using Bootstrap 4 table inside a collapse, I want to search for a value in the table and if the value is found, open the collapse and show me the row with the value.
<div id="collapseStudents" class="collapse ml-4" aria-labelledby="headingOne" data-parent="#accordionTypes">
<table class="table table-striped table-borderless">
<thead>
<tr>
<th scope="col" class="text border-bottom">N.</th>
<th scope="col" class="text border-bottom">Classe</th>
<th scope="col" class="text border-bottom">Nome e Cognome</th>
<th scope="col" class="text border-bottom">Ruoli</th>
</tr>
</thead>
<tbody>
{% for number, data in students_table.items() %}
<tr>
<th scope="row" class="text">{{number}}</th>
<td class="text"><span class="badge badge-secondary">{{data['class']}}</span></td>
<td class="text">{{data['name']}}</td>
<td class="text roles" style="width: 30%">
<span class="badge badge-danger align-text-top ml-1 admin-chip" style="display: {{none if not 'admin' in data['roles'] else block}}; position: relative; top: 2px;">Admin <a class="text-light chip" href=""><i class="fa fa-times" aria-hidden="true" style="position:relative;top:0.3px" data-role="admin" data-user="{{data['name'] + '-' +number}}"></i></a></span>
</td>
</tr>
{% endfor %}
</tbody>
</table>
You can try with the following script:
$('.table tbody').find('tr').each(function(){
$(this).find('td').each(function(){
if($(this:contains('valueToSearch'))){
$('#collapseStudents').collapse();
// here you can set how to show the row, ex. as bold text
$(this).text('<b>' + $(this).text() + '</b>');
}
});
});
I have a foreach loop that i am using to show the dataset, but i want to show specific dataset under a single button so that button click leads to showing that particular data.
My code is the following:
#foreach($new_records as $new_recordss)
<tr>
<td scope="col">{{ $new_recordss['Mob'] }}</td>
<td scope="col"><div class="btn-group">
<button type="button" class="btn btn-primary btn-xs shownum_class"> <span class=" glyphicon glyphicon-earphone" aria-hidden="true"> </span> show/hide</button><div class="numero_class"><td scope="col">{{ $new_recordss['PreferredDate'] }}</td><td scope="col">{{ $new_recordss['PreferredCity'] }}</td><td scope="col">{{ $new_recordss['BookingId'] }}</td><td scope="col">{{ $new_recordss['Documents'] }}</td><td scope="col">{{ $new_recordss['Age'] }}</td><td scope="col">{{ $new_recordss['Gender'] }}</td></div></div></td>
</tr>
#endforeach
Jquery code :
<script type="text/javascript">
$(document).ready(function() {
$(".numero_class").hide();
$(".shownum_class").click(function(){
$(this).next(".numero_class").toggle();
});
});
</script>
Currently this is not working.Any pointers will be useful.Plz help
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 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/