how do I add a custom search in mui-datatables which can be used for data fetched from API. can u please provide me a working example? I tried using
customSearch: (searchQuery, currentRow, columns) => {
let isFound = false;
currentRow.forEach(col => {
if (col.toString().indexOf(searchQuery) >= 0) {
isFound = true;
}
});
return isFound;
},
in options.
note: in console, I got react_devtools_backend.js:6 Server-side filtering is enabled, hence custom search will be ignored.
You're probably looking for something like this:
https://github.com/gregnb/mui-datatables/blob/master/examples/serverside-filters/index.js
Or this (debounceSearchRender plugin):
https://github.com/gregnb/mui-datatables/blob/master/examples/large-data-set/index.js
Your backend is going to return the results, so your custom search needs to be defined in the server.
Related
currently I'm trying to filter and search an array in Ionic v5. But I don't know how to combine these two criteria.
I have a page (room-overview), which displays all objects of a room-array. I get these objects from a "data service", which reads a JSON file.
Part of the room-overview.ts-file:
ionViewDidEnter() {
this.setSearchedItems('');
this.searchControl.valueChanges
.pipe(debounceTime(300))
.subscribe(search => {
this.searching = false;
this.setSearchedItems(search);
});
}
onSearchInput() {
this.searching = true;
}
setSearchedItems(searchTerm) {
this.rooms = this.dataService.searchItems(searchTerm);
}
On the room-overview page, there is a search bar, which can be used to search the individual objects. This search bar calls the onSearchInput()-method.
<ion-searchbar [formControl]="searchControl (ionChange)="onSearchInput()">
For that, I have a filter/search-service that gives me all objects which fits the search term. "items" is an array of all room-objects.
searchItems(searchTerm) {
return this.items.filter(item => {
return item.name.toLowerCase().indexOf(searchTerm.toLowerCase()) > -1;
});
}
Besides the search, it should be possible to filter by certain criteria (for example, whether a room is in a certain building or not). This filter possibility is solved via a modal page that passes the values to the room-overview page when it will be closed.
Either the search or the filtering can be done individually, but I do not know how to combine both. I think the "searchItem()"-method should not only filter on the room-object array. It should be able to filter before and use only the filtered array.
I hope someone can help me :-)
Perhaps something like this?
searchAndFilterItems(searchTerm) {
const filteredItems = this.items.filter(item => {
// Apply filters
});
return filteredItems.filter(item => {
return filteredItems.name.toLowerCase().indexOf(searchTerm.toLowerCase()) > -1;
});
}
Hi am using UIgrid in an angularjs project and when I call the method gridApi.selection.getSelectedRows() to get the selected rows it returns an array with all the rows but in a random order. Ideally I want to get the rows in the same order they were selected (as if gridApi.selection.getSelectedRows() is backed by a queue) . Any idea how to achieve this please ?
This link to plunker shows the issue http://plnkr.co/edit/gD4hiEO2vFGXiTlyQCix?p=preview
You can implement the queue by yourself. Something like
$scope.gridOnRegisterApi = function(gridApi) {
gridApi.selection.on.rowSelectionChanged($scope, function(row) {
var selections =gridApi.selection.getSelectedRows();
// add sorted
selections.forEach(function(s){
if ($scope.mySelections.indexOf(s) === -1) {
$scope.mySelections.push(s);
}
});
// remove the ones that are not selected (use for to modify collection while iterating)
for (var i = $scope.mySelections.length; i >0; i--) {
if (selections.indexOf($scope.mySelections[i]) === -1) {
$scope.mySelections.splice(i, 1);
}
}
console.log($scope.mySelections);
row.entity.firstSelection = false;
if (row.isSelected) row.entity.firstSelection = (gridApi.selection.getSelectedCount() == 1);
});
};
I think there is a bug with that version of angular I was using there , if you upgrade the version in the plnkr to 1.6.1 it will behave as expected
I have an array with two keys like id and selected values its like below
$scope.overview =[{'id':1,'selectedvalues':[a,e,o]},{'id':2,'selectedvalues':[aa,ee,oo]},{'id':3,'selectedvalues':[aaa,eee,ooo]}];
I need to update after i am adding values 'h' for id =1 i need to update my array like
$scope.overview =[{'id':1,'selectedvalues':[a,e,o,h]},{'id':2,'selectedvalues':[aa,ee,oo]},{'id':3,'selectedvalues':[aaa,eee,ooo]}];
there is any other way in anuglar js currently i am handling in javascript like
if (this.selectedCategoryOverview.length > 0) {
for (var i in updateDropown) {
if (catid == updateDropown[i].id){
overviewUpdate = false;
updateDropown[i].selectedValues = tempSelectValuesArray;
}
}
}
if(overviewUpdate){
this.selectedCategoryOverview.push({
'id': catid,
'selectedValues': tempSelectValuesArray
});
}
Try to use array.find to find existing overview by id. If find method returns a value - just update the value, and add the value otherwise.
In pseudocode:
foundObject = array.find()
if(foundObject)
update()
else
pushNew()
It would not make much difference if you do it angular way or JS way unless DOM is involved, so here is one angular way which is nothing but cloated JS way,
function pushNewArrayValue(value){
angular.forEach($scope.overview,function(arr,i){
arr.selectedValue.push(value);
})
}
pusheNewArrayValue('h')
Try using filter,
var found;
if (this.selectedCategoryOverview.length > 0) {
found = $filter('filter')($scope.updateDropown, { id: catid });
if (found.length)
$scope.updateDropown = tempSelectValuesArray;
}
if (found && found.length) {
this.selectedCategoryOverview.push({
'id': catid,
'selectedValues': tempSelectValuesArray
});
}
i am learning angular. so i am not good in angular. i am showing data in tabular format with the help of ng-repeat. i have one dropdown and textbox for filter data showing by ng-repeat. fields name are populated in dropdown. so user will select field name and put corresponding value in textbox and search will perform accordingly and data will be shown.
my code is working partially. basically some kind of problem is there in SearchList function. the problem is when trying to search by id then SearchList is not working properly. so looking for help. what to fix in the code. my js fiddle https://jsfiddle.net/tridip/rnoo3bqc/6/
$scope.SearchList = function(row) {
if ($scope.selectedFieldName && $scope.searchText) {
var propVal = row[$scope.selectedFieldName.toLowerCase()];
if (propVal) {
return propVal.toUpperCase().indexOf($scope.searchText.toUpperCase()) > -1;
} else {
return false;
}
}
return true;
};
working version url
https://jsfiddle.net/tridip/rnoo3bqc/8/
You need to convert the id's from number to string, e.g. by concatenating an empty string:
var propVal = row[$scope.selectedFieldName.toLowerCase()] + '';
the problem was with id that's a numeric field and hence toUpperCase() was failing for it.
if (propVal) {
propVal.toString().toUpperCase().indexOf($scope.searchText.toUpperCase()) > -1;
} else {
return false;
}
i'm trying to filter a collection which has models with some nested object. Unfortunately, my result are always empty.
So my models returned in the collection are build like this:
My goal is simple:
I have a view with a list of tag and a content view with all the questions. When a user click on tag, for example, "c#", i want to filter my collection to just return questions with tag "c#"
Before i was doing a fetch on my server and it was working fine, but it was not optimize.
I already have a collection with all the questions so why make a new call, a filter is a better solution i think.
But i didn't succeded with my filter and i don't know if it's possible to do. For now i put my filter in my router because it's more easy to test.
i can't make a filter like this because i have an array of object
getQuestionsByTags: function(query) {
var test = this.questionsCollection.filter(function(model) {
return model.attributes.tags.name == query;
})
console.log('result');
console.log(test);
},
So i was thinking to make a loop but my result is always an empty array.
getQuestionsByTags: function(query) {
var test = this.questionsCollection.filter(function(model) {
_.each(model.attributes.tags, function(tag) {
return tag.name == query;
})
})
console.log('result');
console.log(test);
},
It's maybe simple, but i don't know what to do.
Thanks in advance :)
i've just found a solution that work.
getQuestionsByTags: function(query) {
var flag;
var test2 = this.questionsCollection.filter(function(model) {
flag = false;
_.each(model.attributes.tags, function(tag) {
if(tag.name == query) {
flag = true;
}
})
if(flag) {
return model.attributes;
}
})
console.log('result');
console.log(test2);
},
i put a flag. If he turn true inside the loop, the model has this tag so i return it.
I think it's not very conventional, so if someone have another solution, feel free to post it :)