JQuery .appendTo() adding rows multiple times

Question

Bit of a strange problem, but I'm not sure how to fix it.

While inside of the code below, I'm trying to take all of the element of a table a sort them based on the row heading that was clicked.

The starting HTML:

<table id="PracticeTable" class="col-md-10 col-md-offset-2">
<tr id="Column Names">
    <td class="ClientID col-xs-1">Client ID</td>
    <td class="ClientName col-xs-1">Client Name</td>
    <td class="PracticeID col-xs-1">Practice</td>
</tr>
@for (int i = 0; i < ViewBag.ClientDatabase.getDatabase().Count; i++)
{
    @:<tr class="DataRow">
        <td class="ClientID col-xs-1" data-name="@ViewBag.ClientDatabase.getByIndex(i).Id">@ViewBag.ClientDatabase.getByIndex(i).Id</td>
        <td class="ClientName col-md-2 col-xs-1" data-name="@ViewBag.ClientDatabase.getByIndex(i).getClientName">@ViewBag.ClientDatabase.getByIndex(i).getClientName</td>
        <td class="PracticeIDs col-xs-1" data-name="@ViewBag.ClientDatabase.getByIndex(i).getPracticeID">@ViewBag.ClientDatabase.getByIndex(i).getPracticeID</td>
        <td class="EditButtons col-xs-1" data-bind="visible: editVisible"><a href="~/Clients/Edit?clientId=@i">Edit</a></td>
    @:</tr> 
}

Example of one of the click functions:

jQuery(document).ready(function () {
    $(".ClientName").click(function () {
        alert("Name Clicked");
        var clients = $(".DataRow");
        var compareLine = $(clients).children(".ClientName");

        compareLine.sort(function (a, b) {
            var an = $(a).attr("data-name");
            var bn = $(b).attr("data-name");
            alert(an + " " + bn);

            if (an > bn) {
                return 1;
            }
            if (an < bn) {
                return -1;
            }
            return 0;
        });
        compareLine.detach().appendTo(clients);
    });
});

When I attempt to append the lines as above, the names from Client Name appear in every row. Is there something I'm missing? I tried to loop through the data in compareLine to add them individually, but I couldn't figure it out.

EDIT: Removing duplicated code from a fix attempt that wasn't fully removed.

Answer 1

If you want to sort the rows, I think you just need to make a small change:

jQuery(document).ready(function () {
    $(".ClientName").click(function () {
        alert("Name Clicked");
        var clients = $(".DataRow");

        clients.sort(function(a, b) {
            var an = $(a).children(".ClientName").attr("data-name");
            var bn = $(b).children(".ClientName").attr("data-name");
            alert(an + " " + bn);

            if (an > bn) {
                return 1;
            }
            if (an < bn) {
                return -1;
            }
            return 0;
        });

        clients.detach().appendTo("#PracticeTable");
    });
});

Seems like your sort function was designed to be working with the rows, but you were sorting a collection of the columns.