Vahe Vahe - 1 month ago 10
jQuery Question

Sortable Angular Datatables - Fitlerable table renders fine on first load but produces no records on subsequent filters

I have a dataset (rendered in Angular Datatables) that I want to display for items that are categorized by "filterTags".

Each time I run a query I need to have to first fetch new data based on fitlerTag.

The problem is, when I sort data, I keep getting the initial filterTag name as the criteria to filter and the dataset is not updated.

How do I get the table respond when clicking the top two filterTag buttons as seen in the plunkr?

Table Repeat Code - Data Set is based on a fitlerTag

ng-repeat="data in Data| filter:{ TagName: filterTag, TagId: filterId} | filter:searchText"


Data Source Fetch Function

var getData= function(){
$scope.Data= service.getData().query();
}


Code to call getData() called on visit to page

if(path == "/some/path"){
getData();
}


EDIT

Please see plunkr

https://plnkr.co/edit/Kzw3zO673ORPY1xlWw9p?p=preview

As of now, I can't figure out why

$scope.filterTag = "TYPE 1";


or

$scope.filterTag = "TYPE 2";
works

But the following call
produces no results in the table, empty table is shown in my plunkr example.

$scope.selectTag = function(tag){
$scope.filterTag = tag;
}

Answer

An upgrade to 1.10.12 (datatables) fixed the issue.

//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js

I also had to update the filter to be a custom filter instead of inline as I had in my question.

  //Initial Value
$scope.filterTag = "TYPE 1";

$scope.dtInstance = {};

  $scope.filteredData = $scope.items.filter(function(r) {
    var tag = (typeof $scope.filterTag === undefined)? "TYPE 1"  : $scope.filterTag;
    var show = r.TagName == tag;
    return show;
});



 var update = function(){
  $scope.filteredData = $scope.items.filter(function(r) {
     var tag = (typeof $scope.filterTag === undefined)? "TYPE 1"  : $scope.filterTag;
    var show = r.TagName == tag;
    return show;
});
}

Working example

https://plnkr.co/edit/NI6ixwlUT82s1MpBvMRg?p=preview

Comments