JQuery AJAX заполнить HTML-таблицу - PullRequest
Новая
       34

JQuery AJAX заполнить HTML-таблицу

5 голосов
/ 18 мая 2011

Если у меня есть стол: 

<table>
    <thead>
        <tr>Col1</tr>
        <tr>Col2</tr>
        <tr>Col3</tr>
    </thead>
    <tbody>
    </tbody>
</table>

Какой самый быстрый и эффективный способ заполнить tbody элементами tr, содержащими мои данные из базы данных, используя Jquery Ajax. (если у вас нет лучшего способа)

Вернуть HTML-код из веб-службы ИЛИ динамически создать HTML-код в Javascript?

Кроме того, я должен поддержать "детализацию" пользователя, т. Е. Либо щелкнуть>, либо дважды щелкнуть строку, чтобы открыть панель для отображения дополнительной информации. (Включая другую таблицу и некоторую подробную информацию, возвращаемую отдельным веб-сервисом)

Все идеи приветствуются!

Ответы [ 5 ]

3 голосов
/ 18 мая 2011

Если вам не нужно создавать буквально тысячи строк, производительность здесь не имеет значения.Где вы генерируете разметку - это действительно дизайнерское решение.Вы можете сгенерировать разметку:

  • на стороне сервера, на выбранном вами языке шаблонов (шаблоны ASP.NET, PHP, JSP, Django ...) или
  • на стороне клиента, используя шаблоны JavaScript ($.tmpl, Усы ...)

Клиентская сторона (теоретически) уменьшит нагрузку на ваш сервер, но этотоже скорее всего не актуальная проблема.Какой бы вкус вы ни выбрали, вы должны использовать это последовательно во всем приложении, если нет действительно веской причины поступить иначе.

2 голосов
/ 18 мая 2011

Я работаю на крупном корпоративном портале, использующем jQuery и AJAX.Я реализовал jQuery Templates и jQuery TableSorter plug-in, чтобы облегчить это.Вот пример кода:

Javascript (поставщик данных): Data.Lists.js 

myorg.data.list.GetListItems ({
    webURL: "http://our.awesome.portal.com/Lists",
    listName: "Projects List",
    caml: caml,
    CAMLRowLimit: 6,
    callback: function(data) {
        var list = {};
        //code here that formats some data before binding
        list.items = data;
        var templateHtml = $('.ptMyProjects').html()
        .replace("<!--", "").replace("-->","");
        var html = $.tmpl(templateHtml, list);
        $('.ptMyProjects').html(html);
        //make sortable table
        $('.ptMyProjects .tablesorter').tablesorter({
            sortList: [[0,0]],
            headers: {3: {sorter: false}},
            widgets: ['zebra']
        });
        //class last row
        $('.ptMyProjects .tablesorter thead th').last().addClass('last');
        //add hover effect
        $('.ptMyProjects .tablesorter tbody tr, .tablesorter thead .header').hover(function(){
            $(this).addClass('hover');
        }, function(){
            $(this).removeClass('hover');
        });
        //add tooltips
        $('.ptMyProjects .vg_icon').tipsy({gravity: 's'});
    }
});

HTML (шаблон) 

<div class="ptMyProjects ptTemplate">
    <!--
    <table class="tablesorter" border="0" cellpadding="0" cellspacing="0">
        <thead>
            <tr class="gradient_gray">
                <th>Title</th>
                <th>Status</th>
                <th style="border-right: none;">Progress</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
        {{if items.length > 0}}
            {{each items}}
                <tr class='item' recordid="${ows_ID}">
                    <td ><a class='{{if ows_Critical_x0020_Project == "1"}}critical{{/if}}' href="${DisplayURL}">${ows_Title}</a> </td>
                    <td class="status">
                        <a href="#" class="pstatus">${ows_ProjStatus}</a>
                        <div style='display: none;'>
                            {{if ows_ProjComments}}
                                <div style="padding-bottom: 10px;">${ows_ProjComments}</div>
                            {{/if}}
                            <div style="font-weight: bold;">Lasted Edited By ${Editor}</div>
                            <div style="font-style: italic;">${when}</div>
                        </div>
                    </td>
                    <td>
                    <div class="ui-widget-default">
                        <div class="progressbar" value="${ows_PercentComplete}" style="height:100%;"></div>
                    </div>
                    </td>
                    <td class="actions">
                        {{if ows_ProjStatus != "Completed"}}<a href="#" class="vg_icon tick" title="Mark Completed"></a>{{/if}}
                        <a href="${EditURL}" class="vg_icon pencil" title="Edit"></a>
                        <a href="#" class="vg_icon comment" title="Comments"></a>
                    </td>
                </tr>
            {{/each}}
        {{else}}
            <tr><td colspan="4">You have no projects.</td></tr>
        {{/if}}
        </tbody>
    </table>
-->
</div>
2 голосов
/ 18 мая 2011

Вы можете использовать вызов jQuery .ajax () для возврата данных в объект JSON и использовать шаблонный плагин .tmpl () для рендеринга HTML.

Вы можете просмотреть документацию по шаблонам здесь: http://api.jquery.com/tmpl/

Обновление: я опубликовал пример в качестве ответа на другой вопрос

2 голосов
/ 18 мая 2011

Возврат HTML из веб-службы тесно связывает ваш код. Лучшим из двух способов является создание HTML в Javascript.

1 голос
/ 03 октября 2011

Это решение работает очень хорошо для меня.

Я просто извлекаю двумерный массив JSONed из вызова AJAX PHP.
(Используя функцию php json_encode ())

Тогдапросто итерируйте по массиву для создания вставляемых строк таблицы.как показано здесь. 

$.post("./pdo_select.php", {post_query : view_q }, function(data) {
            var textToInsert = '';
            $.each(data, function(row, rowdata) {
               textToInsert += '<tr>';
               $.each(rowdata, function (ele, eledata){
                  textToInsert  += '<td>' + eledata + '</td>';
               });
               textToInsert += '</tr>';
            });
            $("#questions_table").append(textToInsert);

}, 'json');

Обратите внимание на дополнительный параметр 'json'.

Вся таблица может быть легко обработана стандартным jQuery, от добавления строки заголовка, превращения одной или нескольких строк или таблиц в поля ввода.

Я полагаю, вам не нужно использоватьPDO подпрограммы для получения деталей из базы данных, если вы не хотите.

Ниже приведено изображение таблицы, построенной с использованием метода, перечисленного выше enter image description here

...