Search in Table by using model filter

Click here and follow my SAP UI5/FIORI snippets and information Page

I have made Table search example by using model filter,below I have shown Application Structure,View Part,Controller Part,JSON and Result.Go through it and please let me know in case of any issue/doubt.

Application Structure

View Part

<mvc:View controllerName="SearchByFilters.controller.S1" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc"

displayBlock="true" xmlns="sap.m" xmlns:l="sap.ui.layout">

<App>

<pages>

<Page title="{i18n>title}">

<content>

<l:Grid defaultSpan="L12 M12 S12">

<Table items="{/Result}" id="tabId">

<headerToolbar>

<Toolbar>

<ToolbarSpacer/>

<SearchField id="searchId" placeholder="Search by Name and E-mail" search="handleChangeSearch"/>

</Toolbar>

</headerToolbar>

<columns>

<Column>

<ObjectIdentifier title="Name"/>

</Column>

<Column>

<ObjectIdentifier title="Mobile"/>

</Column>

<Column>

<ObjectIdentifier title="E-mail"/>

</Column>

<Column>

<ObjectIdentifier title="Address"/>

</Column>

</columns>

<ColumnListItem>

<cells>

<Text text="{name}"/>

<Text text="{mobile}"/>

<Text text="{mail}"/>

<Text text="{address}"/>

</cells>

</ColumnListItem>

</Table>

</l:Grid>

</content>

</Page>

</pages>

</App>

</mvc:View>

Controller Part

sap.ui.define([

"sap/ui/core/mvc/Controller"

], function(Controller) {

"use strict";

return Controller.extend("SearchByFilters.controller.S1", {

onInit: function() {

//JSON model....

var json = new sap.ui.model.json.JSONModel("model/record.json");

//Setting model to view...

this.getView().setModel(json);

},

// When users click on search button then this method will call....

handleChangeSearch: function(oEvent) {

var tableId = this.byId("tabId");

var inputValue = oEvent.getParameter("query");

var trimValue = inputValue.trim();

var filterArr = [];

var items = tableId.getBinding("items");

var filter1 = new sap.ui.model.Filter("name", sap.ui.model.FilterOperator.Contains, trimValue);

var filter2 = new sap.ui.model.Filter("mail", sap.ui.model.FilterOperator.Contains, trimValue);

filterArr = [filter1, filter2];

var finalFilter = new sap.ui.model.Filter({

filters: filterArr,

and: false

});

items.filter(finalFilter);

}

});

});

 record.json

{
"Result": [{
"name": "Vikas Singh",
"mobile": 8828054345,
"mail": "info.vikaskumar41@gmail.com",
"address": "Bihar,INDIA"
}, {
"name": "Kunal Singh",
"mobile": 3434343456,
"mail": "info.kumalkumar@gmail.com",
"address": "Bihar,INDIA"
}, {
"name": "Rajeev Singh",
"mobile": 4568235678,
"mail": "info.Rjeeev@gmail.com",
"address": "Bihar,INDIA"
}, {
"name": "Senjeev Singh",
"mobile": 2345678765,
"mail": "senjeev41@gmail.com",
"address": "Bihar,INDIA"
}

]
}

Result

     Searched by vika

    Searched by info