如何对ajax从php页面请求的表进行排序

时间:2019-01-24 23:11:15

标签: javascript html json html-table php-curl

我正在一个提供表格的网站上工作,我的表格来源来自一个以json格式提供表格的api,请给我一个用户密钥来执行请求。

该计划正在我的网站的第一个A 页面中进行ajax请求,该页面将参数发送到另一个php页面B ,从而向api发出curl请求并从中获取结果请求并将其设置在首页A 问题在于排序,我可以通过在header上进行叮当来对表进行排序,这是我在w3shcool中找到的一种方法,但是我希望该表已经从 B页

中进行了排序。

这是页面A index.php

中的代码
<html>
<body>
<select id="tablslist" onchange="myfunction()">
<option value="0" selected="selected">select table</option>
<option value="1">table1</option>
<option value="2">table2</option>
<option value="3">table3</option>
</select>
<p id=put_mytable_here></p>
<script>    
function myfunction(){
    var select_tabls = document.getElementById("tablslist")
    var user_select = select_tabls.options[select_tabls.selectedIndex].value;
    if (user_select === "0"){
    document.getElementById("put_mytable_here").innerHTML = "Please Select A Table";
    }
    else{
       var xmlhttp
       xmlhttp = new XMLHttpRequest();
       xmlhttp.onreadystatechange = function() {
       if (this.readyState == 4 && this.status == 200) {   
          document.getElementById("put_mytable_here").innerHTML= this.responseText;
       }
      }  
      xmlhttp.open("GET",  "gettable.php?para="+user_select, true);
      xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
      xmlhttp.send(null);
      }  
}
</script>
</body>
</html>

页面B gettable.php中,代码为:

<?php 
$para = $_REQUEST["para"];
$get = curl_init();
curl_setopt($get, CURLOPT_URL, "https://apiserver.com/api/? 
request=get_table&table_num=$para&APIkey=***************");
curl_setopt($get, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($get, CURLOPT_HEADER, 0);
$table = curl_exec($get);
curl_close($get);
$tablejson = json_decode($table);
echo "<table id=myTable border='1'><th>#</th><th>Name</th>";
foreach ($data as $tablejson) {
  echo "<tr>";
  echo "<td>$row->data_cell_1</td>";
  echo "<td>$row->data_cell_2</td>";
  echo "<td>$row->data_cell_3</td>";
  echo "</tr>";
   }
echo "</table>";
?>

我希望从gettable.php请求的表已经被#排序,但是我  无法找到方法。

这是我在w3school中找到的代码

function sortTable() {
  var table, rows, switching, i, x, y, shouldSwitch;
  table = document.getElementById("myTable");
  switching = true;
  /*Make a loop that will continue until
  no switching has been done:*/
  while (switching) {
    //start by saying: no switching is done:
    switching = false;
    rows = table.rows;
    /*Loop through all table rows (except the
    first, which contains table headers):*/
    for (i = 1; i < (rows.length - 1); i++) {
      //start by saying there should be no switching:
      shouldSwitch = false;
      /*Get the two elements you want to compare,
      one from current row and one from the next:*/
      x = rows[i].getElementsByTagName("TD")[0];
      y = rows[i + 1].getElementsByTagName("TD")[0];
      //check if the two rows should switch place:
      if (Number(x.innerHTML) > Number(y.innerHTML)) {
        //if so, mark as a switch and break the loop:
        shouldSwitch = true;
        break;
      }
    }
    if (shouldSwitch) {
      /*If a switch has been marked, make the switch
      and mark that a switch has been done:*/
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
    }
  }
}

在gettable.php上添加<th onclick=sortTable()>#</th>之后, 是否有一种方法可以使此功能对表加载起作用而无需等待单击

谢谢

0 个答案:

没有答案