Develop Reference

Single query per pagination? datatable.js laravel

Currently I have a table called tblOrders
with the query like this
public function getIndex()
{
$cart = Cart::orderby('cart_date','DESC')
->orderby('cart_no','DESC')
->select('id','cart_no','client_id','cart_title')->limit(1000)->get();
return View::make('_admin.orders.orders', compact('cart'));
}
on my blade file I have this datatable.js
<table id="table-order" class="parennt-table uk-table-hover">
<thead>
<tr>
<th>id</th>
<th>cart_no</th>
<th>cart_title</th>
<th>cart_date</th>
</tr>
</thead>
<tbody>
#if(count($orderData))
#foreach ($orderData as $field)
<tr>
<td>{{ $field->id }}</td>
<td>{{ $field->cart_no }}</td>
<td>{{ $field->cart_title }}</td>
<td>{{ date('M j, Y',strtotime($field->cart_date)) }}</td>
</tr>
#endforeach
#endif
</tbody>
and my js like this
<script>
oTable = $('#table-order').DataTable({
"order": [[ 0, 'desc' ]]
});
</script>
This datatable loads 8k rows. but needed to limit it by 1000 rows
How can I load only 20 rows per page? and query the next 1 when user tries to click specific pagination

You should use pagination, the first parameter passed to the paginate() function is the number of results returned.
public function getIndex()
{
$cart = Cart::orderby('cart_date','DESC')
->orderby('cart_no','DESC')
->select('id','cart_no','client_id','cart_title')
->paginate(50);
return View::make('_admin.orders.orders', compact('cart'));
}
However, I don't suggest you to use such a high number as 1000 but use more reasonable numbers to reduce the page loading and rendering time.
Anyway, using DataTables I suggest you to install this package yajra/laravel-datatables

Angular multiple $http via json api

I am currently on a project that requires me to use angular to call in JSON data from a Rest API.
I am currently only able to pull in one table from MySQL DB. I am required to pull in 3 tables from 1 DB and display data from the tables in one table view on the client side.
3 APIs available via my restful service.
rest/api.php/players
rest/api.php/groups
rest/api.php/teams
The code I have tried and tested will not work, but the below code is a working version of a single DB table.
the HTML:
<div ng-app="myApp" ng-controller="customersCtrl">
<button ng-click="myFunc()">Click Me!</button>
<div ng-show="showMe">
<table>
<tr ng-repeat="x in myData">
<td>{{ x.TeamID }}</td>
<td>{{ x.TeamName }}</td>
<td>{{ x.TeamGoals }}</td>
</tr>
</table>
</div>
</div>
And the angular:
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$scope.showMe = false;
$scope.myFunc = function() {
$http.get("rest/api.php/teams").then(function (response) {
$scope.myData = response.data.teams;
});
$scope.showMe = !$scope.showMe;
}
});

how to get the result of two controller on ng-repeat

I want to get the values of the two object in thesame ng-repeat
$http.get('/api/PreviewPayroll').success(function (data){
//alert(data[0].empID);
$scope.allowance = data;
});
$http.get('/api/Deduction').success(function (data){
//alert(data[0].empID);
$scope.Deduction = data;
});
<tr ng-repeat="item in allowance && ng-repeat="value in Deduction">
<td>{{ item.empID }}</td>
<td>{{ value.empID }}</td>
</tr>
how can I get the two scope object on thesame ng-repeat

So you will want to combine the data.
You can use $q.all(promises):
var promise1 = $http.get('/api/PreviewPayroll');
var promise2 = $http.get('/api/Deduction');
$q.all([promise1, promise2]).then(function (results) {
var allowances = results[0];
var deductions = results[1];
var combinedList = /* some combination logic */;
});
By using $q.all() you are ensuring you have both lists of data before trying to combine anything. You can easily play around with this to get the desired effect. For example, if you don't care if the other list isn't available.
Then you can use the ng-repeat in order to iterate over that new combined list:
<tr ng-repeat="item in combinedList">
<td>{{ item.allowance.empID }}</td>
<td>{{ item.deduction.empID }}</td>
</tr>
The sub properties allowance and deduction are based on your combined list.
However
It is in my honest opinion that, the server side gives you the data in the format you need to display it in. (i.e. the business logic remains server side in a controlled environment). I believe the view should only deal with view logic, like button actions etc..
But this is my opinion, and is what I find easiest.
Another note
I prefer to also keep the view logic in the JavaScript, hence why I combine the data there. Rather than trying to do some overly complicated angular expression in the HTML.

You could either have a nested ng-repeat and also combine the two objects into one.
<table>
<tbody ng-repeat="row in mainCombinedObject">
<tr>
<th>{{row.empID}}</th>
</tr>
<tr ng-repeat="sub in row.subObject">
<td>{{sub.empID}}</td>
</tr>
</tbody>
</table>

Combine $scope.allowance and $scope.Deduction to one list of objects "combined" then do your ng-repeat:
<tr ng-repeat="c in combined">
<td>{{ c.someField }}</td>
<td>{{ c.someOtherField }}</td>
</tr>

You can't do that in such way! If your allowance and Deduction have the same size you have to mix them in the collection like this:
var array = [
{ allowance: value1, Deduction: value2},
{ allowance: value3, Deduction: value4},
...
];
and them use it in the view:
<tr ng-repeat="item in array">
<td>{{ item.allowance.empID }}</td>
<td>{{ item.Deduction.empID }}</td>
</tr>

ng-repeat not updating after model changed

So we're developing this angular app with a firebase backend. I am having trouble with this particular function we're implementing. Basically what it does is every time a different option is selected, the showData() function fires to retrieve the relevant data from firebase (and it works). The problem is that the ng-repeat only updates on the first selection change. Successive selection changes are not reflected in the ng-repeat (although the data is retrieved and thus, the model changed).
View:
<div class="container" ng-controller="dataController">
...
<select ng-model="selectedOption" ng-change="showData()">
<option ng-repeat="entry in transactions" ng-value="entry.serial">{{ entry.serial }}</option>
</select>
</div>
<div class="col-md-9">
<table class="table table-hover table-striped table-condensed">
...
<tbody>
<tr ng-repeat="entry in dataHistory">
<td>{{ entry.id }}</td>
<td>{{ entry.timestamp | date:"yyyy MMM dd 'at' h:mm:ssa" }}</td>
<td>{{ entry.amount }}</td>
</tr>
</tbody>
</table>
</div>
Controller:
...
.controller('dataController', ['$scope', '$firebaseArray', function($scope, $firebaseArray) {
...
$scope.showData = function() {
$scope.dataHistory = [];
transfersRef.orderByChild('serial').equalTo($scope.selectedOption).on('child_added', function(snap) {
transactionsRef.orderByKey().equalTo(snap.val().transactionID).on('child_added', function(data) {
var entry = {};
entry = data.val();
entry.id = data.key();
usersRef.child(entry.fromUserId).child('name').once('value', function(nameSnap) { entry.fromUsername = nameSnap.val(); });
usersRef.child(entry.toUserId).child('name').once('value', function(nameSnap) { entry.toUsername = nameSnap.val(); });
console.log('entry: \n' + entry);
$scope.dataHistory.push(entry);
});
});
};
}])
...

Try applying $scope.$apply() after $scope.dataHistory.push(entry); in your code.
This is because your array updating code maybe outside the angular digest cycle.

AngularJS sorting by time difference

I want to enable sorting by each of my table fields. I have one column which shows how many minutes it took to work on project, but sorting by this field doesn't work properly.
<table>
<th >Company</th>
<th>Time difference<th />
<tr ng-repeat="task in tasks | orderBy:sortBy">
<td >{[{ task.company_name }]}</td>
<td >{[{ timediff(task.time_start,task.time_stop) }]}</td>
</tr>
</table>
timediff function:
$scope.timediff = function(start, end){
var start = moment(start);
var end = moment(end);
var diff = end.diff(start,'minutes',true);
return (diff/60).toPrecision(3);
};
Plunker: http://plnkr.co/edit/vdkfNkgpdLUp9RgZ1IvO?p=preview

Simple fix, just need to assign the function to a parameter
<tr>
<th>Company</th>
<th>Time difference</th>
</tr>
<tr ng-repeat="task in tasks | orderBy:sortBy">
<td>{{ task.company_name }}</td>
<td>{{ task.timediff = timediff(task.time_start,task.time_stop) }}</td>
</tr>
Here is an updated plunker showing this as well as adding a reverse sort.

There is a simpler way for the custom function to work. I edited the dataset a bit to make the switch between "Company" and "Time difference" a bit more clear.
Option 1 (DEMO):
If the property names don't change you can do the following :
$scope.timediff = function(task){
var start = moment(task.time_start);
var end = moment(task.time_stop);
var diff = end.diff(start,'minutes',true);
return (diff/60).toPrecision(3);
};
And in your html assign the function to your sortBy variable:
<th >Company</th>
<th>Time difference</th>
<tr ng-repeat="task in tasks | orderBy:sortBy">
<td >{{ task.company_name }}</td>
<td >{{ timediff(task)}}</td>
</tr>
Angular automatically passes the current item into the function defined in orderBy.
Option 2 (more flexible) (DEMO):
If you want to define the property names on the fly you can return another function:
$scope.timediff = function(name1, name2){
return function(item) {
var start = moment(item[name1]);
var end = moment(item[name2]);
var diff = end.diff(start,'minutes',true);
return (diff/60).toPrecision(3);
}
};
And give it the two property names:
<th >Company</th>
<th>Time difference</th>
<tr ng-repeat="task in tasks | orderBy:sortBy">
<td >{{ task.company_name }}</td>
<td >{{ timediff('time_start', 'time_stop')(task)}}</td>
</tr>