Question

任何人都可以帮助我获取应用tablesorter plugin的MVC应用程序的工作样本吗？我对如何将最新的tablesorter插件应用到我的MVC示例感到有点困惑。我正在尝试实现像

这样的东西

$('table').trigger('sortReset')

在下面的teble。

<table class="tablesorter">
    <thead>
        <tr>
            <th>AlphaNumeric Sort</th>
            <th>Currency</th>
            <th>Alphabetical</th>
            <th>Sites</th>
        </tr>
    </thead>
    <tbody>
        <tr><td>abc 123</td><td>&#163;10,40</td><td>Koala</td><td>http://www.google.com</td></tr>
        <tr><td>abc 1</td><td>&#163;234,10</td><td>Ox</td><td>http://www.yahoo.com</td></tr>
        <tr><td>abc 9</td><td>&#163;10,33</td><td>Girafee</td><td>http://www.facebook.com</td></tr>
        <tr><td>zyx 24</td><td>&#163;10</td><td>Bison</td><td>http://www.whitehouse.gov/</td></tr>
        <tr><td>abc 11</td><td>&#163;3,20</td><td>Chimp</td><td>http://www.ucla.edu/</td></tr>
        <tr><td>abc 2</td><td>&#163;56,10</td><td>Elephant</td><td>http://www.wikipedia.org/</td></tr>
        <tr><td>abc 9</td><td>&#163;3,20</td><td>Lion</td><td>http://www.nytimes.com/</td></tr>
        <tr><td>ABC 10</td><td>&#163;87,00</td><td>Zebra</td><td>http://www.google.com</td></tr>
        <tr><td>zyx 1</td><td>&#163;99,90</td><td>Koala</td><td>http://www.mit.edu/</td></tr>
        <tr><td>zyx 12</td><td>&#163;234,10</td><td>Llama</td><td>http://www.nasa.gov/</td></tr>
    </tbody>
</table>

我所指的js和css文件如下

<head>
<meta charset="utf-8">
<title>Basic Tablesorter Demo</title>


<link href="~/Content/jq.css" rel="stylesheet" />

<link href="~/Content/theme.default.css" rel="stylesheet" />

<script src="~/Scripts/jquery-latest.min.js"></script>
<script src="~/Scripts/jquery-ui-1.8.24.min.js"></script>
<script src="~/Scripts/jquery.tablesorter.min.js"></script>
<script src="~/Scripts/jquery.tablesorter.widgets.min.js"></script>

<script>
    $(function () {
        $('.tablesorter').tablesorter({
            widgets: ['zebra', 'columns'],
            usNumberFormat: false,
            sortReset: true,
            sortRestart: true
        });
    });

</script>

不知道为什么我没有得到这个工作..它的错误就像＆＃34; Uncaught TypeError：undefined不是一个函数＆＃34; for tablesorter（）

注意：我了解到重置的这项功能可以在插件2.4.7之后使用。

非常感谢您的帮助。

由于

Answer 1

您需要在页面上添加一个允许用户单击以重置排序的元素。在this example中，我会使用一个按钮：

<button type="button" class="reset">Reset Sort</button>

然后应用适当的脚本使该按钮能够触发重置事件：

$(function () {
    $('.tablesorter').tablesorter({
        widgets: ['zebra', 'columns'],
        usNumberFormat: false,
        sortReset: true,
        sortRestart: true
    });

    // make button reset the sort
    $('.reset').click(function(){
        $('.tablesorter').trigger('sortReset');
    });

});

或者，用户可以使用 Ctrl +左键单击任何标题单元格来重置排序。可以使用sortResetKey option更改密钥。

需要帮助实施tablesorter 2.17.1（或最新）

1 个答案: