Question

我刚刚下载了DataTables，这个插件看起来很棒！但是我有一个动态填充插件的DataTable组件的问题。如果我有静态和静态的，那么我可以填充表格。但是，我想动态构建，并填充和实体。当您按下Enter按钮时，下面的代码用XML解析的内容替换静态表内容。关于如何使这完全动态的任何想法？我尝试将dataTable类添加到我的表中 $（ “table.display”）addClass（ “dataTable中”）;

的index.html：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script type="text/javascript" src="index.js"></script>
        <title>DataTables example</title>
        <style type="text/css" title="currentStyle">
            @import "../../media/css/demo_page.css";
            @import "../../media/css/demo_table.css";
        </style>
        <script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
        <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
        <script type="text/javascript" charset="utf-8">
            $(document).ready(function() {
                $('#example').dataTable();
            } );
        </script>
    </head>
    <body id="dt_example">
        <div id="container">
            <table class="query">
                <tr>
                    <td class="status"></td>
                </tr>
                <tr>
                    <td><input class="query defaultText" type="text"
                        title="Type SQL query here, then press 'Enter' to execute...">
                    </td>
                </tr>
            </table>
            <div class="full_width big">
                DataTables zero configuration example
            </div>          
            <div id="demo">
            <table cellpadding="0" cellspacing="0" border="0" class="display" id="example" width="100%">
                <thead>
                    <tr> **//want to remove these**
                        <th>Rendering engine</th>//want to remove these
                        <th>Browser</th>//want to remove these
                        <th>Platform(s)</th>//want to remove these
                        <th>Engine version</th>//want to remove these
                        <th>CSS grade</th>//want to remove these
                    </tr>
                </thead>
                <tbody>
                    <tr class="odd gradeX">**//want to remove these**
                        <td>Trident</td>//want to remove these
                        <td>Internet
                             Explorer 4.0</td>//want to remove these
                        <td>Win 95+</td>//want to remove these
                        <td class="center"> 4</td>//want to remove these
                        <td class="center">X</td>//want to remove these
                    </tr>
                </tbody>
            </table>
            </div>
            <div class="spacer"></div>
            </div>
        </div>
    </body>
</html>

index.js：

$(function () {
$("input.query").keyup(function (e) {
        // check if ENTER key was pressed
        if (e.keyCode == "13") { 
            var data = '<ns1:executeResponse xmlns:ns1="http://sqlws.test.com">' +
                           '<ns1:return>' + 
                               '<results>' +
                               '<row><deviceid>deviceid1</deviceid><domain>1</domain><role>manager</role><usage>100</usage></row>' +
                               '<row><deviceid>deviceid2</deviceid><domain>1</domain><role>director</role><usage>100</usage></row>' +
                               '</results>' +
                           '</ns1:return>' +
                       '</ns1:executeResponse>';

            var $xmlDoc = $($.parseXML(data));

            var $txt = $xmlDoc.find('ns1\\:return');

            var $firstrow = $txt.children("results").children(":first");

            var row;
             $("table.display thead").empty();
                    $("table.display tbody").empty();

            $("table.display").addClass("dataTable");

            row = $("<tr/>");
            row.append($("<th/>").text("#"));

            $firstrow.children().each(function(){
                row.append($("<th/>").text(this.nodeName));
            });

            row.appendTo($("table.display thead"));

            var ndx = 0;
            $txt.children("results").children().each(function () {
                row = $("<tr class='odd gradeX'/>");
                row.append($("<td/>").text(ndx + 1));
                $(this).children().each(function () {
                    row.append($("<td/>").text($(this).text()));
                    row.appendTo($("table.display tbody"));
                });
                ndx++;
            });

            if (ndx == 0) {
                // no rows returned
                $("table.display thead").empty();
                $("table.display tbody").empty();
            }
        }
    });
});

Answer 1

DataTables具有特殊的API，可以在运行时向表中添加数据：

t.fnClearTable();
t.fnAddData(data);

其中data是一个包含表数据的数组数组，按行列出：

[[r1c1, r1c2, …, r1cn],
  …
 [rmc1, rmc2, …, rmcn]]

此处，n是您的列数，m是您要添加的行数。您可以使用所需的任何数据构建data，然后使用fnAddData()方法将其推送到数据表。

Answer 2

如果我正在理解有关动态构建表的问题，您将需要使用JSON作为数据格式。按照Server Side Processing的示例进行操作，您可以将aAJaxDataSource选项设置为服务器上的URL以处理所有数据流，例如在页面加载，更新等上自创表;

动态填充DataTables.net DataTable JQuery插件

2 个答案: