Как сделать вывод данных из JS в таблицу?

Question

[Наталья]

Получаю данные из БД

$users=get_users();
echo json_encode($users);

function get_users(){
	global $db;
	$query = "SELECT  t.ID_Teacher,t.Surname,t.Name,t.Patronymic
                    FROM Teachers t
                         LEFT JOIN Users u
                         ON t.ID_Teacher=u.ID_User";
	$result = mysqli_query($db, $query);
	$data = null;
	while($row = mysqli_fetch_assoc($result)){
		$data[] = $row;	
	}
	return $data;
}

Вывожу данные без перезагрузки

function getStudents() {
				$.ajax({
					url: 'getUser.php',
					dataType: "json",
				}).done(function(studentsList ){
					var table = document.getElementById('tab1');
					

					
					var studentsHTML = "";
					

					for(var i=0; i<studentsList.length; i++){
						
						studentsHTML += studentsList[i].Surname;
						studentsHTML += " "+studentsList[i].Name;
						studentsHTML += " "+studentsList[i].Patronymic;
						studentsHTML += " <a href=\"#\" "+"onclick=\"deleteStudent("+studentsList[i].ID_Teacher+"); return false;\">Удалить</a>";
						studentsHTML += "<br />";
					}
					$("#students").html(studentsHTML);
				}).fail(function(){
					alert('Ошибка запроса к серверу!');
				});
			}
			getStudents();

Как сделать вывод данных в таблицу?

Comments

[Кирилл Жуковский]

Наталья здравствуйте, можете поделиться этим проектом?,хочу просто разобраться в коде..(я просто новичок)

Answer 1

[Александр Токарчук]

var studentsHTML = "<table><tr><th>#</th><th>Фамилия</th> ... ";

studentsHTML += "<td>" + studentsList[i].Surname + "</td>”;

И т.д.

Comments

[Наталья]

не работает. может что-то не так делаю?

[Александр Токарчук]

Наталья, измененный код в студию =)

[Наталья]

Александр Токарчук,

function getStudents() {
        $.ajax({
          url: 'getUser.php',
          dataType: "json",
        }).done(function(usersList ){
          
          var usersHTML = "<table>";
		   usersHTML += "<thead>";
           usersHTML += "<tr>";
          
           usersHTML += "<th>#</th>";
           usersHTML += "<th>Фамилия</th>";
		   usersHTML += "<th>Имя</th>";
		   usersHTML += "<th>Отчество</th>";
		   
           usersHTML += "</tr>";
		   usersHTML += "</thead>";
		  
		   usersHTML = "<tbody>";
          for(var i=0; i<usersList.length; i++){
			usersHTML += "<tr>";
            usersHTML += "<td>" + usersList[i].Surname + "</td>";
			usersHTML += "<td>" + usersList[i].Name + "</td>";
			usersHTML += "<td>" + usersList[i].Patronymic + "</td>";
            usersHTML +="</tr>";
          }
		  usersHTML += "</tbody>";
		  usersHTML += "</table>";
		  
          $("#users").html(usersHTML);
        }).fail(function(){
          alert('Ошибка запроса к серверу!');
        });
}
      getStudents();

Выводит точно так же, как и было.

[Александр Токарчук]

Наталья, не может так же выводит как и было =) У вас этот код в отдельном файле JS ?
Попробуйте обновиться Ctrl+F5

[Наталья]

Александр Токарчук, да, в отдельном. обновляла. все так же.

[Александр Токарчук]

Наталья, а если так:

function getStudents() {
        $.ajax({
          url: 'getUser.php',
          dataType: "json",
        }).done(function(usersList ){
          
          var usersHTML = "<table>";

           usersHTML += "<tr>";
          
           usersHTML += "<th>#</th>";
           usersHTML += "<th>Фамилия</th>";
       usersHTML += "<th>Имя</th>";
       usersHTML += "<th>Отчество</th>";
       
           usersHTML += "</tr>";

      

          for(var i=0; i<usersList.length; i++){
      usersHTML += "<tr>";
            usersHTML += "<td>" + usersList[i].Surname + "</td>";
      usersHTML += "<td>" + usersList[i].Name + "</td>";
      usersHTML += "<td>" + usersList[i].Patronymic + "</td>";
            usersHTML +="</tr>";
          }

      usersHTML += "</table>";
      
          $("#users").html(usersHTML);
        }).fail(function(){
          alert('Ошибка запроса к серверу!');
        });
}
      getStudents();

[Наталья]

Александр Токарчук, воот так получилось =) спасибо!
только нет границ у таблицы((

[Александр Токарчук]

Наталья, пожалуйста
<table border=1>

Не забывайте отмечать решения, чтобы помогать подрастающему поколению программистов ;)

[Наталья]

Александр Токарчук, предыдущий код все таки тоже рабочим оказался :D моя вина - я у usersHTML = "<tbody>";
"+" пропустила.
Спасибо Вам огромное за помощь!

[Наталья]

Александр Токарчук, извините, что снова обращаюсь. не подскажете, как можно при клике на ссылку, например

studentsHTML += " <a href=\"#\" "+"onclick=\"redStudent("+studentsList[i].ID_Stud+"); return false;\">Редактировать</a>";

вывести определенные данные (по studentsList[i].ID_Stud) в текстовые поля, отредактировать и при нажатии кнопки перезаписать в таблицу.
с редактированием и добавлением новых данных разобралась, а с редактированием совсем напряг

[Александр Токарчук]

Наталья, обращаться можно сколько угодно раз =)
Но по правилам один вопрос - одна тема. Я бы рекомендовал сделать новое задание с более подробным описанием. Сейчас непонятно что за функция redStudent().
и по формулировке

с редактированием и добавлением новых данных разобралась, а с редактированием совсем напряг

не совсем понял с чем напряг, а а с чем все ок =)

 P.S.: Если пропущу вопрос, там есть кнопочка "Пригласить эксперта"

Answer 2

[Анатолий Медведев]

https://webref.ru/course/html-content/tables

Comments

[Наталья]

спасибо конечно, но в html у меня получается построить. вопрос в том, как сделать вывод без перезагрузки, так как данные потом изменяться будут

Answer 3

[Mysterion]

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

Comments

[Наталья]

можно пример? в JS не сильна

[Mysterion]

Наталья,
php

$users=users_table_html();
echo json_encode($users);

function get_users(){
  global $db;
  $query = "SELECT  t.ID_Teacher,t.Surname,t.Name,t.Patronymic
                    FROM Teachers t
                         LEFT JOIN Users u
                         ON t.ID_Teacher=u.ID_User";
  $result = mysqli_query($db, $query);
  $data = null;
  while($row = mysqli_fetch_assoc($result)){
    $data[] = $row;	
  }
  return $data;
}
function users_table_html() {
$data = get_users();
$html = "<table>";
foreach($data as $value) {
    $html .= "<tr>";
    $html .= "<td>{$value['firstname']}</td>";
    $html .= "<td>{$value['lastname']}</td>";
    $html .= "</tr>";
}
$html .= "</table>";
}

js

function getStudents() {
    $.ajax({
        url: 'getUser.php',
        dataType: "json",
    }).done(function(studentsList) {
        $("#students").html(studentsList);
    }).fail(function() {
        alert('Ошибка запроса к серверу!');
    });
}
getStudents();