JSFiddle - React, Tailwind, and code Playground

by Rijo R

HTML

<div class="container" ng-app="myApp" ng-controller="myCtrl"><div class="row" >
<div style="float:right"><input type="text" ng-model="search" placeholder="Search"> </div>
<p>&nbsp;</p>
<form action="print_specific_serial.php" method="post">
<table class="table"><tr><th>Sl No:</th><th><span ng-click="orderByFun('-tech_pak')">Tech pak</span></th><th ng-click="orderByFun('-measure')">Measure(M)</th><th ng-click="orderByFun('-unit')">Unit</th><th ng-click="orderByFun('-bulk_qty')">Bulk Qty</th><th ng-click="orderByFun('-price')">Unit Price</th><th ng-click="orderByFun('-pack_charge')">Pack Charge</th><th>Label</th><th>Elastic</th><th>Button</th><th>Thread</th><th>Stiching</th><th>Marketing Charge</th><!--<th>Sales Cost</th>--><th>Total</th><th></th></tr>
<tbody>
<tr ng-repeat="single_style in all_value | orderBy: myOrder:reverse | filter:search | filter:codeStyle">
				<td>{{$index + 1}}</td>
				<td>{{single_style.tech_pak}}</td>
				<td>{{single_style.measure}}</td>
				<td>{{single_style.unit}}</td>
				<td>{{single_style.bulk_qty}}</td>
				<td>{{single_style.price}}</td>
				<td>{{single_style.pack_charge }}</td>
				<td>{{single_style.label}}</td>
				<td>{{single_style.elastic}}</td>
				<td>{{single_style.button}}</td>
				<td>{{single_style.thread}}</td>
				<td>{{single_style.stiching}}</td>
				<td>{{single_style.markt_price}}</td>
				<td>{{parseInt(single_style.thread) + parseInt(single_style.stiching)}} </td>
<td>{{parseInt(single_style.thread) * parseInt(single_style.stiching)}}</td>
				<td>{{single_style.measure * single_style.bulk_qty * single_style.price+single_style.pack_charge+single_style.label+ single_style.elastic +single_style.button +single_style.thread +single_style.stiching +single_style.markt_price}}</td>
				
				<td><span class="glyphicon glyphicon-trash" ng-click="deleteFun(single_style.id)"></span></td>
				</tr>
			</tbody>


</table>
</form>
</div></div>

JavaScript

var app = angular.module('myApp', []);
	app.controller('myCtrl', function($scope, $http) {
		
		$http.get("http://www.revashon.com/sticker/admin_get_view.php?action=print_all_fabric_cost")
		.then(function (response) {
		$scope.all_value = response.data;
		console.log(response.data);
		});
		$scope.myOrder = 'id';
		$scope.reverse = true;
			$scope.orderByFun = function(x) {
				$scope.reverse = ($scope.myOrder === x) ? !$scope.reverse : false;
				$scope.myOrder = x;
			}
		$scope.deleteFun = function(xz) {
			var r = confirm("Are you sure you want to delete!");
			if (r == true) {
				$.post( "admin_get_view.php", { id: xz, action : 'delete_cost' }).done(function( data ) {
				location.href = 'fabric-cost-view.php'
				});
			} 
		}
	});