Question

我正在创建一个与此相当的表格： 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>

以便使用模板功能填充表格。

但是，我试图添加jquery插件TableSorter，这似乎不起作用。有没有人有一个例子呢？

我没有错误，但没有任何反应。

感谢。

Answer 1

我认为问题在于jQuery代码本身没有包含在文档就绪函数中。所以它没有看到#target div ....

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

jsFiddle会自动为您包装代码，因此很容易错过......可以使用“Frameworks＆amp; Extensions”手风琴面板中的底部选择框（默认为“onLoad”）进行更改。

enter image description here

更新：试试这个（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();
});

不能将JQuery Plugin TableSorter与下划线一起使用

1 个答案: