html - Datatables not rendering on my table in MVC project -
i want improve , feel of tables , jquery datatables looks great doing can not work out why not rendering on table. have registered plugin correctly on bundle config. followed tutorial , ensured in correct place, no effect.
here generated code browser. have put alert in javascript calls datatable(), being called.
the head , body of document in different file _layout.cshtml index page table is. not 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>
there few problems: code says "var el = doucument..." should "document".
also using "getelementbyname" when table doesn't have name attribute set, id set.
but why not use built in jquery function select id:
$('#customerindex').datatable({ "sscrolly": "200px", "bpaginate": false }); bqb
Comments
Post a Comment