How to convert decimal tofixed foramt using javascript - javascript

My table has decimal values. My question is how to convert all decimal values after 2 digit decimal point.
Example:
1)My table column value is 11.9 and 6.0. how convert to this format 11.90 and 06.00
2)1045.7 to 1045.70
i am using django to display the value .my html table code using this format than how to convert tofixed
<table class="table table-striped table-condensed table-bordered " id="child_table">
<thead class="btn-primary" >
<tr>
<th >Year</th>
<th >Estimated Mid-Year-Population</th>
<th colspan="3" >Infanticide</th>
<th colspan="3" >Murder</th>
<th colspan="3" >Rape</th>
<th colspan="3" >Kidnapping & Abduction</th>
<th colspan="3" >Abetment Of Suicide</th>
<th colspan="3" >Child Marriage Restraint Act</th>
<th colspan="3" >Other Crimes</th>
</tr>
</thead>
<td></td>
<th></th>
<th>(I)ncidance</th>
<th>(R)ate</th>
<th>%</th>
<th>I</th>
<th>R</th>
<th>%</th>
<th>I</th>
<th>R</th>
<th>%</th>
<th>I</th>
<th>R</th>
<th>%</th>
<th>I</th>
<th>R</th>
<th>%</th>
<th>I</th>
<th>R</th>
<th>%</th>
<th>I</th>
<th>R</th>
<th>%</th>
</tr>
<tbody id="crimec">
{% for query_all in crime_filter %}
<tr id="crime_child">
<td>{{ query_all.year}}</td>
<td>{{ query_all.mid_year_population }}</td>
<td>{{ query_all.infanticide_incidence }}</td>
{% if query_all.infanticide_rate > 0 %}
<td>{{ query_all.infanticide_rate }}</td>
{% else %}
<td> </td>
{% endif %}
<td>{{ query_all.infanticide_percentage }}</td>
<td>{{ query_all.murder_incidence }}</td>
<td>{{ query_all.murder_rate }}</td>
<td>{{ query_all.murder_percentage }}</td>
<td>{{ query_all.rape_incidence }}</td>
<td>{{ query_all.rape_rate }}</td>
<td>{{ query_all.rape_percentage }}</td>
<td>{{ query_all.kidnapping_abduction_i }}</td>
<td>{{ query_all.kidnapping_abduction_r }}</td>
<td>{{ query_all.kidnapping_abduction_p }}</td>
<td>{{ query_all.abetment_suicide_i }}</td>
{% if query_all.abetment_suicide_r > 0 %}
<td>{{ query_all.abetment_suicide_r }}</td>
{% else %}
<td> </td>
{% endif %}
<td>{{ query_all.abetment_suicide_p }}</td>
<td>{{ query_all.child_marriage_act_i }}</td>
{% if query_all.child_marriage_act_r > 0%}
<td>{{ query_all.child_marriage_act_r }}</td>
{% else %}
<td> </td>
{% endif %}
<td>{{ query_all.child_marriage_act_p }}</td>
<td>{{ query_all.total_i }}</td>
<td>{{ query_all.total_r }}</td>
<td>{{ query_all.total_p }}</td>
</tr>
{% endfor %}
</tbody>
</table>

CODE:
var val=6;
var precision=2;
val = val.toFixed(precision);
if( val < 10.00 )
val = "0"+val
alert(val)
JSFIDDLE DEMO

You can use the Number.toFixed() method.
var num = 5.5;
console.log(num.toFixed(2)) // this will return 5.50

Use parseFloat in combination with toFixed():
parseFloat(6).toFixed(2);
JS Fiddle: http://jsfiddle.net/25hJC/

var value = 11.9;
if(!isInt(value)){
var changeValue = value.toFixed(2);
}
console.log(changeValue); // returns 11.90
// check int or float;
function isInt(n) {
return n % 1 === 0;
}

Related

Displaying the array from the controller as a table in the view

In the controller, I receive the data from the database and then I assign the relevant list to the function that will run all the functions in this controller. This list returns to view here I will show the data in the table but ... is undefined error
now i will share with you my functions in controller
public function table_backlog()
{
$dailyData=\DB::table('backlogs')->get()->toArray();
//dd($dailyData);
return ['dailyData'=>$dailyData];
}
protected function getAllBChart() {
return view('deneme',[
'table_backlog'=>$this->table_backlog()]);
}
View.blade:
<div class="row justify-content-center">
<div class="col-auto">
<table class="table table-responsive">
<thead>
<tr>
<th>Incident No</th>
<th>Assignment Group</th>
<th>Open Group</th>
<th>Open Time</th>
<th>RN Short Name</th>
<th>Days</th>
<th>Brief Description</th>
</tr>
<thead>
<tbody>
#foreach($dailyData as $key => $row)
<tr>
<td>{{ $row->number }}</td>
<td>{{ $row->assignmentGroup }}</td>
<td>{{ $row->creatorGroup }}</td>
<td>{{ $row->opened }}</td>
<td>{{ $row->configuration }}</td>
<td>{{ $row->description }}</td>
</tr>
#endforeach
</tbody>
</table>
</div>
</div>
<script type="text/javascript">
var dailyData={!! json_encode($table_backlog['dailyData']) !!}
</script>
This line assigns the data from the controller to the variable. When I check with DD I can see the data
var dailyData={!! json_encode($table_backlog['dailyData']) !!}
I tried this but I get undefined error. My for loop doesn't work either
try this version coz error from array's key
#foreach($table_backlog['dailyData'] as $key => $row)
<tr>
<td>{{ $row['number']}}</td>
<td>{{ $row['assignmentGroup']}}</td>
<td>{{ $row['creatorGroup']}}</td>
<td>{{ $row['opened']}}</td>
<td>{{ $row['configuration']}}</td>
<td>{{ $row['description']}}</td>
</tr>
#endforeach

django datepicker on datatable

I have to apply datepicker to my datatable to filter the data between two date range. I have applied my things and tried different codes but nothing worked out. My table contains date in the format( example- July 16,2019). I know it can be done by javascript but I am unable to do so. Please help.
<table id="table table-mutasi" data-toggle="table" data-pagination="true" data-search="true" data-show-columns="true" data-show-pagination-switch="true" data-show-refresh="true" data-key-events="true" data-show-toggle="true" data-resizable="true" data-cookie="true" data-cookie-id-table="saveId" data-show-export="true" data-click-to-select="true">
<thead>
<tr>
<th data-field="state" data-checkbox="true"></th>
<th data-field="id">center</th>
<th data-field="cabin" >cabin</th>
<th data-field="boooked_date">Booked date</th>
<th data-field="release_date">Release Date</th>
<th data-field="client">Client</th>
<th data-field="booked_by">Booked by</th>
{% if not request.user.is_superuser %}
<th>Actions</th>
{% endif %}
</tr>
</thead>
<tbody>
{% for object in object_list %}
<tr>
<td>{{ forloop.counter }}</td>
<td>{{ object.premises}}</td>
<td>{{ object.cabin }}</td>
<td>{{ object.booked_date }}</td>
<td>{{ object.release_date }}</td>
<td>{{ object.client }}</td>
<td>{{ object.booked_by }}</td>
{% if not request.user.is_superuser %}
<td>
<span class="glyphicon glyphicon-edit"></span>
<input type="hidden" id="cendel" value="{{object.id }}">
</span> </td>
{% endif %}
</tr>
{% endfor %}
</tbody>
</table>

AngularJS: passing array information along

I have a table that lists several objects in an array using ng-repeat and I was wondering, if there is an easy way to let the user select one of these objects by clicking on the row and viewing them in a separate <div>.
Here's the table:
<table class="table">
<tbody class="table-hover">
<tr>
<th scope="col">Name</th>
<th scope="col">Type</th>
<th scope="col">Approver</th>
</tr>
<tr ng-repeat="campaign in campaigns | filter: query" contenteditable="true">
<td>{{ campaign.name }}</td>
<td>{{ campaign.type }}</td>
<td>{{ campaign.approver }}</td>
</tr>
</tbody>
</table>
Let's say the user clicked on the first row. He would now see a <div> that contains all the information in this row for that object.
<div>
{{campaigns[].name}}
...
</div>
It could be achieved by several way. One of them as below.
<table class="table">
<tbody class="table-hover">
<tr>
<th scope="col">Name</th>
<th scope="col">Type</th>
<th scope="col">Approver</th>
</tr>
<tr ng-repeat-start="campaign in campaigns | filter: query" contenteditable="true" ng-click="campaign.showDetails = !campaign.showDetails">
<td>{{ campaign.name }}</td>
<td>{{ campaign.type }}</td>
<td>{{ campaign.approver }}</td>
</tr>
<tr ng-repeat-end ng-show="campaign.showDetails">
Your can dispalay here rest of the information from campaign object.
</tr>
</tbody>
You could seed the example http://codepen.io/anon/pen/beNbwp
Ok, so if I understand your problem, the solution could be to use ng-click :
(considering campaign.name unique for each campaigns)
<tr ng-repeat="campaign in campaigns | filter: query" contenteditable="true" ng-click="doSmth(campaign.name)">
<td>{{ campaign.name }}</td>
<td>{{ campaign.type }}</td>
<td>{{ campaign.approver }}</td>
</tr>
Then in your controller :
$scope.doSmth = function(campName) {
$state.go(campName); //example
};
Another solution, using ui-sref :
Considering you define a url: '/folder/campaignPage?name' in your $stateProvider.
<tr ng-repeat="campaign in campaigns | filter: query" contenteditable="true" ui-sref="campaignPage({ name: campaign.name })">
<td>{{ campaign.name }}</td>
<td>{{ campaign.type }}</td>
<td>{{ campaign.approver }}</td>
</tr>
Another way u can do it easily if u also create a button in ng-repeat like
<td><input type="button" value="select" class="btn btn-info btn-sm" ng-click="populate(campaign )" /></td>
And then
$scope.populate = function (campaign) {
$scope.Name = campaign.Name;
}
It's simple to use.

Set <tr> color on change of angular array

I am using angularJS. I've got this code in my view layout:
<table>
<tr ng-repeat="car in cars">
<td>{{ car.name }}</td>
<td>{{ car.speed }}</td>
<td>{{ car.length }}</td>
</tr>
</table>
At some point my angular-controller changes one of $scope.cars object.
The point is: I want to change a color of <tr> in which changed car stays when that happens.
The question is: How can I do it?
You can flag it as changed.
Set car.changed to true when you've changed it
$scope.car[0].changed = true;
And conditionally apply the changedClass with a background-color.
<table>
<tr ng-repeat="car in cars" ng-class="{'changedClass': car.changed}">
<td>{{ car.name }}</td>
<td>{{ car.speed }}</td>
<td>{{ car.length }}</td>
</tr>
</table>

Show <td> border in html only when there's a data in HTML using jQuery or Javascript?

I have a table like this in HTML:
<table class="table table-bordered">
<thead>
<tr>
<th>Tag</th>
<th>Time Code</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ choice.tag1 }}</td>
<td>{{ choice.time_code1 }}</td>
</tr>
<tr>
<td>{{ choice.tag2 }}</td>
<td>{{ choice.time_code2 }}</td>
</tr>
<tr>
<td>{{ choice.tag3 }}</td>
<td>{{ choice.time_code3 }}</td>
</tr>
<tr>
<td>{{ choice.tag4 }}</td>
<td>{{ choice.time_code4 }}</td>
</tr>
<tr>
<td>{{ choice.tag5 }}</td>
<td>{{ choice.time_code5 }}</td>
</tr>
<tr>
<td>{{ choice.tag6 }}</td>
<td>{{ choice.time_code6 }}</td>
</tr>
<tr>
<td>{{ choice.tag7 }}</td>
<td>{{ choice.time_code7 }}</td>
</tr>
<tr>
<td>{{ choice.tag8 }}</td>
<td>{{ choice.time_code8 }}</td>
</tr>
<tr>
<td>{{ choice.tag9 }}</td>
<td>{{ choice.time_code9 }}</td>
</tr>
<tr>
<td>{{ choice.tag10 }}</td>
<td>{{ choice.time_code10 }}</td>
</tr>
</tbody>
</table>
The variable that I passed using {{}} most of the times are empty. Even if's it empty td is shown. I don't cut off the space and don't show any td's if they are empty. For example sometimes I may have data up to 3rd td only thus I want to show only up to 3rd td. Is this possible using jQuery or JavaScript?
you can try this may be it will you help you:
$(document).ready(function(){
$(".table tbody td").each(function(){
if($(this).html()=="")
{
$(this).hide();
}
});
});
Try like
{% if(!empty{choice.time_code1 }) %}
<tr>
<td>{{ choice.tag1 }}</td>
<td>{{ choice.time_code1 }}</td>
</tr>
{% end:if %}
If you want to hide td if they are empty and entire tr if both td are empty try this:
$(function(){
$(".table tbody tr").each(function(){
var empty = true;
$(this).find("td").each(function(){
if ($(this).html()=="")
$(this).hide();
else
empty = false;
});
if (empty){
$(this).hide();
}
});
});
Or you could run a for loop in javascript

Categories