使用智能 table 搜索按钮点击事件的数据

Question

我对智能很陌生table。我已经阅读了它在 Smart Table 上的文档。但是我还没有找到如何在智能 table 中绑定点击事件的数据？代码非常大，但我正在尝试 post 这里。

<div class="table-scroll-x" st-table="backlinksData" st-safe-src="backlinks" st-set-filter="myStrictFilter">
  <div class="crawlhealthshowcontent">
    <div class="crawlhealthshowcontent-right">
      <input type="text" class="crserachinput" placeholder="My URL" st-search="{{TargetUrl}}" />
      <a class="bluebtn">Search</a>
    </div>
    <div class="clearfix"></div>
  </div>
  <br />
  <div class="table-header clearfix">
    <div class="row">
      <div class="col-sm-6_5">
        <div st-sort="SourceUrl" st-skip-natural="true">
          Page URL
        </div>
      </div>
      <div class="col-sm-2">
        <div st-sort="SourceAnchor" st-skip-natural="true">
          Anchor Text
        </div>
      </div>
      <div class="col-sm-1">
        <div st-sort="ExternalLinksCount" st-skip-natural="true">
          External<br />Links
        </div>
      </div>
      <div class="col-sm-1">
        <div st-sort="InternalLinksCount" st-skip-natural="true">
          Internal<br />Links
        </div>
      </div>
      <div class="col-sm-1">
        <div st-sort="IsFollow" st-skip-natural="true">
          Type
        </div>
      </div>

    </div>
  </div>
  <div class="table-body clearfix">
    <div class="row" ng-repeat="backlink in backlinksData" ng-if="backlinks.length > 0">
      <div class="col-sm-6_5">
        <div class="pos-rel">
          <span class="display-inline wrapWord" tool-tip="{{ backlink.SourceUrl }}"><b>Backlink source:</b> <a target="_blank" href="{{backlink.SourceUrl}}">{{ backlink.SourceUrl }}</a></span><br />
          <span class="display-inline wrapWord" tool-tip="{{ backlink.SourceTitle }}"><b>Link description:</b> {{ backlink.SourceTitle }}</span> <br />
          <span class="display-inline wrapWord" tool-tip="{{ backlink.TargetUrl }}"><b>My URL:</b> <a target="_blank" href="{{backlink.TargetUrl}}">{{ backlink.TargetUrl }}</a></span><br />
        </div>
      </div>
      <div class="col-sm-2">
        <div class="pos-rel">
          {{ backlink.SourceAnchor }}
        </div>
      </div>
      <div class="col-sm-1">
        <div>
          {{ backlink.ExternalLinksCount }}
        </div>
      </div>
      <div class="col-sm-1">
        <div>
          {{ backlink.InternalLinksCount }}
        </div>
      </div>
      <div class="col-sm-1">
        <div ng-if="!backlink.IsFollow">
          No Follow
        </div>
      </div>
    </div>
    <div class="row" ng-if="backlinks.length == 0">
      No backlinks exists for selected location.
    </div>
  </div>
  <div class="pos-rel" st-pagination="" st-displayed-pages="10" st-template="Home/PaginationCustom"></div>
</div>

我的 js 代码在这里。

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);
  }
});

但是在文本框上直接搜索效果很好。但根据要求，我必须在单击按钮时执行它。您的建议和帮助将不胜感激。提前致谢。

Answer 1

您可以通过一些简单的调整来搜索特定的行。

向 ng-repeat 添加过滤器，并按您将在单击按钮时插入的模型对其进行过滤，如下所示：<tr ng-repeat="row in rowCollection | filter: searchQuery">
在您的视图中，将该模型（使用 ng-model）添加到输入标签并在您的控制器中定义它
然后在单击搜索按钮时将值传递给过滤器

here's a plunk 证明了这一点

您可以使用filter:searchQuery:true进行严格搜索

编辑：

好的，所以 OP 的大问题是分页时筛选值无法正确显示，筛选查询是从输入框中获取的，而不是使用事实上的 st-search 插件，所以我提到了一个已经 existing issue in github (similar), I've pulled out this plunk and modified it slightly 来适合被质疑的用例。

使用智能 table 搜索按钮点击事件的数据

Search data on click event of button using smart table

javascript

angularjs

smart-table