【问题标题】:Using jQuery tablesorter, I can't get it to do work for my table. Where am I going wrong?使用 jQuery 表格排序器,我无法让它为我的表格工作。我哪里错了?
【发布时间】:2015-05-12 11:43:39
【问题描述】:

大家好,我正在尝试使用 jQuery 插件表排序器 (tablesorter.com)。我根据他们的演示制作了一个测试页面,它没有问题。但是现在我正在尝试将它实施到我的网站中,但我无法让它为我做任何事情。这是我的代码。

HTML/PHP

    <table border="0" cellpadding="0" cellspacing="0" id="orgTable" class="tablesorter">
<thead>
<tr>
    <th><?=$languageDB->berkGet("object_organization_name");?></th>
    <th><?=$languageDB->berkGet("object_organization_description");?></th>
    <th><?=$languageDB->berkGet("object_organization_system_name");?></th>
    <th><?=$languageDB->berkGet("object_organization_status");?></th>
    <th><?=$languageDB->berkGet("object_organization_client");?></th>
    <th><?=$languageDB->berkGet("object_organization_actions");?></th>
</tr>
</thead>
<?foreach ($organizations as $organizationObj) {
    foreach ($organizationObj as $curOrg) {
        if($curOrg->get("name") == "System"){
            //Hide the System organization from vCloud 
            continue;
        }?> 
    <tbody> 
    <tr>
        <td><?=$curOrg->get("name");?></td>
        <td><?=$curOrg->get("description")===""?"None":$curOrg->get("description")?></td>
        <td><?=$curOrg->get("systemName")?></td>
        <td><?=$status[$curOrg->get('status')];?></td>
        <td id="client<?=$curOrg->get('id');?>">            
            <?if($curOrg->get("clientId")==0){ ?>
                <button class="btn btn-tiny btn-reverse associate" data-uid="<?=$curOrg->get('id');?>"><?=$languageDB->berkGet("action_associate");?></button>
            <?} else{ 
                $client=new client($curOrg->get("clientId"));?>
                <?=$client->get("companyName");?>
            <?}?>
        </td>
        <td><a href="/organizationDetails.php?id=<?=$curOrg->get('id');?>" class="btn btn-tiny"><i class="fa fa-info-circle"></i></a>
            <?if($curOrg->get("clientId")>0){ ?>
                <button class="btn btn-danger btn-tiny" id="remove" data-uid="<?=$curOrg->get('id');?>" data-name="<?=$curOrg->get('name');?>"><i class="fa fa-trash"></i> </button>
            <?}?>
    </tr>
    </tbody>

    <?}
}?>
</table>

Javascript

<script type="text/javascript" src="js/jquery-1.9.1.js" />
<script type="text/javascript" src="js/jquery.tablesorter.js" />
<script type="text/javascript">

$(document).ready(function() 
    { 
        $("#orgTable").tablesorter(); 
    } 
); 
</script>

【问题讨论】:

  • 你有什么错误吗?
  • 我在 http 方面或 javascript 方面没有收到任何错误。
  • &lt;script&gt; 标签不应自动关闭。
  • 谢谢你的提示,我从来不知道这个我从来没有使用过javascript。我已经修复了标签,但它仍然无法正常工作。
  • 我的问题已经解决了。 标签需要放在 for 循环之外。谢谢大家的帮助:)

标签: javascript php jquery html


【解决方案1】:

将您的 &lt;tbody&gt; 放在 for 循环之外。

...
</thead>

<tbody> 
<?foreach ($organizations as $organizationObj) {
    foreach ($organizationObj as $curOrg) {
        if($curOrg->get("name") == "System"){
            //Hide the System organization from vCloud 
            continue;
        }?> 

    <tr>
        <td><?=$curOrg->get("name");?></td>
        <td><?=$curOrg->get("description")===""?"None":$curOrg->get("description")?></td>
        <td><?=$curOrg->get("systemName")?></td>
        <td><?=$status[$curOrg->get('status')];?></td>
        <td id="client<?=$curOrg->get('id');?>">            
            <?if($curOrg->get("clientId")==0){ ?>
                <button class="btn btn-tiny btn-reverse associate" data-uid="<?=$curOrg->get('id');?>"><?=$languageDB->berkGet("action_associate");?></button>
            <?} else{ 
                $client=new client($curOrg->get("clientId"));?>
                <?=$client->get("companyName");?>
            <?}?>
        </td>
        <td><a href="/organizationDetails.php?id=<?=$curOrg->get('id');?>" class="btn btn-tiny"><i class="fa fa-info-circle"></i></a>
            <?if($curOrg->get("clientId")>0){ ?>
                <button class="btn btn-danger btn-tiny" id="remove" data-uid="<?=$curOrg->get('id');?>" data-name="<?=$curOrg->get('name');?>"><i class="fa fa-trash"></i> </button>
            <?}?>
    </tr>    
    <?}
}?>
</tbody>
</table>

【讨论】:

  • 这解决了我的问题。非常感谢:)
【解决方案2】:

使用 Jquery 数据表

在你的情况下:

$(document).ready(function() 
    { 
        $("#orgTable").DataTable(); 
    } 
);

https://www.datatables.net/examples/basic_init/zero_configuration.html

更新: 如果您不想更改您的表格排序器或使用任何其他 jQuery 插件进行表格排序,请检查您的 &lt;script&gt; 标签

使用:

&lt;script type="text/javascript"&gt;&lt;/script&gt;

而不是:

&lt;script type="text/javascript"/&gt;

【讨论】:

  • 我已经更新了标签,但还是不行。
  • 用“网络”中的检查元素检查或资源会话必须抛出任何错误,在这种情况下我相信你的脚本路径一定是错误的。
  • 看来是jQuery的问题,检查你的jQuery版本或者重新下载最新的jQuery库。
  • 我已经解决了我的问题。 标签需要在 for 循环之外并且脚本标签需要关闭。不过谢谢你的帮助:)
  • 很高兴你修好了。
【解决方案3】:

那是因为脚本标签不能是自闭合标签

<script type="text/javascript" src="js/jquery-1.9.1.js"></script> 
<script type="text/javascript" src="js/jquery.tablesorter.js"></script>
<script type="text/javascript">

$(document).ready(function() 
    { 
        $("#orgTable").tablesorter(); 
    } 
); 
</script>

【讨论】:

  • 请注意,您使用的脚本标签的第一行是自关闭的,这是不正确的,因此以后的脚本标签将不会加载
  • 我已经添加了标签,但仍然没有变化。
  • 它是否在 firebug 或您正在使用的控制台中抛出任何错误?
  • 现在试试上面的答案!
猜你喜欢
相关资源
最近更新 更多
热门标签