数据表:排序箭头没有响应,如何让他们实际排序表?

时间:2013-11-14 08:45:51

标签: jquery sorting datatables jquery-datatables

我已经设置了一个具有非常基本设置的表(oLanguage,bFilter:false,bSort:true),它确实显示了columnd标题中的排序箭头(first col只显示向上箭头)。但是,单击任何其他箭头不会做任何事情...... 我怎样才能让他们做出回应?

(错误 - 控制台没有显示任何问题)

这是一个精简的例子:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.01 Strict//EN">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<html>
    <head>
        <title>data</title>
        <link rel="stylesheet" type="text/css" href="inc/jquery.dataTables.css" />
        <link rel="stylesheet" type="text/css" href="inc/jquery.dataTables_themeroller.css" />
        <link rel="stylesheet" href="themes/base/jquery.ui.all.css" />
    </head>
    <script type="text/javascript" src="inc/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="inc/jquery-1.9.1.js"></script>      
    <script type="text/javascript" src="inc/jquery.ui.core.js"></script>    
    <script type="text/javascript" src="inc/jquery.ui.widget.js"></script>      

    <script type="text/javascript" src="inc/jquery.dataTables.js"></script>    
    <body>

        <table width="100%" id="vorgangsliste">
            <thead>

                <tr>
                    <th class="left" width="50px" align="center"> <b>ID</b> </th>
                    <th class="left" width="50" align="left"> <b>Termin</b> </th>
                    <th class="middle" width="100px" align="left"> <b>Author</b> </th>
                    <th class="left" width="*" align="left"> <b>Titel</b> </th>
                    <th class="FlowLine" width="50px" align="right"> &nbsp; </th>
                </tr>
            </thead>
            <tbody>
                <tr class='oddRow'>
                    <td class="left" width="200px" align="center">BaasTest-20131114-0720</td>
                    <td width="100px" >
                    28.12.2012        </td>
                    <td class="middle" width="100px" align="left">Michael Baas</td>
                    <td class="right" width="*" align="left">
                        <a href="#">Manuell angelegt</a>
                    </td>
                    <td width="50px" align="right">
                        <a href="#">L</a>
                    </td>
                </tr>
                <tr class='evenRow'>
                    <td class="left" width="200px" align="center">BaasTest-20131114-0902</td>
                    <td width="100px" >
                    24.12.2012        </td>
                    <td class="middle" width="100px" align="left">Michael Baas</td>
                    <td class="right" width="*" align="left">
                        <a href="#">Nochmals manu</a>
                    </td>
                    <td width="50px" align="right">
                        <a href="#">L</a>
                    </td>
                </tr>
            </tbody>
        </table>

        <script type="text/javascript" charset="utf-8">
            $(document).ready(function() {
                $('#vorgangsliste').dataTable({
                    "oLanguage": { "sUrl": "inc/language/de_DE.txt" }  ,
                    "bFilter": false,
                    "bSort":true
                }
                );
            } );
        </script>

    </body>
</html>

编辑11月15日:这变得更加陌生和陌生:我设法通过设置更改"bfilter":true让我的示例工作。但是,当我在生产代码中执行此操作时,它没有那种效果。令人惊讶的是,当我改回"bfilter":false

2 个答案:

答案 0 :(得分:0)

确保所有列都有标题。如果您的任何表格列没有相应的标题,则箭头将无响应。

答案 1 :(得分:0)

哦,我的,这是一个漫长而艰难的练习 - 但最终我找到了原因:在"oLanguage": { "sUrl": "inc/language/de_DE.txt" }语句中,我指的是一个不存在的文件。最后在正确的位置提供该文件后,一切正常! :)