通过 MEAN 架构上的数据表配置搜索字段

Question

在使用控制器从 MongoDB 加载的 table 上配置搜索字段的最佳方法是什么（MEAN 架构：MongoDB | Express | Angular | 节点）

我有一个主页：

<section class="content">
<div class="nav-tabs-custom" ng-controller="SoftwareInventoryCtrl as swInventoryCtrl">
    <ul class="nav nav-tabs">
        <li>
            <a href data-target="#tabSummary" data-toggle="tab">
                <i class="fa fa-bar-chart"></i> Software Summary
            </a>
        </li>
        <li>
            <a href data-target="#tabList" data-toggle="tab">
                <i class="fa fa-bars"></i> Software List
            </a>
        </li>
        <li>
            <a href data-target="#tabOSList" data-toggle="tab">
                <i class="fa fa-windows"></i> Operating Systems
            </a>
        </li>           
    </ul>

    <div class="tab-content">
        <div class="tab-pane" id="tabSummary" ng-include="'myapp/softwareInventorySummary.html'"></div>

        <div class="tab-pane" id="tabList" ng-include="'myapp/softwareInventoryList.html'"></div>

        <div class="tab-pane" id="tabOSList" ng-include="'myapp/softwareInventoryOSList.html'"></div>
    </div>

</div>

信息来自控制器：

(function() {
angular.module('primeiraApp').controller('SoftwareInventoryCtrl', [
    '$http',
    'consts',
    SoftwareInventoryController
    ])

    function SoftwareInventoryController($http, consts) {
        const vm = this
        const urlSoftwareList = `${consts.apiUrl}/softwareInventory`

        vm.refresh = function() {
            $http.get(urlSoftwareList).then(function(response) {
                vm.softwareInventory = { machine_name: [{}],
                                         display_name: [{}],
                                         company: [{}],
                                         version: [{}] }
                vm.softwareInventorys = response.data
            })
        }
  vm.refresh()
        } })()

并且以下页面加载了所有数据：

<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <link rel="stylesheet" href="https://adminlte.io/themes/AdminLTE/bower_components/bootstrap/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="/assets/css/deps.min.css">
  <link rel="stylesheet" href="https://adminlte.io/themes/AdminLTE/bower_components/Ionicons/css/ionicons.min.css">
  <link rel="stylesheet" href="https://adminlte.io/themes/AdminLTE/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css">
  <link rel="stylesheet" href="https://adminlte.io/themes/AdminLTE/dist/css/AdminLTE.min.css">
  <link rel="stylesheet" href="https://adminlte.io/themes/AdminLTE/dist/css/skins/_all-skins.min.css">
  <link rel="stylesheet"
        href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>
</head>
<body>
<div class="box-body">
    <div class="row">
        <div class="col-sm-12">
    <table  id="tableSoftwareInventory" class="table table-bordered table-striped dataTable" role="grid">
        <thead>
                <th>Machine</th>
                <th>Software</th>
                <th>Company</th>
                <th>Version</th>
            </tr>
        </thead>
        <tbody>
           <tr role="row" ng-repeat="softwareInventory in swInventoryCtrl.softwareInventorys">
                <td class="sorting_1">{{ softwareInventory.machine_name }}</td>
                <td>{{ softwareInventory.display_name }}</td>
                <td>{{ softwareInventory.company }}</td>
                <td>{{ softwareInventory.version }}</td>
            </tr> 
        </tbody> 
        <tfoot>
                <th>Machine</th>
                <th>Software</th>
                <th>Company</th>
                <th>Version</th>
        </tfoot>       
    </table>
    </div>
    </div>
</div>
<script src="/assets/js/deps.min.js"></script>
<script src="/plugins/datatables.net/js/jquery.dataTables.js"></script>
<script src="/plugins/datatables.net-bs/js/dataTables.bootstrap.js"></script>
<script src="https://www.google-analytics.com/analytics.js"></script>
<script src="https://adminlte.io/themes/AdminLTE/bower_components/jquery/dist/jquery.min.js"></script>
<script src="https://adminlte.io/themes/AdminLTE/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="https://adminlte.io/themes/AdminLTE/bower_components/fastclick/lib/fastclick.js"></script>
<script src="https://adminlte.io/themes/AdminLTE/dist/js/adminlte.min.js"></script>
</body>
</html>

我的想法是在tableSoftwareInventory table

上放一个搜索框

有什么想法吗？

P.S。我使用 AdminLTE 模板。

非常感谢！！

Answer 1

最后我找到了必要的方法：刚刚在使用参数 "search"（函数中的 bult）加载 table 的页面上实现了 dir-paginate 函数。更多实现方法，访问here

通过 MEAN 架构上的数据表配置搜索字段

Configuring a search field through Datatable on MEAN architecture

node.js

angularjs

angular-ui-bootstrap

angular-datatables

adminlte