Using Jquery Filter Table with CSHTML View

Question

I am trying to add a search feature to a table within a strongly typed view as a list type. Using this table I am trying to make the search work for the entire table meaning that is any row/ column can contain any keyword that a user enters and the table will show only the matching rows. I found this JQuery Filter Table JS that looks pretty good and simple but I cannot seem to get it working. The plugin can be found here FilterTable Plugin. I have tried putting the code in the doucment ready but it did not work. From what I understand from the example is the the plugin automatically creates the search bar but it does not seem to appear. Is there any issues that you see with my code?

Here is what I have:

@model IEnumerable<ApIssues.Models.Issue>

@{
    ViewBag.Title = "Index";
}


<h2>Search/Sort Options</h2>

<h2>A/P Issues</h2>

<div class="issue-table">
    <table id="data-table">
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.IssueDate)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.InvoiceDate)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.AssignedEmployee)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.CcEmployee)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Warehouse)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.PurchaseOrderNumber)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.FreightNumber)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.VendorName)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.RequiredCompleteDate)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.IssueType)
            </th>
            <th></th>
        </tr>

        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.IssueDate)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.InvoiceDate)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.AssignedEmployee)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.CcEmployee)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Warehouse)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.PurchaseOrderNumber)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.FreightNumber)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.VendorName)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.RequiredCompleteDate)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.IssueType)
                </td>
                <td>
                    @Html.ActionLink("Edit", "Edit", new { id = item.Id }) |
                    @Html.ActionLink("Details", "Issue", new { id = item.Id })
                </td>
            </tr>
        }

    </table>
</div>
<head>
    <title></title>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="http://sunnywalker.github.io/jQuery.FilterTable/jquery.filtertable.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('table').filterTable(); // apply filterTable to all tables on this page
        });
    </script>
</head>

Also, I am getting an error that says that says the filterTable() is undefined. And I have the correct mapping to the js file.

Here is my rendered HTML page:

<html lang="en" class=" js flexbox flexboxlegacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths"><head>
        <meta charset="utf-8">
        <title>Index - My ASP.NET MVC Application</title>
        <link href="/favicon.ico" rel="shortcut icon" type="image/x-icon">
        <meta name="viewport" content="width=device-width">
        <link href="/Content/site.css" rel="stylesheet">

        <script src="/Scripts/modernizr-2.6.2.js"></script>

    <style type="text/css"></style></head>
    <body>
        <header>
            <div class="content-wrapper">
                <div class="float-left">
                    <p class="site-title"><a href="/">Pacific Power Group</a></p>
                </div>
                <div class="float-right">
                    <section id="login">
                       Hello, <span class="username">AARONJOHNSON-PC\Aaron Johnson</span>!
                    </section>

                </div>
            </div>
        </header>
        <div id="body">

            <section class="content-wrapper main-content clear-fix">



<h2>Search/Sort Options</h2>

<h2>A/P Issues</h2>

<div class="issue-table">
    <table id="data-table">
        <tbody><tr>
            <th>
                Issue Date
            </th>
            <th>
                Invoice Date
            </th>
            <th>
                Assigned By
            </th>
            <th>
                CC
            </th>
            <th>
                Warehouse
            </th>
            <th>
                PO #
            </th>
            <th>
                Freight #
            </th>
            <th>
                Vendor Name
            </th>
            <th>
                Req. Complete Date
            </th>
            <th>
                Issue Type
            </th>
            <th></th>
        </tr>

            <tr>
                <td>
                    12/1/1991 12:00:00 AM
                </td>
                <td>
                    12/2/1991 12:00:00 AM
                </td>
                <td>
                    Bob
                </td>
                <td>
                    Michael
                </td>
                <td>
                    ANCH
                </td>
                <td>
                    123
                </td>
                <td>
                    1341
                </td>
                <td>
                    Fifa
                </td>
                <td>
                    12/1/2002 12:00:00 AM
                </td>
                <td>
                    Basketball
                </td>
                <td>
                    <a href="/apissues/Edit/1">Edit</a> |
                    <a href="/apissues/Issue/1">Details</a>
                </td>
            </tr>
            <tr>
                <td>
                    12/4/2014 12:00:00 AM
                </td>
                <td>
                    12/15/2014 12:00:00 AM
                </td>
                <td>
                    Rod
                </td>
                <td>
                    Kevin
                </td>
                <td>
                    PTLD
                </td>
                <td>
                    234124
                </td>
                <td>
                    1235
                </td>
                <td>
                    Golf and Things
                </td>
                <td>
                    12/16/2014 12:00:00 AM
                </td>
                <td>
                    Serious
                </td>
                <td>
                    <a href="/apissues/Edit/3">Edit</a> |
                    <a href="/apissues/Issue/3">Details</a>
                </td>
            </tr>

    </tbody></table>
</div>

    <title></title>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="http://sunnywalker.github.io/jQuery.FilterTable/jquery.filtertable.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('table').filterTable(); // apply filterTable to all tables on this page
        });
    </script>



            </section>
        </div>
        <footer>
            <div class="content-wrapper">
                <div class="float-left">
                    <p>© 2014 - My ASP.NET MVC Application</p>
                </div>
            </div>
        </footer>

        <script src="/Scripts/jquery-1.8.2.js"></script>



<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
    {"appName":"Chrome","requestId":"4b661357b7024127b7d0668c75d0b699"}
</script>
<script type="text/javascript" src="http://localhost:57537/5dde797bc9ee4daf89f7c7b54c415d49/browserLink" async="async"></script>
<!-- End Browser Link -->



</body></html>

Ash · Accepted Answer · 2014-06-30 03:08:17Z

1

Looks like you have some bad JavaScript mapping in your stuff.

I used te exact path to the intended javscript files in my example. Please verify in the rendered HTML that your code is pointing to right path

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
 <script src="http://sunnywalker.github.io/jQuery.FilterTable/jquery.filtertable.min.js"></script>

I took the liberty to prepare a set of rendered HTML from your code and put it in a fiddle. See the working version of your rendered HTML here : http://jsfiddle.net/GUh2x/

* Remove Jquery 1.8 *

You need to remove this as you are already including newer version of jquery in your code. Adding it again below footer overrides and messes up your jquery dependent object relations.

edited Jun 30, 2014 at 3:08

answered Jun 30, 2014 at 1:15

Ash

2,6152 gold badges22 silver badges28 bronze badges

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

7 Comments

user3788671 Over a year ago

Ya, that's what I was thinking too. So I updated my code with your javascript but I am still getting the undefined error. Do you think it is because I do not have the tbody and the thead?

Ash Over a year ago

naah. it means that the JS files not referenced correctly or are being overridden by something else. try moving the script tags into the <HEAD> section of your page.

Ash Over a year ago

can you post page source of your rendered page? It will help to understand why it is not working.

Ash Over a year ago

Two things :) - 1. Remove <script src="/Scripts/jquery-1.8.2.js"></script> . 2. The filter will only appear if the number of records are more than 8.

user3788671 Over a year ago

Ok i added 9 records. WHere is the 1.8.2.js?

|

BusinessAlchemist · Accepted Answer · 2021-05-31 08:36:14Z

0

If you're using a default MVC template, you'll find jQuery references in the footer of the _Layout page. You'll need that in header for .filterTable() to work. Thus:

Make sure you've got more than 8 items in your table.
Render jQuery references in the header of the _Layout.cshtml page

Both were suggested by Ash.

answered May 31, 2021 at 8:36

BusinessAlchemist

7146 silver badges17 bronze badges

Collectives™ on Stack Overflow

Using Jquery Filter Table with CSHTML View

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related