Блог

Главная - Вопросы по программированию - Нужна помощь в реализации tablesorter 2.17.1 (или последней версии)

Нужна помощь в реализации tablesorter 2.17.1 (или последней версии)

#asp.net-mvc-4 #tablesorter

#asp.net-mvc-4 #tablesorter

Вопрос:

может кто-нибудь, пожалуйста, помочь мне получить рабочий образец приложения MVC с применением плагина tablesorter? Я немного смущен тем, как применить последний плагин tablesorter к моему образцу MVC..Я пытаюсь реализовать что-то вроде 

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

в приведенной ниже таблице.

 <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>amp;#163;10,40</td><td>Koala</td><td>http://www.google.com</td></tr>
        <tr><td>abc 1</td><td>amp;#163;234,10</td><td>Ox</td><td>http://www.yahoo.com</td></tr>
        <tr><td>abc 9</td><td>amp;#163;10,33</td><td>Girafee</td><td>http://www.facebook.com</td></tr>
        <tr><td>zyx 24</td><td>amp;#163;10</td><td>Bison</td><td>http://www.whitehouse.gov/</td></tr>
        <tr><td>abc 11</td><td>amp;#163;3,20</td><td>Chimp</td><td>http://www.ucla.edu/</td></tr>
        <tr><td>abc 2</td><td>amp;#163;56,10</td><td>Elephant</td><td>http://www.wikipedia.org/</td></tr>
        <tr><td>abc 9</td><td>amp;#163;3,20</td><td>Lion</td><td>http://www.nytimes.com/</td></tr>
        <tr><td>ABC 10</td><td>amp;#163;87,00</td><td>Zebra</td><td>http://www.google.com</td></tr>
        <tr><td>zyx 1</td><td>amp;#163;99,90</td><td>Koala</td><td>http://www.mit.edu/</td></tr>
        <tr><td>zyx 12</td><td>amp;#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>

Не уверен, почему у меня это не получается..Для tablesorter() появляется ошибка типа «Uncaught TypeError: undefined не является функцией»

Я узнал, что эта функция сброса доступна с плагином 2.4.7 и далее.

Ваша помощь очень ценится.

Спасибо

Ответ №1:

Вам нужно будет добавить элемент на страницу, который позволяет пользователю щелкнуть, чтобы сбросить сортировку. В этом примере я буду использовать кнопку:

 <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 опции.

Комментарии:

1. Спасибо @Mottie. ваш пример хорошо работает в jsfiddle.. Но проблема, с которой я все еще сталкиваюсь, заключается в том, что она не применяет тему tablesorter к таблице html. Я понимаю, что это работает для tablesorter 2.0.0.

2. Охххх .. я понял, в чем проблема. Я имел в виду Jquery.1.8.1.min.js дважды . Один в _Layout .cshtml и на самой странице. Теперь я удалил один из них, и это сработало довольно хорошо…. Спасибо @Mottie…

3. Также, @Mottie, мы не можем использовать пользовательский список сортировки {} для сортировки по нескольким столбцам? Нужно ли нам использовать sortOn{} для этой версии tablesorter ? Не могли бы вы обновить это в своем примере в jsfiddle?

4. Я использовал как ` sortList=[[0, 0], [1, 1]] $(» таблица»).триггер («сортировка», [Сортировочный список]);` и это сработало