我正在尝试做一个简单的表,数据由 WordPress 上的 php/mysql 填充。
我的目标是:当用户点击<th>
时,ajax 将使用 get
重新加载表。参数,因此表格将按特定列排序。
如果我像这样访问我的 URL:localhost/table?data=desc or localhost/table?data=asc
它有效,但我想用ajax 来做到这一点。这是我的代码的一部分:
JS:
$(document).on('click','#order_data',function() {
$.ajax({
url: '/table?data=desc',
type: 'GET',
success: function(msg) {
$("#main_container").load(location.href + " #table_demos");
}
});
});
});
HTML
<div id="main_container">
<table class="table table-striped table-bordered table-hover" id="table_demos">
<thead>
<th id="order_data">Data
<?php
if(isset($_GET['data']) && $_GET['data'] == 'asc') {
echo '<i class="fa fa-arrow-up" aria-hidden="true"></i>';
} else if(isset($_GET['data']) && $_GET['data'] == 'desc') {
echo '<i class="fa fa-arrow-down" aria-hidden="true"></i>';
}
?>
</th>
<th>Versus</th>
<th>Mapa</th>
<th>Placar</th>
<th>Baixar</th>
</thead>
<tbody>
<?php
$conexao = mysqli_connect("localhost","root","321","local_test");
if(mysqli_connect_errno()) {
echo "Falha na conexão MySQL.";
} else {
$data = '';
if(isset($_GET['data'])) {
if($_GET['data'] == 'asc') {
$data = 'order by data asc';
} else if($_GET['data'] == 'desc') {
$data = 'order by data desc';
}
}
$query = mysqli_query($conexao,"SELECT * FROM demo_cadastro {$data}");
while ($row = mysqli_fetch_assoc($query)) {
echo '<tr>';
echo '<td>' . transformar_data($row['data']) . '</td>';
echo '<td><a href="' . $row['link_adversario'] . '" target="_blank">' . $row['nome_adversario'] . '</a></td>';
echo '<td>' . $row['mapa'] . '</td>';
echo '<td>' . $row['pontos_marcados'] . 'x' . $row['pontos_sofridos'] . '</td>';
if($row['link_demo'] == '#') {
echo '<td><a href="' . $row['link_demo'] . '" class="demo-indisponivel-swal"><i class="fa fa-cloud-download" aria-hidden="true"></i></a></td>';
} else {
echo '<td><a href="' . $row['link_demo'] . '"><i class="fa fa-cloud-download" aria-hidden="true"></i></a></td>';
}
echo '</tr>';
}
mysqli_free_result($query);
}
mysqli_close($conexao);
function transformar_data($data) {
$data_explode = explode('-', $data);
return $data_explode[2] . '/' . $data_explode[1] . '/' . $data_explode[0];
}
?>
</tbody>
</table>
</div>
我想我只是搞乱了 ajax 调用......
感谢您的建议!
最佳答案
类似这样的吗?
$(document).on('click','#order_data',function() {
$("#main_container").load('/table?data=desc');
});
(您有点混合了 ajax 调用和加载功能。我相信后者会为您工作。)
关于JavaScript ajax(获取),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48551206/