Question

我是JQuery的新手。我有一张桌子。我想在我的表中应用两个插件。我使用Tablesorter和tablescroll插件。

我已包含的Javascript文件：

<script type="text/javascript" src="js/jquery-latest.js"></script>
  <script type="text/javascript" src="js/jquery.tablesorter.min.js"></script>
  <script type="text/javascript" src="js/jquery.tablescroll.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

当我在HTML的head部分中包含以下给定的代码时，没有任何作用。当我将它包含在文件末尾时，就在关闭正文标记之后，表滚动功能正常工作。表排序根本不起作用。

<script type="text/javascript">
            jQuery(document).ready(function($)

            {
                $('#showconnections').tableScroll({height:500});

                $('#showconnections').tablesorter();

            });

        </script>

我在控制台中检查了以下错误：

Uncaught TypeError: undefined is not a function

我的表格标签很简单。

<table id="myTable" cellspacing="0" class="table table-bordered table-responsive table-striped tablesorter" border="1">

    <thead>
         <tr>

                <th rowspan="2">city id</th>
                <th rowspan="2">state name</th>
              <th rowspan="2">cityname</th>
                <th rowspan="2">state code</th>
                <th rowspan="2">zip code</th>
           </tr>

    </thead>

    <tbody>
<tr>


            <td>fdfd</td>
            <td>ddffd</td>
            <td>dffd</td>
            <td>dfdf</td>
            <td>fgfd</td>
        </tr>

    </tbody>
</table>

注意：上面给出了表标签的结构。数据是假的。我的表包含多行。

Answer 1

http://jsfiddle.net/LFBmL/2/

我为你创造了小提琴。请看看它。 JavaScript代码必须像这样

<script type="text/javascript">
  $(document).ready(function() 
    { 
        $("#myTable").tablesorter();
        $('#myTable').tableScroll({height:300});
    } 
); 
</script>

注意：

“$（'＃showconnections'）”哪个元素有id“showconnections”，如果你的意思是你的表那么它必须是“myTable”
你的插件“TableScroll”和＆amp; “Table Sorted”结合起来，与UI不相符。

Answer 2

首先包含您的jQuery主库

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script type="text/javascript" src="js/jquery-latest.js"></script>
  <script type="text/javascript" src="js/jquery.tablesorter.min.js"></script>
  <script type="text/javascript" src="js/jquery.tablescroll.js"></script>

Answer 3

在头顶加载Jquery插件。

JQuery插件给出了错误

3 个答案: