0

我正在尝试将数据表添加到我的弹出表内容中。

我有

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

但是，在我的弹出窗口中，我看到的只是

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

我的数据表 javascript 不会影响我的弹出窗口表。我该如何解决这个问题？非常感谢！

4

3 回答 3

2

试试这个。jsfiddle。确保您已在弹出窗口中包含与 dataTable 相关的 JavaScript。

我建议您将所有这些代码放在一个 js 文件中，并将该文件包含在弹出窗口中。因为 popup.document.body 在您尝试访问它时可能不可用（主要在 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);
于 2012-10-23T20:26:45.787 回答
1

小提琴：http: //jsfiddle.net/tariqulazam/bBPE5/1/

在您的页面中包含以下脚本

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

现在使用以下代码

<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>

不要忘记添加一些虚拟数据来测试数据表功能。

于 2012-10-23T20:33:23.697 回答
0

在将表格 html 写入窗口后，您需要运行 $('#popupDataTable').dataTable(...) 脚本，以便表格存在以进行操作。如所写， $('#popupDataTable').dataTable(...) 在创建表之前运行，因此不会执行任何操作 - 如您所见。

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
                })
             )
于 2012-10-23T20:13:01.373 回答