Search code examples
javascriptphpjqueryhtmltablesorter

JQuery plugin gives error


I am newbie to JQuery. I have a table. I want to apply two plugins in my table. I use Tablesorter and tablescroll plugins.

Javascript files that I've included:

<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>

When I include the below given code in head section of my HTML, nothing works. And when I include it at the end of the file, just after the closing body tags, table scroll function works. Table sorting doesnot work at all.

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

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

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

            });

        </script>

I checked in the console, following error is given:

Uncaught TypeError: undefined is not a function 

My table tag is simple.

<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>

NB: structure of the table tag is given above. data is dummy. my table contains multiple rows.


Solution

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

    I have created fiddle for you.please look into it. The JavaScript code must be like this

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

    Note:

    • "$('#showconnections')" which element has id"showconnections" ,if you meant your table then it must be "myTable"
    • Both your plugins "TableScroll" & "Table Sorted" combined ,dont go well with UI .