CODEWITHSUNDEEP
javascriptphpjqueryhtmltablesorter
Smokey
Smokey

Reputation: 1897

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.

Upvotes: 1

Views: 1367

Answers (3)

Thi49
Thi49

Reputation: 358

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 .

Upvotes: 2

pratik nagariya
pratik nagariya

Reputation: 574

Load Jquery plugin on the top of the head.

Upvotes: 0

Ranjith
Ranjith

Reputation: 2819

Include your jQuery main library at first

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

Upvotes: 0

Related Questions