MVC 表排序

发布于 2024-12-10 02:11:10 字数 3902 浏览 0 评论 0 原文

我目前正在我正在开发的网站之一中使用 Tablesorter 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>

原文

I'm currently playing around with the Tablesorter jQuery plugin in one of the sites I'm working on. It seems to be fairly straight forward, but for some reason the headers don't sort. Clicking on them doesn't even produce any visible response (the cursor doesn't change). I suspect this may have something to do with the fact that the table is dynamic in that it is populated by data pulled from a database table (edit: confirmed that this is not the issue by testing using static, manually entered data). The other possibility is that my jQuery code is in the wrong location or there's a problem with my reference.

Any ideas?

The project is done in MVC, by the way.

View Page Source result:

<!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>

分享到QQ

分享到微博