Добавление динамических данных в таблицу - PullRequest
Новая
       7

Добавление динамических данных в таблицу

1 голос
/ 02 января 2011

У меня есть следующая таблица в моем приложении. У меня есть запрос Ajax, который будет получать результаты, которые будут показаны в таблице. Как добавить эти результаты в таблицу, не перекрывая каждый раз заголовок? 

<table id="itemList">
    <td>Name</td>
    <td>Price</td>
    <td>Quantity</td>
    <td>Total</td>
</table>

Тогда данные ajax будут такими, как показано ниже 

var items = [
    { Name: "Apple", Price: "80", Quantity : "3", Total : "240" },
    { Name: "Orance", Price: "50", Quantity : "4", Total : "200" },
    { Name: "Banana", Price: "20", Quantity : "8", Total : "160" },
    { Name: "Cherry", Price: "250", Quantity : "10", Total : "2500" }
];

Сейчас я пытаюсь что-то вроде этого, но это не работает 

var rows = "";
$.each(items, function(){
    rows += "<tr><td>" + this.Name + "</td><td>" + this.Price + "</td><td>" + this.Quantity + "</td><td>" + this.Total + "</td></tr>";
});

$( "#itemList" ).text('<tr><td>Name</td><td>Price</td><td>Quantity-</td><td>Total</td></tr>' + rows  );

Ответы [ 4 ]

6 голосов
/ 02 января 2011

Вы можете решить эту проблему, сделав два изменения.

Вы можете изменить свой HTML как 

<table id="itemList">
    <thead>
        <tr>
            <td>Name</td>
            <td>Price</td>
            <td>Quantity</td>
            <td>Total</td>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

И скрипт как 

var rows = "";
$.each(items, function(){
    rows += "<tr><td>" + this.Name + "</td><td>" + this.Price + "</td><td>" + this.Quantity + "</td><td>" + this.Total + "</td></tr>";
});

$( rows ).appendTo( "#itemList tbody" );

Вы можете найти рабочее решение здесь .

Но для этой цели создан плагин jquery templates .

Используя шаблоны jquery, это можно решить, как указано ниже 

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
        <script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>
    </head>
    <body>
        <script id="itemTemplate" type="text/x-jquery-tmpl">
            <tr>
                <td>${Name}</td>
                <td>${Price}</td>
                <td>${Quantity}</td>
                <td>${Total}</td>
            </tr>
        </script>

        <table id="itemList">
            <thead>
                <tr>
                    <td>Name</td>
                    <td>Price</td>
                    <td>Quantity</td>
                    <td>Total</td>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>

        <script type="text/javascript">
            $(document).ready(function(){
                var items = [
                    { Name: "Apple", Price: "80", Quantity : "3", Total : "240" },
                    { Name: "Orance", Price: "50", Quantity : "4", Total : "200" },
                    { Name: "Banana", Price: "20", Quantity : "8", Total : "160" },
                    { Name: "Cherry", Price: "250", Quantity : "10", Total : "2500" }
                ];

                $( "#itemTemplate" ).tmpl( items ).appendTo( "#itemList tbody" );
            });
        </script>
    </body>
</html>

Но если вас больше интересует, вы углубитесь в некоторые другие плагины, такие как dataTables или jqgrid , которые являются довольно хорошими инфраструктурами данных сетки с использованием jQuery.

0 голосов
/ 02 января 2011

Структура таблицы была неправильной, необходимо использовать <tbody> и <thead>, , вот рабочая скрипка . 

<table id="itemList">
<thead>
<tr>
<th>Name</th>
<th>Price</th>
<th>Quantity</th>
<th>Total</th>
</tr>
</thead>
<tbody>
</tbody>

0 голосов
/ 02 января 2011

Добро пожаловать в 2011! С новым годом! Мы живем в прекрасное и захватывающее время! Веб-разработчику больше не нужно беспокоиться о деталях ручного построения таблицы ... когда-либо.

http://datatables.net/ решит практически любую проблему, которую вы можете себе представить. Разработчики этого плагина обдумали все это. Они решили эту проблему так, что вам это не нужно, что позволяет вам сосредоточиться на своих бизнес-целях.

Не могу не подчеркнуть, насколько мощным является этот плагин JQuery. Пожалуйста, посмотрите на все многочисленные примеры на их сайте. У них даже есть пример того, как динамически добавить строку: http://datatables.net/examples/api/add_row.html.

Отказ от ответственности: я не имел ничего общего с разработкой DataTables. Я просто очень рад этому, потому что это сделало мою жизнь намного проще.

0 голосов
/ 02 января 2011

Поскольку вы работаете с JQuery, ознакомьтесь с JQuery Temaplate .Может показаться немного запутанным, но это был бы лучший подход, ИМО.

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

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

...