CODEWITHSUNDEEP
javascriptjquerydatatablepopup
FlyingCat
FlyingCat

Reputation: 14260

Using javascript in the popup window issue

I am trying to add datatable to my popup table contents.

I have

var popup = window.open("popup.html", "popup","width=1000, height=600, scrollbars=yes");

   popup.document.write(
                        $('#popupDataTable').dataTable( {
                        'bPaginate': false,
                        'bLengthChange': false,
                        'bFilter': true,
                        'bSort': true,
                        'bInfo': false,
                        'bAutoWidth': false,
                        'bDestroy':true
                    })
                 )



  popup.document.write(
                "<table id='popupDataTable'>"+
                "<thead><tr><th>name</th><th>job</th><th>email</th><th>phone</th><th>address</th><th>gender</th></thead><tbody>")

        //adding td data codes.....

  popup.document.write("</tbody></table>");

However, in my popup window, all i see is

[object Object]
<table>
 // my table contents display properly here, but datatable codes don't effect the table.
</table>

My datatable javascript doesn't effect my popup window table. How do I fix this issue? Thanks a lot!

Upvotes: 0

Views: 1664

Answers (3)

Tariqulazam
Tariqulazam

Reputation: 4585

Fiddle: http://jsfiddle.net/tariqulazam/bBPE5/1/

Include the following scripts in your page

<script src="Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.dataTables.min.js" type="text/javascript"></script>

Now use the following code

<script>
    $(document).ready(function () {
        var popup = window.open("popup.htm", "popup", "width=1000, height=600, scrollbars=yes");

        popup.document.write(
            "<table id='popupDataTable'>" +
                "<thead><tr><th>name</th><th>job</th><th>email</th><th>phone</th><th>address</th></thead><tbody>" +
                    "<tr class=\"gradeA\">" +
        "<td>Trident</td>" +
        "<td>Internet" +
        "    Explorer 5.5</td>" +
        "<td>Win 95+</td>" +
        "<td class=\"center\">5.5</td>" +
        "<td class=\"center\">A</td>" +
    "</tr>" +
    "<tr class=\"gradeA\">" +
    "   <td>Trident</td>" +
    "   <td>Internet" +
    "        Explorer 6</td>" +
    "   <td>Win 98+</td>" +
    "   <td class=\"center\">6</td>" +
    "   <td class=\"center\">A</td>" +
    "</tr>" +
    "<tr class=\"gradeA\">" +
    "   <td>Trident</td>" +
    "   <td>Internet Explorer 7</td>" +
    "   <td>Win XP SP2+</td>" +
    "   <td class=\"center\">7</td>" +
    "   <td class=\"center\">A</td>" +
    "</tr></tbody></table>");
        var table = popup.document.getElementById("popupDataTable");
        $(table).dataTable();
    });

</script>

Don't forgot to add some dummy data to test the datatable functionality.

Upvotes: 1

Anoop
Anoop

Reputation: 23208

try this. jsfiddle . make sure that you have included JavaScript related to dataTable in popup.

I Suggest you to put all these code in a js file and include that file in popup. because popup.document.body may not be available at the time you trying to access it(Mostly in IE). 

var html = "<table id='popupDataTable'>"+
                        "<thead><tr><th>name</th><th>job</th><th>email</th><th>phone</th><th>address</th><th>gender</th></thead><tbody>"

                //adding td data codes.....

          html  += "</tbody></table>";
    popup.document.body.innerHTML = html;

var s = popup.document.createElement("script");
s.innerHTML = "  $('#popupDataTable').dataTable( {"+
                                "'bPaginate': false,"+
                                "'bLengthChange': false,"+
                                "'bFilter': true,"+
                                "'bSort': true,"+
                                "'bInfo': false,"+
                                "'bAutoWidth': false,"+
                                "'bDestroy':true"+
                            "})";
popup.document.body.appendChild(s);

Upvotes: 2

CrazyWebDeveloper
CrazyWebDeveloper

Reputation: 378

You either need to run the $('#popupDataTable').dataTable(...) script after you write the table html to the window so the table exists to be acted upon. As written, the $('#popupDataTable').dataTable(...) is running before the table is ever created, and therefore will do nothing - as you have seen.

var popup = window.open("popup.html", "popup","width=1000, height=600, scrollbars=yes");

popup.document.body.htm(
            "<table id='popupDataTable'>"+
            "<thead><tr><th>name</th><th>job</th><th>email</th><th>phone</th><th>address</th><th>gender</th></thead><tbody>")

    //adding td data codes.....

popup.document.body.htm("</tbody></table>");

popup.document.body.htm(
                    $('#popupDataTable').dataTable( {
                    'bPaginate': false,
                    'bLengthChange': false,
                    'bFilter': true,
                    'bSort': true,
                    'bInfo': false,
                    'bAutoWidth': false,
                    'bDestroy':true
                })
             )

Upvotes: 0

Related Questions