Динамическое обновление HTML-таблицы с помощью JSON с использованием jQuery для сложного объекта

Question

Я все еще новичок в JSON / jQuery.

Мне нужно краткое руководство о том, как динамически заполнять Html-таблицу на клиенте. В моей таблице есть фиксированные столбцы, но строки растут динамически в зависимости от полученных данных.

Скажем, у меня есть веб-метод на сервере (GetActiveUsers), который возвращает, скажем, n-пользователей. Я использую этот sql:

select userId, Title,Surname,FirstName from Users where status=1

Пожалуйста, дайте мне пример кода

Редактировать

У меня есть решение для этого поста здесь Спасибо, ребята

Answer 1

Это идеальное приложение jQote движка шаблонов jQasery javascript. Вы можете получить его здесь: http://aefxx.com/jquery-plugin/jqote.

В качестве примера рассмотрим следующее:

// Example of your json data ... an array of user objects
[{"Title": "Dr.", "Surname": "House", "Firstname": "Geronimo"},
  {"Title": "Mr.", "Surname": "Franklin", "Firstname": "Benjamin"}]

Теперь вот шаблон, который вы бы определили в своем HTML (или в любом другом выходном файле):

<script type="text/html" id="template">
    <![CDATA[
        <tr>
            <td class="no"><%= j+1 %></td>
            <td class="title"><%= this.Title %></td>
            <td class="user"><%= this.Firstname + " " + this.Surname %></td>
        </tr>
    ]]>
</script>

Итак, мы почти закончили. Давайте определим нашу содержащую таблицу и вызовем jQote для данных json волшебным образом заполнить стол.

... your markup ...

<table id="users"></table>

... more markup ...

<script type="text/javascript">
    var jsondata = xxx // get your data somehow

    // Now call jQote on the template providing your json data
    $('#template').jqote(jsondata).appendTo($('#users'));
</script>

Вот и все (ну, это только начало, jQote гораздо мощнее, чем я мог бы здесь рассказать).

Надеюсь, вам понравится, попробуйте.

Кстати: использование в качестве контейнера вашего шаблона является совершенно законной разметкой. И браузеры не будут отображать его в любом случае.