0

I am trying to filter my table by element.data. I have a dropdown list for the user to select the value and a submit button once they have finished. The table gets the initial data but when I select a value and click submit I get all of the values. The filter is not working at all.

Javascript filter

 $('#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);
});

Report Table Page

 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>

Model

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

1 Answer 1

1

You have the event listener "$('#Product').on('change'....", however I don't see a control with the id="Product". I suspect that is your issue. You'll need to assign that id to the control you're looking to fire on change.

I believe you have the same issue with your $('#Changes') event listener as well.

Sign up to request clarification or add additional context in comments.

8 Comments

I'm sorry i for got to add that piece of code. I have edited the question
@MattBrown I still don't see that control.
Are you talking about in the controller?
$('#Product') selects an html control with the id='Product'. However, in the code you've provided there is no such control.
I thought it was getting the values from Product model
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.