CODEWITHSUNDEEP
jquerytablesorter
Alist3r
Alist3r

Reputation: 556

Tablesorter Jquery plugin not work (asp project)

I've a simple table with thead and tbody.

I've added this to my site.master:

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

And this before the table in the asp page:

$(document).ready(function () {

                $(function () {
                    $("#DispTable").tablesorter();
                });
            })

But i can't sort the columns of my table.

Actually i use another plugin on the table to fix the header. Maybe i've a conflict???

Thanks

EDIT: the css

Actually the plugin don't sort and i can't see the bg.gif/asc.gif/desc.gif images.. dont know why.

 table.tablesorter th { 
  cursor:pointer;  

  font-size: 12px; 
  text-align:center; 
  background: url('Images/bg.gif'); 
  background-color: #91061F; 
  color: white;
  border: 1px  white;
  padding: 3px;
  height: 20px
} 

table.tablesorter .headerSortUp { 
  background-image: url('Images/asc.gif'); 
} 
table.tablesorter .headerSortDown { 
  background-image: url('Images/desc.gif'); 
}

Upvotes: 0

Views: 120

Answers (2)

Charles Clayton
Charles Clayton

Reputation: 17946

I know this question is old, but I was having a problem with getting tablesorter to sort a table I was dynamically created and after a while I realized the problem was the following:

This failed to sort:

<table id="myTable" class="tablesorter">
    <thead>
        <tr>
            <td>Number</td>
            <td>Letter</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>123</td>
            <td>abc</td>
        </tr>
        <tr>
            <td>456</td>
            <td>def</td>
        </tr>
    </tbody>
</table>

This sorted:

<table id="myTable" class="tablesorter">
    <thead>
        <tr>
            <th>Number</th> <!-- note th instead of td -->
            <th>Letter</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>123</td>
            <td>abc</td>
        </tr>
        <tr>
            <td>456</td>
            <td>def</td>
        </tr>
    </tbody>
</table>

Upvotes: 0

Kapitein Witbaard
Kapitein Witbaard

Reputation: 1026

You are binding to the document load twice. 

// A $( document ).ready() block.
$(document).ready(function(){
    //stuff
});

// Shorthand for $( document ).ready()
$(function(){
    //stuff
});

JQuery documentation: A page can't be manipulated safely until the document is "ready." jQuery detects this state of readiness for you. Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute.

So change your script to:

$(function () {
    $("#DispTable").tablesorter();
});

And hopefully the juice starts running!

Upvotes: 2

Related Questions