javascript - 如何解决数据表问题，当我从下拉列表中选择活动选项时显示两种状态？

Question

我正在使用 KTDatatable 将数据加载到表中，当我从下拉列表中选择“活动”选项时，它也可以加载具有非活动记录状态的数据，但是当我选择活动选项时我不想要非活动记录。我做了很多研究来克服这个问题，但找不到解决方案。我该如何解决这个问题？

这是输出： 问题

这是代码：

这是JS：

var KTDatatableHtmlTableDemo = function() {
    // Private functions

    // demo initializer
    var demo = function() {

        var datatable = $('#html_table').KTDatatable({
            data: {
                saveState: {cookie: false},
            },
            search: {
                input: $('#generalSearch'),
            },
            columns: [
                {
                    field: 'Name',
                    type: 'Name',
                    width:200,
                },
                {
                    field: 'Company',
                    type: 'Company',
                    width:150,
                },

                
            ],

        });

    $('#kt_form_status').on('change', function() {
        console.log($(this).val());
      datatable.search($(this).val(),'Status');
    });

    $('#kt_form_status').selectpicker();

    };

    return {
        // Public functions
        init: function() {
            // init dmeo
            demo();
        },
    };
}();

这是选择：

<div class="kt-form__control">
    <select class="form-control bootstrap-select" id="kt_form_status">
        <option value="">All</option>
        <option value="Active">Active</option>
        <option value="Inactive">Inactive</option>
    </select>
</div>

这是表格：

    <table class="kt-datatable__table" id="html_table" width="100%" style="display: block;">
   <thead class="kt-datatable__head">
      <tr class="kt-datatable__row" style="left: 0px;">
         <th data-field="Name" class="kt-datatable__cell kt-datatable__cell--sort kt-datatable__cell--sorted" data-sort="desc"><span style="width: 200px;">Name<i class="flaticon2-arrow-down"></i></span></th>
         <th data-field="Company" class="kt-datatable__cell kt-datatable__cell--sort"><span style="width: 150px;">Company</span></th>
         <th data-field="Country" class="kt-datatable__cell kt-datatable__cell--sort"><span style="width: 233px;">Country</span></th>
         <th data-field="Phone" class="kt-datatable__cell kt-datatable__cell--sort"><span style="width: 233px;">Phone</span></th>
         <th data-field="Email" class="kt-datatable__cell kt-datatable__cell--sort"><span style="width: 233px;">Email</span></th>
         <th data-field="Balance" class="kt-datatable__cell kt-datatable__cell--sort"><span style="width: 233px;">Balance</span></th>
         <th data-field="Status" class="kt-datatable__cell kt-datatable__cell--sort"><span style="width: 233px;">Status</span></th>
      </tr>
   </thead>
   <tbody style="" class="kt-datatable__body">
      <tr data-row="0" class="kt-datatable__row" style="left: 0px;">
         <td class="kt-datatable__cell--sorted kt-datatable__cell" data-field="Name">
            <span style="width: 200px;">
               <div class="kt-user-card-v2">
                  <div class="kt-user-card-v2__pic"><img alt="photo" src="../uploads/customers/C-20200513105542-BridgeLOGOBlue.png" width="50" height="50"></div>
                  <div class="kt-user-card-v2__details"><a href="overview.php?id=2" class="kt-user-card-v2__name">
                     Akeel Mehdi</a>
                  </div>
               </div>
            </span>
         </td>
         <td data-field="Company" class="kt-datatable__cell"><span style="width: 150px;">Bridge Education System</span></td>
         <td data-field="Country" class="kt-datatable__cell"><span style="width: 233px;">PK</span></td>
         <td data-field="Phone" class="kt-datatable__cell"><span style="width: 233px;">[phone]</span></td>
         <td data-field="Email" class="kt-datatable__cell"><span style="width: 233px;"><a href="mailto:[e-mail]">View</a></span></td>
         <td data-field="Balance" class="kt-datatable__cell"><span style="width: 233px;">PKR                                                0</span></td>
         <td data-field="Status" class="kt-datatable__cell"><span class="kt-font-bold kt-font-danger" style="width: 233px;">Inactive</span></td>
      </tr>
      <tr data-row="5" class="kt-datatable__row kt-datatable__row--even" style="left: 0px;">
         <td class="kt-datatable__cell--sorted kt-datatable__cell" data-field="Name">
            <span style="width: 200px;">
               <div class="kt-user-card-v2">
                  <div class="kt-user-card-v2__pic"><img alt="photo" src="../uploads/customers/C-20191018015800-WhatsAppImage2019-10-17at5.58.51PM.jpeg" width="50" height="50"></div>
                  <div class="kt-user-card-v2__details"><a href="overview.php?id=12" class="kt-user-card-v2__name">
                     Faiq Butt</a>
                  </div>
               </div>
            </span>
         </td>
         <td data-field="Company" class="kt-datatable__cell"><span style="width: 150px;">Smart World BPO</span></td>
         <td data-field="Country" class="kt-datatable__cell"><span style="width: 233px;">PK</span></td>
         <td data-field="Phone" class="kt-datatable__cell"><span style="width: 233px;">03234691179</span></td>
         <td data-field="Email" class="kt-datatable__cell"><span style="width: 233px;"><a href="mailto:[e-mail]">View</a></span></td>
         <td data-field="Balance" class="kt-datatable__cell"><span style="width: 233px;">PKR                                                0</span></td>
         <td data-field="Status" class="kt-datatable__cell"><span class="kt-font-bold kt-font-danger" style="width: 233px;">Inactive</span></td>
      </tr>
    
   </tbody>
</table>

标签： javascripthtml