动态填充DataTables.net DataTable JQuery插件_Jquery_Datatables

动态填充DataTables.net DataTable JQuery插件

jquery datatables

动态填充DataTables.net DataTable JQuery插件,jquery,datatables,Jquery,Datatables,我刚下载，这个插件看起来很棒！然而，我在动态填充插件的DataTable组件时遇到了一个问题。如果我有static and's在和static and's在中，我就能够填充表。但是，我希望动态构建，并填充和实体。下面的代码在按下enter按钮时用XML解析的内容替换静态表内容。关于如何使其完全动态化，有什么想法吗？我尝试将dataTable类添加到我的表中 $（“table.display”）.addClass（“dataTable”） index.html: <!DOCTYPE HTML

我刚下载，这个插件看起来很棒！然而，我在动态填充插件的DataTable组件时遇到了一个问题。如果我有static and's在和static and's在中，我就能够填充表。但是，我希望动态构建，并填充和实体。下面的代码在按下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>

$(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();
            }
        }
    });
});


数据表示例
@导入“../../media/css/demo_page.css”；
@导入“../../media/css/demo_table.css”；
$（文档）.ready（函数（）{
$（“#示例”）.dataTable（）；
} );
DataTables零配置示例
**//要删除这些吗**
渲染引擎//要删除这些
浏览器//要删除这些吗
平台//要删除这些
引擎版本//是否要删除这些
CSS等级//要删除这些吗
**//要删除这些吗**
Trident//要删除这些吗
互联网
Explorer 4.0//是否要删除这些
Win 95+//要删除这些吗
4//要删除这些吗
X//要删除这些吗

index.js:

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

$(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();
            }
        }
    });
});

$（函数（）{
$（“input.query”）.keyup（函数（e）{
//检查是否按下了回车键
如果（e.keyCode==“13”）{
var数据=“”+
'' + 
'' +
“设备11管理器100”+
“DeviceID21目录100”+
'' +
'' +
'';
var$xmlDoc=$（$.parseXML（数据））；
var$txt=$xmlDoc.find（'ns1\\：return'）；
var$firstrow=$txt.children（“结果”）.children（“：first”）；
var行；
$（“table.display thead”）.empty（）；
$（“table.display tbody”）.empty（）；
$（“table.display”）.addClass（“dataTable”）；
行=$（“”）；
行。追加（$（“”）.文本（“#”）；
$firstrow.children（）.each（函数（））{
行.append（$（“”）.text（this.nodeName））；
});
行.appendTo（$（“table.display thead”）；
var-ndx=0；
$txt.children（“结果”）.children（）。每个（函数（）{
行=$（“”）；
行.append（$（“”）.text（ndx+1））；
$（this）.children（）.each（函数（）{
row.append（$（“”）.text（$（this.text（））；
行.appendTo（$（“table.display tbody”）；
});
ndx++；
});
如果（ndx==0）{
//没有返回行
$（“table.display thead”）.empty（）；
$（“table.display tbody”）.empty（）；
}
}
});
});

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

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

其中，

data

是包含表数据的数组，按行列出：

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

这里，

是您要添加的列数，

是您要添加的行数。

您可以使用所需的任何数据构建

数据

，然后使用

fnAddData（）

方法将其推送到datatable。

如果我正确理解关于动态构建表的问题，您将希望使用JSON作为数据格式。遵循示例，您可以将

aAJaxDataSource

选项设置为服务器上的url，以处理所有数据流，如页面加载时的自建表、更新等

我如何添加到thead和tbody？我不能使用JSON，我的数据源是SOAP web服务端点，因此我必须将数据作为XML处理