Datatables not rendering on my table in MVC project

Question

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>

Uncaught TypeError: Object [object Object] has no method 'dataTable' — Jed I
– Jed I, Commented Jul 31, 2013 at 13:46

Bumptious Q Bangwhistle · Accepted Answer · 2017-12-02 22:30:48Z

1

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

edited Dec 2, 2017 at 22:30

answered Jul 31, 2013 at 14:19

Bumptious Q Bangwhistle

4,7592 gold badges36 silver badges46 bronze badges

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

Comments

Raidri · Accepted Answer · 2013-07-31 14:19:28Z

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

I have removed the extra jquery call, and changed css to correct link, yet still saying object has no Object [object Object] has no method 'dataTable'.
see edit for more changes (the dataTable method only works on jQuery objects)
i tried var el = doucument.getElementByName("customerIndex") this way as thought mite have been an issue here, I have changed it back to suggested.

Jed I · Accepted Answer · 2013-07-31 14:53:21Z

0

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

answered Jul 31, 2013 at 14:53

Jed I

1,0383 gold badges21 silver badges39 bronze badges

Collectives™ on Stack Overflow

Datatables not rendering on my table in MVC project

3 Answers 3

Comments

3 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Related