javascript数据表过滤器不过滤

Question

我正在尝试按 element.data 过滤我的表。我有一个下拉列表供用户选择值，并在完成后有一个提交按钮。该表获取初始数据，但当我选择一个值并单击“提交”时，我会获取所有值。过滤器根本不起作用。

Javascript 过滤器

 $('#Product').on('change', function () {
    var count = 0;
    var value = this.value;

    $('#results-tbody tr').each(function () {

        var element = $(this);

        element.data('filters', element.data('filters').replace(/dropdown/g, ''));

        if (value !== 'All' && element.data("product").indexOf(value) === -1) {
            element.data('filters', element.data('filters') + 'dropdown');
        }
        count = count + hideOrShow(element);
    });
    setResultsCount(count);
});
$('#Changes').on('change', function () {
    var count = 0;
    var value = this.value;
    $('#results-tbody tr').each(function () {

        var element = $(this);

        element.data('filters', element.data('filters').replace(/dropdown/g, ''));

        if (value !== 'All' && element.data("oc").indexOf(value) === -1) {
            element.data('filters', element.data('filters') + 'dropdown');
        }
        count = count + hideOrShow(element);
    });
    setResultsCount(count);
});

报告表页

 var productList = new SelectList(
 new List<SelectListItem>
 {
 new SelectListItem {Text = "Flexitouch", Value = "Flexitouch"},
 new SelectListItem {Text = "ACTitouch", Value = "ACTitouch"},
 new SelectListItem {Text = "Entre", Value = "Entre"},


 }, "Text", "Value");

 var showList = new SelectList(
 new List<SelectListItem>
 {
 new SelectListItem {Text = "Changes Only", Value = "Changes Only"},
 new SelectListItem {Text = "Referrals Only", Value = "Referral Only"},


  }, "Text", "Value");
  <div class="layout clinics">

   @using (Html.BeginForm("AccountSummaryReport", "Reports", 
  FormMethod.Post))
   {
    @Html.ValidationSummary(false)
    <div style="border-bottom:1px solid #bbb">
        <h1>Account Summary Report</h1>
    </div>
    <!--<div class="filter-btns top">
        <h4 class="filter-heading">Quick Search By</h4>
        <input type="button" name="all" class="button1 filter-button active" value="All" />
        <input type="button" name="flexitouch" class="button1 filter-button" value="Flexitouch" />
        <input type="button" name="actitouch" class="button1 filter-button" value="ACTitouch" />
        <input type="button" name="entre" class="button1 filter-button" value="Entre" />
    </div>-->
    <fieldset class="form-wrapper form-side-labels form-labels-125 search-box-center">
        <div class="form-field form-full">
            <!-- New Dropdown ! -->
            <div class="editor-label">
                <label>@Html.DisplayNameFor(model => model.Product)</label>
            </div>
            <div class="editor-field">
                @Html.DropDownListFor(model => model.Product, productList, "All", new { @class = "css-class clinic-dropdown" })
            </div>
        </div>
        <div class="form-field form-full">
            <div class="editor-label">
                <label>@Html.DisplayNameFor(model => model.Changes)</label>
            </div>
            <div class="editor-field">
                @Html.DropDownListFor(model => model.Changes,showList, "All", new { @class = "css-class clinic-dropdown" })
            </div>
        </div>

<div class="form-field">
    <input name="SearchButton" type="submit" value="Search" />
</div>

    </fieldset>

  <table class="table results-table">
            <tr>
                <th><i id="count"> (@ViewBag.Count found) </i></th>
            </tr>
            <tbody id="results-tbody">
                @foreach (var item in Model.SearchResults)
                {
                    <tr class="table__row-link" data-patientname"="@item.PatientLastName , @item.PatientLastName"
                        data-product="@item.Product" data-referral="@item.d_Order_Date" data-oc="@item.d_Order_Complete_Date"
                        data-approved="@item.ApprovedDate" data-inactive="@item.d_Inactive_Date" data-training="@item.LastTrainedDate" data-links="@item.Links" data-filters="none">
                        <td>
                            <a href="@Url.Action("Details", "Patient", new { patientID = item.PT_RecID })">
                                <strong>@Html.DisplayFor(modelItem => item.PatientLastName, item.PatientFirstName) (@Html.DisplayFor(modelItem => item.PT_RecID))</strong>
                                <br />
                                <strong>Product: </strong>@Html.DisplayFor(modelItem => item.Product)
                                <br />
                                <strong>Referral: </strong>@Html.DisplayFor(modelItem => item.d_Order_Date)
                                <br />
                                <strong>OC: </strong> @Html.DisplayFor(modelItem => item.d_Order_Complete_Date)
                                <br />
                                <strong>Shipped: </strong> @Html.DisplayFor(modelItem => item.d_Ship_Date)
                                <br />
                                <strong>Approved: </strong> @Html.DisplayFor(modelItem => item.ApprovedDate)
                                <br />
                                <strong>Inactive: </strong> @Html.DisplayFor(modelItem => item.d_Inactive_Date)
                                <br />
                                <strong>Training: </strong> @Html.DisplayFor(modelItem => item.LastTrainedDate)
                                <br />
                                <strong>Links: </strong> @Html.DisplayFor(modelItem => item.Links)
                                <br />
                            </a>
                        </td>
                    </tr>
                }
            </tbody>
        </table>

型号

public class AccountSummaryReportModel
{ 

    public string Product { get; set; }
    public string Clinic_RecID { get; set; }
    public IEnumerable<v_Report_AccountSummary> SearchResults { get; set; }
    public string SearchButton { get; set; }
    public IEnumerable<SelectListItem> Changes { get; set; }
    [DisplayFormat(DataFormatString = "{0:MM/dd/yyyy}", ApplyFormatInEditMode = true)]
    [DisplayName("Start")]
    //[DataType(DataType.Date)]
    public DateTime Start { get; set; }
}

Answer 1

您有事件监听器“$('#Product').on('change'....”，但是我没有看到 id="Product"的控件。我怀疑这是您的问题.您需要将该 ID 分配给您希望在更改时触发的控件。

我相信您的 $('#Changes') 事件监听器也有同样的问题。