Search data on click event of button using smart table

Question

I am very new to the smart table. I have gone through its documentation on Smart Table. But the I haven't found how to bind data on click event in smart table? Code is very big but I am trying to post it here.


  
    
      
      Search
    
    
  
  

  
    
      
        
          Page URL
        
      
      
        
          Anchor Text
        
      
      
        
          External
Links
        
      
      
        
          Internal
Links
        
      
      
        
          Type
        
      

    
  
  
    
      
        
          Backlink source: {{ backlink.SourceUrl }}

          Link description: {{ backlink.SourceTitle }} 

          My URL: {{ backlink.TargetUrl }}

        
      
      
        
          {{ backlink.SourceAnchor }}
        
      
      
        
          {{ backlink.ExternalLinksCount }}
        
      
      
        
          {{ backlink.InternalLinksCount }}
        
      
      
        
          No Follow
        
      
    
    
      No backlinks exists for selected location.

and my js code is here.

module.controller('backlinksController', [
  '$scope','$filter', 'mcatSharedDataService', 'globalVariables', 'backlinksService',
  function ($scope,$filter, mcatSharedDataService, globalVariables, backlinksService) {

    $scope.dataExistsValues = globalVariables.dataExistsValues;

    var initialize = function () {
      $scope.backlinks = undefined;
      $scope.sortOrderAsc = true;
      $scope.sortColumnIndex = 0;

    };

    initialize();

    $scope.itemsByPage = 5;

    var updateTableStartPage = function () {
      // clear table before loading
      $scope.backlinks = [];
      // end clear table before loading

      updateTableData();
    };

    var updateTableData = function () {

      var property = mcatSharedDataService.PropertyDetails();
      if (property == undefined || property.Primary == null || property.Primary == undefined || property.Primary.PropertyId <= 0) {
        return;
      }
      var params = {
        PropertyId: property.Primary.PropertyId
      };

      var backLinksDataPromise = backlinksService.getBackLinksData($scope, params);

      $scope.Loading = backLinksDataPromise;
    };

    mcatSharedDataService.subscribeCustomerLocationsChanged($scope, updateTableStartPage);
  }
]);
module.filter('myStrictFilter', function ($filter) {
  return function (input, predicate) {
    return $filter('filter')(input, predicate, true);
  }
});

But It is working fine with the direct search on textbox. but according to the requirement I have to perform it on button click. Your suggestions and help would be appreciated. Thanks in advance.

svarog · Accepted Answer

You can search for a specific row by making some simple tweaks.

add a filter to the ng-repeat, and filter it by a model that you will insert on the button click, like so:
in your view, add that model (using ng-model) to an input tag and define it in your controller
then pass the value to the filter when you click the search button

here's a plunk that demonstrates this

you can use filter:searchQuery:true for strict search

EDIT:

OK, so OP's big problem was that the filtered values wouldn't show properly when paginated, the filter query is taken from an input box rather then using the de-facto st-search plug-in, So I referred to an already existing issue in github (similar), I've pulled out this plunk and modified it slightly to fit the questioned use case.

Search data on click event of button using smart table

Answers (1)

Related Questions