Using Jquery Filter Table with CSHTML View

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>

Answers


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.


Need Your Help

Implement sqlcipher-for-android

android sql sqlcipher

Hi I try to implement sql cipher. I use the code from github from here(https://github.com/sqlcipher/android-database-sqlcipher). Extract the source code and import it into eclipse. But it's not ru...

Extract characters after focal character “.”

regex r

This matches everything after the first "." and replaces it with ""

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.