将Ajax与表排序/筛选相结合
Combining Ajax with table sorting/filtering
问题是:我使用JQuery表分类器对表进行分页。从数据库中提取表行,如下所示:
//list players by points (default listing)
$result=mysql_query("select * from players order by pts_total") or die(mysql_error());
echo "<table id='list_table' class='tablesorter'><thead><tr><th width='25px'>Pos</th><th width='200px'>Player</th><th width='25px'>Club</th><th width='25px'>Value</th><th width='25px'>Points</th></tr></thead><tbody>";
while($row=mysql_fetch_array($result)){
//get team logo
$result1=mysql_query("select amblem from real_teams where team_name='$row[team]' ") or die(mysql_error());
$row1=mysql_fetch_array($result1);
echo "<tr>";
echo "<td>T</td>";
echo "<td>".$row['name']."</td>";
echo "<td style='text-align:center;'><img src='".$row1['amblem']."' height=16px title='".$row['team']."'></td>";
echo "<td>".$row['current_value']."</td>";
echo "<td>".$row['pts_total']."</td>";
echo "</tr>";
}
echo "</tbody></table>";
这一切都很好,表格是分页的,它列出了足球运动员。但问题是,我有一个下拉列表,用户应该可以选择只显示打某个位置的玩家(该信息在同一数据库表中):
<select name="show_positions" id="show_positions" onChange="showPlayers(this.value)">
<option value="A">All Positions</option>
<option value="G">Goalkeepers</option>
<option value="D">Defenders</option>
<option value="M">Midfielders</option>
<option value="S">Strikers</option>
</select>
它调用了一个Ajax函数,该函数只显示一个只有在某个位置上比赛的球员的表格,它做了它应该做的事情,但表格不再分页。相反,它显示了一张大桌子。我想这是因为分页的Javascript没有被处理,因为页面没有被重新加载?有没有办法在Ajax调用期间再次调用Javascript函数?以下是Ajax及其调用的PHP文件:
<script type="text/javascript">
function showPlayers(str)
{
if (str=="")
{
document.getElementById("inner_list").innerHTML="";
return;
}
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 (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("inner_list").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","listplayers.php?q="+str,true);
xmlhttp.send();
}
</script>
listplayers.php:
<?php
include('../include/db.php');
dbConnect('dbname');
$pos=$_GET['q'];
if ($pos=="A")
$pos="";
//list players by points (default listing)
$result=mysql_query("select * from players where position LIKE '%$pos%' order by pts_total") or die(mysql_error());
echo "<table id='list_table' class='tablesorter'><thead><tr><th width='25px'>Pos</th><th width='200px'>Player</th><th width='25px'>Club</th><th width='25px'>Value</th><th width='25px'>Points</th></tr></thead><tbody>";
while($row=mysql_fetch_array($result)){
//get team logo
$result1=mysql_query("select amblem from real_teams where team_name='$row[team]' ") or die(mysql_error());
$row1=mysql_fetch_array($result1);
echo "<tr>";
echo "<td>T</td>";
echo "<td>".$row['name']."</td>";
echo "<td style='text-align:center;'><img src='".$row1['amblem']."' height=16px title='".$row['team']."'></td>";
echo "<td>".$row['current_value']."</td>";
echo "<td>".$row['pts_total']."</td>";
echo "</tr>";
}
echo "</tbody></table>";
?>
以及位于页面顶部的表分类器JQuery:
<script type="text/javascript">
$(document).ready(function() {
$("table")
.tablesorter({widthFixed: true, widgets: ['zebra']})
.tablesorterPager({container: $("#pager"), size: 20});
});
</script>
在回调处理程序中,在DOM中插入表后,应再次调用表上的表分类器插件以重新初始化它
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("inner_list").innerHTML=xmlhttp.responseText;
$("#list_table").tablesorter( );
}
为了确保始终使用相同的选项,您可以将它们保存在对象中
$(document).ready(function(){
var list_table_options = {sortList: [[0,0], [1,0]]};
$("#list_table").tablesorter( list_table_options );
});
我认为如果你使用jQuery会更好,所以使用它的.ajax()
方法,而不是简单的XMLHttpRequest()
,这样你就可以使用成功或失败处理程序,这非常有用。
相关文章:
- 将图像上传ajax与表单提交ajax相结合
- 将语句与jquery相结合,并使用媒体查询来实现返回页首按钮
- 媒体查询与Javascript相结合
- 为什么可以'我将谷歌地图getCurrentPosition与地点搜索API相结合
- 如何在不使用css转换的情况下将jQuery animate与css3属性相结合
- 将jQuery选择器与“this”相结合
- 将键盘使用与 Qualtrics 中的答案随机化相结合
- iframe与Javascript相结合的zipcode检查器
- 将n个对象与javascript相结合
- 将JSON数组与jQuery相结合
- NPM:将多个模块和自定义脚本与browserfy相结合
- 将coffee和js开发与Gulp相结合
- ES6对象简写表示法可以与常规对象表示法相结合吗
- 将JavaScript与数据库表中的值相结合
- 是否有一种搜索引擎友好的方法可以将服务器端呈现的 HTML 与客户端 MVVM/MVC 框架相结合
- 将范围值与筛选器结合使用
- 将过滤器与分页角度相结合
- 将模式与输入字段的最大长度相结合
- 将Ajax与表排序/筛选相结合
- 如何将Select2标记与DataTables正则表达式筛选相结合