javascript - how to use datatable with dynamically created table -
i have jsp onload calls js in table created dynamically. situation have never worked on jquery earlier, know javascript.
i made 2 scenarios:
case 1 : when create static table on jsp page works flawlessly. case 2 : when seek load same table created dynamic javascript fails.
case working code
<html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>jsp page</title> <script src="../js/jquery.js"></script> <script type="text/javascript" src="../js/createdynamictable.js"></script> <script type="text/javascript" src="../js/jquery.datatables.js"></script> <script> $(document).ready(function() { $('#testtable').datatable(); }); </script> </head> <body> <div id="tabledatadiv"> <table id="testtable"> <thead> <th>h1</th> <th>h2</th> <th>h3</th> </thead> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> </tr> </tbody> </table> </div> </body> </html> case ii not working code
jsp code
<%@page contenttype="text/html" pageencoding="utf-8"%> <!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>jsp page</title> <script src="../js/jquery.js"></script> <script type="text/javascript" src="../js/createdynamictable.js"></script> <script type="text/javascript" src="../js/jquery.datatables.js"></script> <script> $(document).ready(function() { $('#testtable').datatable(); }); </script> </head> <body onload="gettabledata();"> <div id="tabledatadiv"> </div> </body> </html> js code function gettabledata(){ var tabledatadivobj = document.getelementbyid("tabledatadiv"); var tableobj = document.createelement("table"); tableobj.id = 'testtable'; // header var theadobj = document.createelement("thead"); var thobj = document.createelement("th"); thobj.innerhtml = 'h1'; theadobj.appendchild(thobj); thobj = document.createelement("th"); thobj.innerhtml = 'h2'; theadobj.appendchild(thobj); thobj = document.createelement("th"); thobj.innerhtml = 'h3'; theadobj.appendchild(thobj); tableobj.appendchild(theadobj); // body var tbodyobj; var trobj; var tdobj; tbodyobj = document.createelement("tbody"); var count = 1; for(i = 0; < 3; i++){ trobj = document.createelement("tr"); for(j = 0; j < 3; j++){ tdobj = document.createelement("td"); tdobj.innerhtml = count; trobj.appendchild(tdobj); count++; } tbodyobj.appendchild(trobj); } tableobj.appendchild(tbodyobj); tabledatadivobj.appendchild(tableobj); } once table created dynamically, append div on jsp page.
kindly suggest modification, suggestions can code work. illustration have created of real application . involves finish mvc, table info retrived service methods , dao files. able info table(i made sure after getting alert on jsp page). not able utilize datatable on id of table.
thanks in advance!
when datatables initialization run, table doesn't exist yes. can prepare moving $('#testtable').datatable(); after table has been initialized.
$(tableobj).datatable(); at end of gettabledata function (which should defined in $(document).ready callback.
javascript jsp datatables
No comments:
Post a Comment