jquery - 如何使用 TinySort 进行排序

Question

鉴于此观点:

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Bootstrap.Base.Master" Inherits="System.Web.Mvc.ViewPage<OfficeOrdersViewModel>" %>

<asp:Content ID="tc" ContentPlaceHolderID="TitleContent" runat="server">
    Office Order Summary
</asp:Content>

<asp:Content ID="pc" ContentPlaceHolderID="PageContent" runat="server">
    <div class="row-fluid">
        <legend>Office Order Summary</legend>

        <input type="hidden" value="<%: Model.OfficeId %>" name="OfficeId" id="OfficeId" />

        <div class="row-fluid" id="companySelect" name="companySelect" style="display: none;">
            <span class="span7">
                <label class="bold">Company</label>
                <input type="button" class="btn" id="btnFindCompany" value="Find a Company" style="margin-bottom: 3px;" />
                <input type="text" id="CompanySearch" class="input-block-level valid" placeholder="Search for a company" style="display: none;" minlength="2" maxlength="100" /><br />
                <select id="CustomerInput_CompanyId" name="CustomerInput.CompanyId" class="input-block-level valid" style="display: none;"></select>
                <input type="button" id="btnUseCompany" name="btnUseCompany" value="Next" class="btn btn-success" style="display: none;" />
            </span>
        </div>

        <div class="row-fluid" id="companyData" name="companyData" style="display: none;">
            <div class="row-fluid">
                <div class="span4 forceWordWrap">
                    <h4 style="margin: 0;"><span name="OfficeName" id="OfficeName"><%: Model.OfficeName %></span></h4>
                    <span name="OfficeAddress1" id="OfficeAddress1"><%: Model.OfficeAddress1 %></span>
                    <span name="OfficeAddress2" id="OfficeAddress2"> <%: Model.OfficeAddress2 %></span><br />
                    <span name="OfficeCity" id="OfficeCity"><%: Model.OfficeCity %></span>,
                    <span name="OfficeState" id="OfficeState"><%: Model.OfficeState %></span>
                    <span name="OfficeZip" id="OfficeZip"> <%: Model.OfficeZip %></span><br />
                    <span name="OfficePhone" id="OfficePhone"></span><%: Model.OfficePhone %><br />
                </div>
                <div class="span4">
                    <div class="row-fluid">
                        <div class="span6 bold textRight">
                            Office Sales Executive:<br />
                            Office Order Count:<br />
                            Office Revenue:<br />
                            Active Agents:
                        </div>
                        <div class="span6 forceWordWrap">
                            <span name="SalesRepFirstName" id="SalesRepFirstName"><%: Model.SalesRepFirstName %> </span><span name="SalesRepLastName" id="SalesRepLastName"><%: Model.SalesRepLastName %></span><br />
                            <span name="OrderCount" id="OrderCount"><%: (Model.AgentOrders != null) ? Model.AgentOrders.Count() : 0 %></span><br />
                            <span name="OfficeRevenue" id="OfficeRevenue"><%: (Model.AgentOrders != null) ? Model.AgentOrders.Sum(ao => ao.PeriodOrderRevenue) : 0 %></span><br />
                            <span name="AgentsCount" id="AgentsCount"><%: Model.AgentsCount %></span>
                        </div>
                    </div>
                </div>
                <div class="span4">
                    <div class="row-fluid">
                        <div class="span4"><h4>Orders For:</h4></div>
                        <div class="span4"><input type="button" id="btn90" name="btn90" value="Last 90 Days" class="btn btn-success" style="font-size: 12px; width: 99%; text-align: center;" /></div>
                        <div class="span4"><input type="button" id="btn12" name="btn12" value="Last 12 Months" class="btn btn-inverse" style="font-size: 12px; width: 99%; text-align: center;" /></div>
                    </div>
                    <div class="row-fluid">
                        <div class="span4"><input type="button" id="btn30" name="btn30" value="Last 30 Days" class="btn btn-inverse" style="font-size: 12px; width: 99%; text-align: center;" /></div>
                        <div class="span4"><input type="button" id="btn6" name="btn6" value="Last 6 Months" class="btn btn-inverse" style="font-size: 12px; width: 99%; text-align: center;" /></div>
                        <div class="span4"><input type="button" id="btnYTD" name="btnYTD" value="Year to Date" class="btn btn-inverse" style="font-size: 12px; width: 99%; text-align: center;" /></div>
                    </div>
                </div>
            </div>
            <div class="row-fluid">
                <table class="table table-striped table-bordered table-hover" id="AgentList" name="AgentList">
                    <thead>
                        <tr>
                            <th>Customer</th>
                            <th>Sales Executive</th>
                            <th>Last Order Opened</th>
                            <th>Revenue</th>
                            <th>LB Orders</th>
                            <th>SB Orders</th>
                            <th>Total Orders</th>
                        </tr>
                    </thead>
                    <tbody>
                    <% if (Model.AgentOrders != null) {
                           foreach (var agent in Model.AgentOrders) { %>
                        <tr>
                            <td><a href="/customerhistory#/details/<%: agent.CustomerId %>" class="btn btn-success input-medium">
                                <span name="firstName" id="firstName"><%: agent.CustomerFirstName %></span> <span name="lastName" id="lastName"><%: agent.CustomerLastName %></span>
                            </a></td>
                            <td><%: agent.SalesRepFirstName %> <%: agent.SalesRepLastName %></td>
                            <td><%: agent.NewestOrderOpenDate %></td>
                            <td><%: agent.PeriodOrderRevenue %></td>
                            <td><%: agent.PeriodLBOrderCount %></td>
                            <td><%: agent.PeriodSBOrderCount %></td>
                            <td><%: agent.PeriodLBOrderCount + agent.PeriodSBOrderCount %></td>
                        </tr>
                    <%      }
                        } %>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</asp:Content>

<asp:Content ID="Content5" ContentPlaceHolderID="AdditionalScripts" runat="server">
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.js"></script>
    <script src="../../Scripts/jquery.validate.js" type="text/javascript"></script>
    <script src="../../Scripts/additional-methods.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery.tinysort.min.js" type="text/javascript"></script>
    <%--<script src="../../Scripts/jquery.sortElements.js" type="text/javascript"></script>--%>
    <script type="text/javascript">
        $(function () {
            ShowHideCompanySelect();

            $("#CustomerInput_CompanyId").hide();
            $("#CompanySearch").hide();
            $("#btnUseCompany").hide();
            $("#frmCompanySelect div.companysearchError").hide();

            $("#btnFindCompany").click(function () {
                $("#CustomerInput_CompanyId").hide();
                $("#CompanySearch").show();
                $("#btnFindCompany").hide();
            });

            $("#CompanySearch").autocomplete({
                source: '/OfficeOrders/OfficeSearch?' + $("#CompanySearch").val(),
                minLength: 2,
                select: function (event, ui) {
                    $("#CustomerInput_CompanyId")
                        .find('option')
                        .remove()
                        .end()
                        .append($("<option value=" + ui.item.id + ">" + ui.item.value + "</option>"))
                        .val(ui.item.id);
                    $("#CustomerInput_CompanyId").show();
                    $("#CompanySearch").hide();
                    $("#btnFindCompany").show();
                    $("#btnFindCompany").prop("value", "Find Another Company");
                    $("#btnUseCompany").show();
                }
            });

            $("#btnUseCompany").click(function () {
                $.post('/OfficeOrders/GetOfficeData', {
                    officeId: $("#CustomerInput_CompanyId").val()
                }, function(data) {
                    if (data.success) {
                        $("#OfficeId").text(data.officeDto.OfficeId);
                        $("#OfficeName").text(data.officeDto.OfficeName);
                        $("#OfficeAddress1").text(data.officeDto.OfficeAddress1);
                        $("#OfficeAddress2").text(data.officeDto.OfficeAddress2);
                        $("#OfficeCity").text(data.officeDto.OfficeCity);
                        $("#OfficeState").text(data.officeDto.OfficeState);
                        $("#OfficeZip").text(data.officeDto.OfficeZip);
                        $("#OfficePhone").text(data.officeDto.OfficePhone);
                        $("#Agents").text(data.officeDto.Agents);
                        $("#AgentsCount").text(data.officeDto.AgentsCount);
                        $("#SalesRepFirstName").text(data.officeDto.SalesRepFirstName);
                        $("#SalesRepLastName").text(data.officeDto.SalesRepLastName);
                        $("#OrderCount").text(data.officeDto.OrderCount);
                        $("#OfficeRevenue").text(data.officeDto.OfficeRevenue);


                        $("#OfficeId").val($("#CustomerInput_CompanyId").val());
                        ShowHideCompanySelect();
                    } else {
                        ShowHideCompanySelect();
                    }
                });
            });
        });

        function ShowHideCompanySelect() {
            if ($("#OfficeId").val() === "00000000-0000-0000-0000-000000000000") {
                $("#companySelect").show();
                $("#companyData").hide();
            } else {
                $("#companySelect").hide();
                $("#companyData").show();
            }
        }

        $(document).ready(function() {
            //Start Sorting for the table

            var table = document.getElementById('AgentList'),
                tableHead = table.querySelector('thead'),
                tableHeaders = tableHead.querySelectorAll('th'),
                tableBody = table.querySelector('tbody');

            tableHead.addEventListener('click', function(e) {
                var tableHeader = e.target,
                    textContent = tableHeader.textContent,
                    tableHeaderIndex,
                    isAscending,
                    order;

                if (textContent !== 'add row') {
                    while (tableHeader.nodeName !== 'TH') {
                        tableHeader = tableHeader.parentNode;
                    }

                    tableHeaderIndex = Array.prototype.indexOf.call(tableHeaders, tableHeader);
                    isAscending = tableHeader.getAttribute('data-order') === 'asc';
                    order = isAscending ? 'desc' : 'asc';
                    tableHeader.setAttribute('data-order', order);

                    tinysort(
                        tableBody.querySelectorAll('tr'), {
                            selector: 'td:nth-child(' + (tableHeaderIndex + 1) + ')',
                            order: order
                        }
                    );
                }
            });
            //End Sorting for the table
        });
    </script>
</asp:Content>

<asp:Content ID="ac" ContentPlaceHolderID="AdditionalContent" runat="server">
    <style>
        .ui-menu {
            list-style: none;
            padding: 2px;
            margin: 0;
            display: block;
            float: left;
        }
        .ui-menu .ui-menu {
            margin-top: 03px;
        }
        .ui-menu {
            margin: 3px;
            padding: 3px;
            zoom: 1;
            float: left;
            clear: left;
            cursor: pointer;
            background-color: rgb(238, 238, 238);
            border: 1px solid rgb(0, 0, 0);
        }
        .ui-menu-item
        {
            border-bottom: 1px solid rgb(0, 0, 0);
        }
        .ui-menu .ui-menu-item a {
            text-decoration: none;
            display: block;
            width: 100%;
            padding: .2em .4em;
            line-height: 1.5;
            zoom: 1;
        }
        .ui-menu .ui-menu-item a.ui-state-hover,
        .ui-menu .ui-menu-item a.ui-state-active {
            font-weight: normal;
            margin: -1px;
        }
    </style>
</asp:Content>

点击标题时出现以下错误:

Uncaught ReferenceError: tinysort is not defined

我不太确定为什么会这样，因为 tinysort.min.js 结束于:a.fn.TinySort=a.fn.Tinysort=a.fn.tsort=a.fn.tinysort}(jQuery);我的意思是“对于所有这些大小写不同的 tinysort 拼写”。

可以用手来解决这个问题。没有双关语的意思。

仅供引用:我使用的 jquery 几乎与 TinySort's page. 上的一样。

Answer 1

问题是没有添加 Tinysort 脚本。当前版本的 Tinysort 是独立的。但这确实意味着当前的 jquery.tinysort.js 需要 tinysort.js。所以加上后者，你就可以开始了。