I have a directive that renders a table in Angular. The table has also sorting by column header. When the page loads everything works fine, but when I load more rows through a service on the table the sorting breaks. The directive initializes a sorting factory with table rows the first time, but after i don't see it updating or being called.
var sorter = new DashboardContactSorterFactory($scope.dashboardContactData),
I update the contacts for the table on my controller when i select a dropdown value.
Any help on how this sorter can be updated? i tried to do a $watch on the data but it did not work.
Related
I am using data table in my angular js Application as angular Directive and passing data to it using "=" scope.When remove row using row.remove.draw() scroller moves to top of table.
This is my code:
var row = $scope.table.row($(this).parents('tr'));
row.remove.draw();
I checked it further even if i comment row.remove.draw() its removes row.So i guess its due to table redraw with new data.Because i use two way binding on data.
Data table Initialization:
$('#example')DataTable({"aaData": $scope.list,});
Directive Call:
<data-table list="data"></data-table>
Scope of list in directive:
list:"="
You can use row.remove.draw(false); to stay on the same page. Checkout the draw() API doc.
I'm using ngParams for mytable filtering and sorting. Now, in a case, I've two paginated content on a same page and same controller (but having different methods). Every pagination content is assigned to data variable. Thus, the new result is overriding the previous data (means the old paginated content, got from the first method is overrided by the new paginated content, got from the next method).
I am using smart-table plugin for AngularJS to display a collection information. I have integrated the same with my backend API using the stPipe function which is triggered whenever a search or sort operation is performed. However, I want to place some buttons above the table which act as a filter. When I click on either of these buttons, I want to trigger the stPipe function of smart table and hit the backend API to fetch the filtered results. How can I accomplish this ?
The solution is to put the table state in a controller variable.
Everytime the callServer function is called, it will update this variable. This way, you will be able to refresh the table.
In this code, the callServer would be your stPipe function and your external button would call the refreshGrid() function.
this.tableState = null;
this.callServer = function callServer(tableState) {
ctrl.tableState = tableState;
...
}
this.refreshGrid = function(){
ctrl.callServer(ctrl.tableState);
}
I needed this before and I have posted the solution in this question: Smart table - angularJs - ajax refresh table
Say I have an ng-repeat directive and it displays some data in the table.
When I press a button I send the $http API call to the server and it responds with the new data which is displayed in the same table with a little delay.
I would like ng-repeat to re-render the table view only after this new data has finished loading. But as of now I can see how ng-repeat shows an empty table for a moment and only after that the new data is fetched.
So the question is how does one make Angular update the ng-repeat only on a condition? The event that is fired when the data has finished loading can be an example of such condition.
P. S. I tried prefixing my array with ::, but of no help. It prevented Angular from instant updating the view, but I don't know the way to force the update when I want to.
After columns in grid reordered I need to update data in my controller to have it in actual order. I can use ngGridEventColumns event but how will I know which table send it (I have multiple tables)?
I get it. After ngGrid initialized it's options populated with gridId which can be compared with id that comes in event:
$scope.gridOptions.gridId === e.targetScope.gridId