How to add Search using ngTable - angularjs

Question

My current code is pulling data using JSON. I can see my data load correctly on ngTable.
How can I add a search box that upon clicking the button, initiates a search and reloads data on my ngTable? I have tried using tableParams.reload() within an ngClick but that doesn't reload my data.
Controller
app.controller('ModelPagingCtrl', function ($scope, ngTableParams, $filter,
$http, DataService) {
$scope.doSearch = function () {
DataService.getModels($scope.SearchText).then(function (data) {
console.log("GetModels Worked");
$scope.data = data.d;
$scope.tableParams = new ngTableParams({
page: 1,
count: 10,
filter: {
ModelNum: ''
},
sorting:
{
ModelNum: 'asc'
}
}, {
total: $scope.data.length,
getData: function ($defer, params) {
// use built-in angular filter
var filteredData = params.filter() ?
$filter('filter')($scope.data, params.filter())
: $scope.data;
var orderedData = params.sorting() ?
$filter('orderBy')(filteredData, params.orderBy())
: $scope.data;
params.total(orderedData.length);
$defer.resolve(orderedData.slice((params.page() - 1)
* params.count(), params.page() * params.count()));
}
}, function (error) {
console.log('errror', error);
});
});
Factory/DataService
app.factory('DataService', function ($http, $q) {
return {
getModels: function (Search) {
return $http.post('AngularWithWebServices.aspx/FetchModels',
{ "search": Search }).then(function (response) {
if (typeof response.data === 'object') {
console.log('object found');
return response.data;
} else {
// invalid response
console.log("Invalid Response");
return $q.reject(response.data);
}
}, function (response) {
// something went wrong
console.log("Error Response!");
return $q.reject(response.data);
});
}
};
});
HTML
Search: <input ng-model="SearchText"/>
<button ng-click="doSearch()">Search</button>**<----What goes here?**
<table class="table" ng-table="tableParams" show-filter="true" >
<tr ng-repeat="item in $data" >
<td data-title="'ModelNum'" sortable="'ModelNum'"
filter="{ 'ModelNum': 'text' }">
{{item.ModelNum}}
</td>
<td>
<strong>Year:</strong><p>{{item.Year}}</p>
<strong>Price:</strong><p>{{item.Price}}</p>
<p>{{item.Features}}</p>
</td>
</tr>
</table>

Answer 1

I didn't test this code but it should work for you.
app.controller('ModelPagingCtrl', function ($scope, ngTableParams, $filter, $http, DataService) {
$scope.doSearch = function() {
$scope.tableParams.reload();
}
function search(params)
{
return DataService.getModels($scope.SearchText);
}
$scope.tableParams = new ngTableParams({
page: 1,
count: 10,
filter: {
ModelNum: ''
},
sorting:
{
ModelNum: 'asc'
}
}, {
getData: function ($defer, params) {
//pass params.url() to your search function http://whatever.dev?count=10&page=1&sorting%5Bid%5D=desc
search(params.url()).then(function(data)
{
//you have 2 ways from here
// 1. if you use server side sorting, filtering
params.total(data.length);
$defer.resolve(data);
// 2. if you use client side sorting/filtering
var filteredData = params.filter() ?
$filter('filter')(data, params.filter())
: data;
var orderedData = params.sorting() ?
$filter('orderBy')(filteredData, params.orderBy())
: filteredData;
params.total(orderedData.length);
$defer.resolve(orderedData.slice((params.page() - 1)
* params.count(), params.page() * params.count()));
}
}
}, function (error) {
console.log('errror', error);
});
});