динамически заполнять таблицу с помощью запроса GET - PullRequest
Новая
       7

динамически заполнять таблицу с помощью запроса GET

0 голосов
/ 17 января 2020

пустая таблица. Для заполнения таблицы продуктов ее содержимое должно создаваться динамически с помощью JavaScript для вставки данных в таблицу. Данные следует запрашивать у веб-сервера. Сначала вы должны отправить запрос AJAX GET в веб-службу. Когда этот запрос успешно возвращается, вы должны вставить возвращенные данные JSON в вашу таблицу, используя DOM

Ответы [ 2 ]

1 голос
/ 17 января 2020

Вы можете попробовать datatable плагин для полного заполнения вашего сценария

, чтобы работать с этими данными, ваши данные должны быть в формате 

    {   "draw": 1,   "recordsTotal": 57,   "recordsFiltered": 57,   "data": [
        [
          "Airi",
          "Satou",
          "Accountant",
          "Tokyo",
          "28th Nov 08",
          "$162,700"
        ],
        [
          "Angelica",
          "Ramos",
          "Chief Executive Officer (CEO)",
          "London",
          "9th Oct 09",
          "$1,200,000"
        ], 
      ] 
  }

HTML CODE 

    <table id="example" class="display" style="width:100%">
<thead>
            <tr>
                <th>First name</th>
                <th>Last name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
    <table>

JS CODE: 

$(document).ready(function() {
    $('#example').DataTable( {

        "ajax": "../server_side/scripts/server_processing.php"
    } );
} );

, включая нижеприведенные скрипты

https://code.jquery.com/jquery-3.3.1.js

https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js

0 голосов
/ 17 января 2020

Вы можете добавить динамически созданное html, используя свойство innserHTML элемента DOM.

Пример 

fetch('<some URL>')
.then((response) => {
    let data = response.json(); // Let supposed the data is in this format [{ id: 1 }, { id: 2 }, { id: 3 }]
    let tr = '';
    data.forEach(function(value) {
        tr += `<tr><td>${data.id}</td></tr>`;
    });
    document.querySelector('#table_id tbody').innerHTML = tr; //Append the data
}).catch(error => {
    console.log(error);
});

Или использовать document.createElement создать элемент и затем добавить его к DOM

fetch('<some URL>')
.then((response) => {
    let data = response.json(); // Let supposed  the data is in this format [{ id: 1 }, { id: 2 }, { id: 3 }]
    let tr = '';
    let tableBody = document.querySelector('#table_id');
    data.forEach(function(value) {
        let tr = document.createElement('tr');
        tr.textContent = data.id
        tableBody.appendChild(tr);
    });

}).catch(error => {
    console.log(error);
});

HTML

 <table id="table_id">
        <tbody>

        </tbody>
    </table>
...