Cannot use JQuery Plugin TableSorter with underscore

StackOverflow https://stackoverflow.com/questions/21562570

سؤال

I am creating a table comparable to this: http://jsfiddle.net/aPv9H/1/

<head>
<script type="text/html" id='usageList'>
<table cellspacing='0' cellpadding='0' border='1' >
    <thead>
        <tr>
            <th>Id</th>
            <th>Name</th>
        </tr>
    </thead>
    <tbody>
    <% _.each(items,function(item,key,list){ 
        // create more variables
        var f = item.name.split("").shift().toLowerCase(); 
    %>
        <tr>
            <!-- use variables -->
            <td><%= key %></td>
            <td class="<%= f %>"><%= item.name %></td>
        </tr>
    <% }); %>
</tbody>
</table>
</script>

<script>
var items = [
    {name:"Alexander"},
    {name:"Barklay"},
    {name:"Chester"},
    {name:"Domingo"},
    {name:"Edward"},
    {name:"..."},
    {name:"Yolando"},
    {name:"Zachary"}
];

var template = $("#usageList").html();
$("#target").html(_.template(template,{items:items}));


$('table').tablesorter({
    // include zeba widgets
    widgets: ['zebra'],
    // initial sort
    sortList: [[0, 0], [2, 0]]
});

$('table').bind('sortBegin', function(e, tbl) {
    var c = tbl.config,
        list = c.sortList;
    // add date sort if not the initial sort, otherwise sort second column
    // (zero based index)
    list.push((list[0] && list[0][0] !== 2) ? [2, 0] : [1, 0]);
});
</script>
</head>

<!-- Create your target -->
<body>
<div id="target"></div>

</body>

in order to use the template functionality to populate the table.

However, I attempted to add the jquery plugin TableSorter, and this doesn't seem to work. Does anyone have an example that does?

I get no errors, however nothing happens.

Thanks.

هل كانت مفيدة؟

المحلول

I think the problem is that the jQuery code itself isn't wrapped in a document ready function. So it doesn't see the #target div....

$(function(){
    // all the script goes here
});

jsFiddle wraps the code automatically for you, so it's easy to miss... it can be changed by using the bottom select box ("onLoad" by default) within the "Frameworks & Extensions" accordion panel.

enter image description here

Update: Try this (demo):

$(function(){
    var items = [
            {name:"Alexander"},
            {name:"Barklay"},
            {name:"Chester"},
            {name:"Domingo"},
            {name:"Edward"},
            {name:"..."},
            {name:"Yolando"},
            {name:"Zachary"}
        ];

    var template = $("#usageList").html();
    $("#target")
        .html(_.template(template,{items:items}))
        .find('table').tablesorter();
});
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top