Member 13929859 Ответов: 2

Каков наилучший подход, чтобы построить дерево, как объект DataTable выбор?

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

Что я уже пробовал:

Вот где я сейчас нахожусь

Стол 
$resultsupplier = mysqli_query($con,"SELECT supplier_id, supplier_name, supplier_origin FROM supplier");
<table class="table table-dark" id="SupplierTable">
  <thead>
    <tr>
      <th scope="col">ID</th>
      <th scope="col">Name</th>
      <th scope="col">Origin</th>
    </tr>
  </thead>
  <tbody>
      <?php
    while($row = mysqli_fetch_array($resultsupplier))
        {
            echo "<tr class=\"clickable-row\" id=\"" . $row['supplier_id'] . "\">";
            echo "<td>" . $row['supplier_id'] . "</td>";
            echo "<td>" . $row['supplier_name'] . "</td>";
            echo "<td>" . $row['supplier_origin'] . "</td>";
            echo "</tr>";
        }
?>
        </tbody>
    </table>


Скрипт 
<script>
    $('#SupplierTable').on('click', '.clickable-row', function(event) 
        {
            if($(this).hasClass('active'))  
            {
                $(this).removeClass('active');
                var x = document.getElementById("OrderT");
                x.style.display = "none";
                console.log($(this).attr('id'));
            } else 
            {
                $(this).addClass('active').siblings().removeClass('active');
                var x = document.getElementById("OrderT");
                x.style.display = "block";
                console.log($(this).attr('id'));
            }
        });   
        

        
        
    $(".clickable-row").click(function()
        {
            if($(this).hasClass("highlight"))
            $(this).removeClass('highlight');
        else
            $(this).addClass('highlight').siblings().removeClass('highlight');
        })        
</script>


Таблица 2 (на данный момент просто загружает SupplierTable снова, так как я не могу понять, как я могу передать идентификатор в таблицу 2) 

<div id="OrderT" style="display: none;">
        <?php OrderTable(); ?>
    </div>


Так что же мне теперь делать, поскольку js-это только клиентская сторона, я не могу передать id в запрос SELECT для таблицы 2 или я ошибаюсь ? Может быть, мне нужно использовать ajax, по крайней мере, это то, что я читал в googleing...
Или я начал совершенно неправильно ?

я не хочу перенаправлять на новую страницу если нет другого способа перезагрузка будет в порядке если выбор из таблицы 1 не будет сброшен должно быть самоописывающимся я думаю

Обновление 1 : может быть, работа с переменными в ссылке "заголовок"и передача какой-то переменной ?

2 Ответов

Рейтинг:
17

Gerry Schmitz

Извлечение данных с сервера - Learn web development | MDN[^]

Рейтинг:
1

Member 13929859

Я сделал это сейчас работал нормально, но как я могу вызвать то же самое событие select на Таблице 2, похоже, оно не работает, потому что таблица загружается после скрипта для выбора, я думаю.
я попытался загрузить первую таблицу, так как переключатель выбран, но не могу заставить скрипт select работать, вызывая таблицу из обычной функции php.

Переключатели для фильтрации перед первой загрузкой таблицы

<div class="container">
    How to Order the View
     <form id="OrderType">
    <input type="radio" name="my_options" value="bysup"> Supplier
    <input type="radio" name="my_options" value="bycust"> Customer
    <input type="radio" name="my_options" value="byday"> Next 7 Days
</form>


Handles Radio button and table selecton (загрузка таблицы 2 после того, как была выбрана строка таблицы 1, работала таким образом, но, как я уже сказал, не могла заставить выбор работать на таблице 2, теперь это то же самое для таблицы 1)
function handler(str, caller) {
    if (caller == "Supplier"){ // Supplier Call
        if (str == "") {
        document.getElementById("OrderBySupplierDiv").innerHTML = "";
        return;
    } else  {
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("OrderBySupplierDiv").innerHTML = this.responseText;
            }
        };
        xmlhttp.open("GET","../tables/ordertable.php?q="+str,true);
        xmlhttp.send();
    }
}else if (caller == "Radio"){ // Radio Call
    if (str == "") {
        document.getElementById("OrderBySupplierDiv").innerHTML = "";
        return;
    } else  if (str == "bysup") { // order by supplier
        
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("OrderBySupplierDiv").innerHTML = this.responseText;
            }
        };
        xmlhttp.open("GET","../tables/suppliertable.php",true);
        xmlhttp.send();
    }
}
    }


Стол
<?php
require_once("../db/dbcon.php");
        $con = con(); ?>
<?php
if (!$con) {
    die('Could not connect: ' . mysqli_error($con));
}


$sql="SELECT supplier_id, supplier_name, supplier_origin FROM supplier";

$result = mysqli_query($con,$sql);

echo "<h3>Orders</h3>
<table class=\"table table-dark\" id=\"SupplierTable\">
<thead>
<tr>
<th scope=\"col\">ID</th>
<th scope=\"col\">Name</th>
<th scope=\"col\">Origin</th>
</tr>
</thead>
<tbody>";
while($row = mysqli_fetch_array($result)) {
    
    echo "<tr class=\"clickable-row\" id=\"" . $row['supplier_id'] . "\">";
            echo "<td>" . $row['supplier_id'] . "</td>";
            echo "<td>" . $row['supplier_name'] . "</td>";
            echo "<td>" . $row['supplier_origin'] . "</td>";
            echo "</tr>";   
    
}
mysqli_close($con);
?>


Выделение и подсветка все те же что и в моем оригинальном посте