Блог

Главная - Вопросы по программированию - ASP.net MVC tablesorter имеет интерактивные заголовки столбцов, но не сортирует

ASP.net MVC tablesorter имеет интерактивные заголовки столбцов, но не сортирует

#asp.net #asp.net-mvc #tablesorter

#asp.net #asp.net-mvc #tablesorter

Вопрос:

Я впервые публикую здесь вопрос, поэтому я постараюсь быть подробным, чтобы у вас была вся необходимая информация.

Я пытаюсь использовать tablesorter для сортировки моей таблицы. Вот код, о котором идет речь:

    @model MyAspApp.Models.Jackets

@{
    ViewBag.Title = "Index";
}

<h2>Roster</h2>







<head>
    <meta name="viewport" content="width=device-width" />
    <title>Multi-model view attempt</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

    <link rel="stylesheet" href="~/Content/theme.default.css">
    <link rel="stylesheet" href="~/Content/jquery-ui.min.css">

    <script type="text/javascript" src="~/Scripts/jquery-latest.min.js"></script>
    <script src="~/Scripts/jquery-ui.js"></script>
    <script src="~/Scripts/jquery-ui.min.js"></script>

    <script type="text/javascript" src="~/Scripts/jquery.tablesorter.js"></script>
    <script type="text/javascript" src="~/Scripts/jquery.tablesorter.widgets.js"></script>
</head>
  

@section scripts
{
    @Scripts.Render("~/bundles/jquery.tablesorter")
    <script type="text/javascript">

       

        $(document).ready(function () {
            
            $("#Skaters").tablesorter(getSkaters());
            $("#Goalies").tablesorter(getGoalies());

        });
        

        

        

    </script>
}
<script>


        function getSkaters() {

            var allSkaters = @Html.Raw(Json.Encode(ViewBag.Skaters));
            for (var i = 0; i < allSkaters.length; i  ) {

                $("#Skaters").append(
                    "<tbody><tr><td >"   allSkaters[i].First_Name   "</td>"
                      "<td>"   allSkaters[i].Last_Name   "</td>"
                      "<td>"   allSkaters[i].Number   "</td>"
                      "<td>"   allSkaters[i].Position   "</td>"
                      "<td>"   allSkaters[i].Goals   "</td>"
                      "<td>"   allSkaters[i].Assists   "</td>"
                      "<td>"   allSkaters[i].Points   "</td></tr></tbody>");

            }

        }




    function getGoalies(){

        var allGoalies = @Html.Raw(Json.Encode(ViewBag.Goalies));
        for (var i = 0; i < allGoalies.length; i  ){

                $("#Goalies").append(
                    "<tbody><tr><td>" allGoalies[i].First_Name "</td>"
                             "<td>" allGoalies[i].Last_Name "</td>"
                             "<td>" allGoalies[i].Number "</td>"
                             "<td>" allGoalies[i].Wins "</td>"
                             "<td>" allGoalies[i].Losses "</td>"
                             "<td>" allGoalies[i].OTL "</td>"
                             "<td>" allGoalies[i].Save_ "</td>"
                             "<td>" allGoalies[i].GAA "</td> </tr></tbody>");

        }
    }

</script>


<body>

    <h1>Skaters</h1>
    <table id="Skaters" class="tablesorter">
        <thead>
            <tr>
                <th> First Name </th>
                <th> Last Name </th>
                <th> Number </th>
                <th> Position </th>
                <th> Goals </th>
                <th> Assists </th>
                <th> Points </th>
            </tr>
        </thead>
    </table>

    <h2>Goalies</h2>
    <table id="Goalies" class="tablesorter">
        <thead>
            <tr>
                <th> First Name </th>
                <th> Last Name </th>
                <th> Number </th>
                <th> Wins </th>
                <th> Losses </th>
                <th> OTL </th>
                <th> Save% </th>
                <th> GAA </th>
            </tr>
        </thead>

    </table>


</body>

Теперь моя таблица выглядит следующим образом:

Просмотр таблицы

Как вы должны быть в состоянии видеть, я могу щелкнуть по заголовкам столбцов, в этом случае нажимается «Цели», но таблица фактически не сортирует данные.

Я искал несколько разных решений в StackOverflow, и, похоже, ничего не работает. Многие из этих решений включали настройку tablesorter с помощью uitheme и виджета zebra, но кажется, что каждый раз, когда я переключаюсь с темы по умолчанию, я полностью теряю форматирование таблицы.

(Да, у меня есть необходимые файлы и ссылки, включенные в мой проект ASP, когда я пытаюсь переключить темы.)

Черт возьми, просто для удовольствия я зашел на страницу документации tablesorter и скопировал всю их конфигурацию из их демо-версии, просто чтобы посмотреть, сработает ли это, и это привело к той же потере всего моего форматирования таблицы.

Итак, я не могу понять, чего мне здесь не хватает, и я был бы очень признателен, если бы вы все помогли мне разобраться в этом. Я устал от бесконечных поисков. Спасибо. Надеюсь, я предоставил достаточно информации.

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

1. Похоже, что к каждой строке добавляется новая <tbody> . Переместите <tbody> за пределы вашего цикла.

2. Я не могу поверить, что это все, что потребовалось для устранения этой проблемы. Я искал решение в течение нескольких дней. Спасибо.

3. Добро пожаловать! Добавьте свое решение в качестве ответа, и я поддержу его. Мне больше не нужны очки 😉

4. Извините, я все время забывал опубликовать код решения до сих пор. Но у меня все еще возникают проблемы с правильной работой виджетов. Каждый раз, когда я добавляю какой-либо код конфигурации виджета, я снова теряю функциональность сортировки. Идеи?

5. Селекторы должны включать в себя tbody : $("#Skaters tbody").append(...) и $("#Goalies tbody").append(...) ; Если новое содержимое или виджеты добавляются динамически, используйте $('table').trigger('update') вместо повторного вызова tablesorter .

Ответ №1:

переместил теги tbody за пределы циклов, которые заполняют мои таблицы, в html-объявление таблиц, и это устранило проблему.

 
@model MyAspApp.Models.Jackets

@{
    ViewBag.Title = "Index";
}

<h2>Roster</h2>







<head>
    <meta name="viewport" content="width=device-width" />
    <title>Multi-model view attempt</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

    <link rel="stylesheet" href="~/Content/theme.default.css">
    <link rel="stylesheet" href="~/Content/jquery-ui.min.css">

    <script type="text/javascript" src="~/Scripts/jquery-latest.min.js"></script>
    <script src="~/Scripts/jquery-ui.js"></script>
    <script src="~/Scripts/jquery-ui.min.js"></script>

    <script type="text/javascript" src="~/Scripts/jquery.tablesorter.js"></script>
    <script type="text/javascript" src="~/Scripts/jquery.tablesorter.widgets.js"></script>
</head>
  

@section scripts
{
    @Scripts.Render("~/bundles/jquery.tablesorter")
    <script type="text/javascript">

       
        $(document).ready(function () {

         
            $("#Skaters").tablesorter(getSkaters());
            $("#Goalies").tablesorter(getGoalies());

        });

     

        

        

    </script>
}
<script>


        function getSkaters() {


            var allSkaters = @Html.Raw(Json.Encode(ViewBag.Skaters));
            for (var i = 0; i < allSkaters.length; i  ) {

                $("#Skaters").append(
                    "<tr><td >"   allSkaters[i].First_Name   "</td>"
                      "<td>"   allSkaters[i].Last_Name   "</td>"
                      "<td>"   allSkaters[i].Number   "</td>"
                      "<td>"   allSkaters[i].Position   "</td>"
                      "<td>"   allSkaters[i].Goals   "</td>"
                      "<td>"   allSkaters[i].Assists   "</td>"
                      "<td>"   allSkaters[i].Points   "</td></tr>");

            }

        }




    function getGoalies(){

        var allGoalies = @Html.Raw(Json.Encode(ViewBag.Goalies));
        for (var i = 0; i < allGoalies.length; i  ){

                $("#Goalies").append(
                    "<tr><td>" allGoalies[i].First_Name "</td>"
                             "<td>" allGoalies[i].Last_Name "</td>"
                             "<td>" allGoalies[i].Number "</td>"
                             "<td>" allGoalies[i].Wins "</td>"
                             "<td>" allGoalies[i].Losses "</td>"
                             "<td>" allGoalies[i].OTL "</td>"
                             "<td>" allGoalies[i].Save_ "</td>"
                             "<td>" allGoalies[i].GAA "</td> </tr>");

        }
    }

</script>


<body>

    <h1>Skaters</h1>
    <table id="Skaters" class="tablesorter">
        <thead>
            <tr>
                <th> First Name </th>
                <th> Last Name </th>
                <th> Number </th>
                <th> Position </th>
                <th> Goals </th>
                <th> Assists </th>
                <th> Points </th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>

    <h2>Goalies</h2>
    <table id="Goalies" class="tablesorter">
        <thead>
            <tr>
                <th> First Name </th>
                <th> Last Name </th>
                <th> Number </th>
                <th> Wins </th>
                <th> Losses </th>
                <th> OTL </th>
                <th> Save% </th>
                <th> GAA </th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>


</body>