CODEWITHSUNDEEP
htmlasp.net-mvcdatatables
Jed I
Jed I

Reputation: 1028

Datatables not rendering on my table in MVC project

I want to improve the look and feel of my tables and jQuery datatables looks great for doing that but I can not work out why it is not rendering on my table. I have registered the plugin correctly on my bundle config. Followed the tutorial and ensured everything was in correct place, but no effect.

Here is my generated code from browser. I have put an alert in the JavaScript which calls dataTable(), this is being called.

the head and body of document are in a different file _layout.cshtml to my index page which is where my table is. Not that this should effect anything.

<!DOCTYPE html>
<html lang="en">
    <head> 
        <meta charset="utf-8" />
        <title></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.5.3.js"></script>

        <script src="/Content/DataTables-1.9.4/media/css/demo_table.css"></script>

        <script src="/Scripts/DataTables-1.9.4/media/js/jquery.js"></script>
    <script src="/Scripts/DataTables-1.9.4/media/js/jquery.dataTables.js"></script>
    </head>
    <body>
        <header>
            <div class="content-wrapper">
                <div class="float-left">
                    <p>
                       <a class="site-title" href="/">
                       <img src="../../Content/Images/TrakMan_white240.png" ,alt="sort",    style="border-style:none"/></a>
                    </p>
                </div>
                <div class="float-right">
                    <section id="login">
                        Hello, <a class="username" href="/SGAccount/Manage" title="Manage">simon</a>!
                        <form action="/SGAccount/LogOff" id="logoutForm" method="post">
                            <input     name="__RequestVerificationToken" type="hidden"   value="qouuJJI98XkICybk1UEozbZayptmhHh1zgsHQfTcu9kz6PJrZ_TObkO8Yhkkqv06jtklWRKOSAhUs3w1Bqm58Y-cy7Q8I5dl_loxDuU6AqReCRtWRHg7p4ipeTVKzNzGG50b7D-x3562Hj2q2In_m-LctFmsLIQ1qpM_iYv0MSQ1"   />
                            <a href="javascript:document.getElementById('logoutForm').submit()">Log    off</a>
                        </form>    
                    </section>
                    <nav>
                        <ul id="menu">
                            <li><a href="/">Home</a></li>
                            <li><a href="/Home/About">About</a></li>
                            <li><a href="/Home/Contact">Contact</a></li>
                            <br />
                            <br />
                            <br />
                            <li><a href="/SGAccount/ChangePassword">Change Password</a></li>
                            <li><a href="/Home/Welcome">Servers</a></li>  
                            <li><a href="/SecurityGuard">Security Guard</a></li>
                            <li><a href="/Connection">Connections</a></li>
                        </ul>
                    </nav>
                </div>
            </div>
        </header>
        <div id="body">
            <section class="content-wrapper main-content clear-fix">
                <script src="/Scripts/jquery-2.0.2.js"></script>

                <script type="text/javascript">
                    $(document).ready(function () {
                        var el = doucument.getElementByName("customerIndex")
                        el.dataTable({ "sScrolly": "200px", "bPaginate": false });
                    });
                </script>


                <h2>Customers</h2>

                <p>
                    <a class="createButton" href="/Customer/Create">Create New</a>
                </p>

                <table id="customerIndex" class="display">
                <thead>
                    <tr>
                        <th>Column 1</th>
                        <th>Column 2</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Row 1 Data 1</td>
                        <td>Row 1 Data 2</td>
                    </tr>
                    <tr>
                        <td>Row 2 Data 1</td>
                        <td>Row 2 Data 2</td>
                    </tr>
                </tbody>
                </table>
            </section>
        </div>
    </body>
</html>

Upvotes: 0

Views: 958

Answers (3)

Bumptious Q Bangwhistle
Bumptious Q Bangwhistle

Reputation: 4759

There are a few problems: Your code says "var el = doucument..." but that should be "document".

Also you are using "getElementByName" when your table doesn't have the name attribute set, just the ID set.

But why not use the built in jQuery function to select by ID:

$('#customerIndex').dataTable({ "sScrolly": "200px", "bPaginate": false });

Upvotes: 1

Jed I
Jed I

Reputation: 1028

had an extra script src="/Scripts/jquery-2.0.2.js" at bottom of page.....

Upvotes: 0

Raidri
Raidri

Reputation: 17550

you load two different jquery version:

<script src="/Scripts/DataTables-1.9.4/media/js/jquery.js"></script> // in the header
<script src="/Scripts/jquery-2.0.2.js"></script> // in the body

another small correction:

<script src="/Content/DataTables-1.9.4/media/css/demo_table.css"></script>
// should be
<link href="/Content/DataTables-1.9.4/media/css/demo_table.css" rel="stylesheet" />

maybe this will correct your error

Edit:
change

                $(document).ready(function () {
                    var el = doucument.getElementByName("customerIndex")
                    el.dataTable({ "sScrolly": "200px", "bPaginate": false });
                });

to

                $(document).ready(function () {
                    $("#customerIndex").dataTable({ "sScrolly": "200px", "bPaginate": false });
                });

Upvotes: 0

Related Questions