Динамически заполняемый DataTables.net DataTable Плагин JQuery - PullRequest
Новая
       11

Динамически заполняемый DataTables.net DataTable Плагин JQuery

1 голос
/ 10 марта 2012

Я только что скачал DataTables , и этот плагин выглядит великолепно!Однако у меня возникла проблема с динамическим заполнением компонента DataTable плагина.Я могу заполнить таблицу, если у меня есть статические и в статических и и в.Однако я хотел бы динамически создавать и заполнять объекты и.Приведенный ниже код заменяет статическое содержимое таблицы на проанализированное содержимое 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();
            }
        }
    });
});

Ответы [ 2 ]

0 голосов
/ 10 марта 2012

Если я правильно понимаю вопрос о динамическом построении таблицы, вы захотите использовать JSON в качестве формата данных.Следуйте примеру для Обработка на стороне сервера , и вы можете установить опцию aAJaxDataSource в качестве URL-адреса на сервере для обработки всего потока данных, например, при создании таблицы при загрузке страницы, обновлений и т. Д.

0 голосов
/ 10 марта 2012

DataTables имеют специальный API для добавления данных в таблицу во время выполнения: 

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

, где data - это массив массивов с данными таблицы, перечисленных в строках: 

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

Здесь n - это количество ваших столбцов, а m - это количество строк, которые вы добавляете.Вы можете создать data с любыми данными, которые вам нужны, а затем отправить их в таблицу данных, используя метод fnAddData().

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...