Home/ Questions/Q 7620791
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T04:01:35+00:00

I just downloaded DataTables and this plugin looks great! I am however having an

  • 0

I just downloaded DataTables and this plugin looks great! I am however having an issue dynamically populating the plugin’s DataTable component. I’m able to populate the table if I have static and ‘s in the and static and ‘s in the . I would however like to dynamically build the , and and populate the and entities. The code below, replaces the static table contents with the XML parsed contents when you hit the enter button. Any ideas on how to make this completely dynamic? I tried adding the dataTable class to my table
$(“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();
            }
        }
    });
});
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    DataTables have special API to add data to table in runtime:

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

    where data is an array of arrays with table data, listed by rows:

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

    Here, n is the number of your columns and m is the number of rows you’re adding.
    You can build the data with any data you want and then push it to the datatable using fnAddData() method.

    • 0