Блог

Главная - Вопросы по программированию - Сортировка таблиц MVC

Сортировка таблиц MVC

#jquery #asp.net-mvc #html-table #tablesorter

#jquery #asp.net-mvc #html-таблица #сортировщик таблиц

Вопрос:

В настоящее время я играю с плагином jQuery для сортировки таблиц на одном из сайтов, над которыми я работаю. Кажется, это довольно просто, но по какой-то причине заголовки не сортируются. Нажатие на них даже не вызывает видимого ответа (курсор не меняется). Я подозреваю, что это может иметь какое-то отношение к тому факту, что таблица является динамической, поскольку она заполняется данными, извлеченными из таблицы базы данных (редактировать: подтверждено, что это не проблема, путем тестирования с использованием статических, введенных вручную данных). Другая возможность заключается в том, что мой код jQuery находится в неправильном месте или возникла проблема с моей ссылкой.

Есть идеи?

Кстати, проект выполнен на MVC.

Просмотр исходного результата страницы:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1"><title>



    Execution History     



</title><link href="../Content/Site.css" rel="stylesheet" type="text/css" />

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

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



    <script type="text/javascript">

        $(document).ready(function () {

            $("table").tablesorter({

                headers: {

                    8: {

                        sorter: false

                    },



                    9: {

                        sorter: false

                    }

                }

            });

        });

    </script>


</head>



<body>

    <div class="page">             

        <div id="main">



    <h2>Execution History</h2>



    <table id="myTable" class="tablesorter">

        <thead>

            <tr>

                <th>Run ID</th>

                <th>Date Ran</th>

                <th>Ran By</th>

                <th>Run Time</th>

                <th>Result</th>


            </tr> 

        </thead>



        <tbody>



                <tr>

                    <td>1</td>

                    <td>7/25/2011 11:25:01 AM</td>

                    <td>Laura</td>

                    <td>145.49849999696</td>

                    <td>PASS</td>

                </tr>



                <tr>

                    <td>2</td>

                    <td>8/3/2011 6:23:01 PM</td>

                    <td>Laura</td>

                    <td>140.616000004113</td>

                    <td>PASS</td>

                </tr>



                <tr>

                    <td>3</td>

                    <td>8/3/2011 6:26:00 PM</td>

                    <td>Laura</td>

                    <td>141.592500001192</td>

                    <td>PASS</td>

                </tr>


                <tr>

                    <td>4</td>

                    <td>8/4/2011 8:04:00 PM</td>

                    <td>Kevin</td>

                    <td>260.725500002503</td>

                    <td>FAIL</td>

                </tr>


                <tr>

                    <td>5</td>

                    <td>10/5/2011 4:05:50 PM</td>

                    <td>Kevin</td>

                    <td>2749796.658</td>

                    <td>PASS</td>

                </tr>



                <tr>

                    <td>6</td>

                    <td>10/5/2011 5:31:18 PM</td>

                    <td>Kevin</td>

                    <td>2777489.2215</td>

                    <td>PASS</td>

                </tr>



        </tbody>

    </table> 





                <div id="footer"></div>

        </div>

    </div>

</body>

</html>

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

1. Я добился большого успеха с этим плагином jQuery DataTables: datatables.net . Если у вас ничего не получается с текущим плагином, который вы используете, попробуйте этот.

2. инициализируется ли плагин для сортировки таблиц? Т. Е. Получают ли заголовки столбцов классы сортировщика таблиц, чтобы показать, что они могут быть отсортированы?

3. ну, с <table class=»tablesorter»> таблица должна инициализировать плагин. Затем скрипт ищет <thead> и <th> , поэтому логически не должно быть никаких проблем с обнаружением заголовков столбцов.

4. Это не может быть чем-то чрезвычайно радикальным; DataTables тоже не работает, но, судя по отзывам как для него, так и для плагина Tablesorter, проблема заключается в том, где я размещаю вызов своей функции jQuery, а не фактический код плагина. Я новичок в интеграции javascript с MVC, но быстрый «просмотр источника страницы» показывает $ (document). готово(функция()) {} в теге <head> вместе со ссылкой на сценарий сортировки… Я не вижу, в чем тогда может заключаться проблема.

5. The ASP.NET код не нужен; опубликуйте html the browser sees и предоставьте рабочую демонстрацию. :)

Ответ №1:

Найдено решение. Это действительно была проблема со ссылкой на файл. Код отлично работает на localhost, но я провожу большую часть тестирования на IIS, поскольку это развернутый сайт. Таким образом, для IIS требуется сопоставление, чтобы фактически находить скрипты jquery, на которые ссылаются. Url.Content делает именно это.

<script src="<%=Url.Content("~/Scripts/jquery-1.4.1.js") %>" type="text/javascript"></script>