Sort table on click of the table header: Issue with asp:repeater maybe?

See more:

ASP.NET4

I'm trying to build a sorting function to sort my tables based on which row I click. The problem I am running into is that when I click the row, it returns way too much data, the same data just repeated a couple hundred times. I think it's an issue with the asp:Repeater I use to pull the data, but can't think of a way to fix the issue. If you have any ideas how to fix this, I would appreciate it.If you have a better solution that what I'm trying, let me know, I'm okay with starting over.

The sorting itself doesn't work yet, but I can work on that later. I just need to know how to make it not post the same data hundreds of times. It loads fine the first time, but after a row is clicked it adds too much data.

Here is the code.

 <table id="SortedTable" class="table table-hover table-condensed">
    <thead>
    <tr>
        <th id="Ip_prefix">Ip_prefix</th>
        <th id="Peer_ip_src">Peer_ip_src</th>
        <th id="Comms">Comms</th>
        <th id="Event_type">Event_type</th>
        <th id="As_path">As_path</th>
        <th id="Local_pref">Local_pref</th>
        <th id="Created">Created</th>
    </tr>
    </thead>
    <asp:Repeater runat="server" ID="dumpRptr">
        <HeaderTemplate>
        </HeaderTemplate>
        <ItemTemplate>
            <tbody>
            <tr>
                <td><a href="..."><%#Eval("ip_prefix")%></a></td>
                <td><%#Eval("peer_ip_src")%></td>
                <td><%#Eval("comms")%></td>
                <td><%#Eval("event_type")%></td>
                <td><%#Eval("as_path")%></td>
                <td><%#Eval("local_pref")%></td>
                <td><%#Eval("Created")%></td>
            </tr>
            </tbody>
        </ItemTemplate>
        <FooterTemplate>
        </FooterTemplate>
    </asp:Repeater>
</table>

<script>
    function sortTable(f, n) {
        var rows = $('#SortedTable tbody  tr').get();

        rows.sort(function (a, b) {

            var A = $(a).children('td').eq(n).text().toUpperCase();
            var B = $(b).children('td').eq(n).text().toUpperCase();

            if (A < B) {
                return -1 * f;
            }
            if (A > B) {
                return 1 * f;
            }
            return 0;
        });

        $.each(rows, function (index, row) {
            $('#SortedTable').children('tbody').append(row);
        });
    }
    var f_Ip_prefix = 1;
    var f_Peer_ip_src = 1;
//....same all for allnames

    $("#Ip_prefix").click(function () {
        f_Ip_prefix *= -1;
        var n = $(this).prevAll().length;
        sortTable(f_Ip_prefix, n);
    });
    $("#Peer_ip_src").click(function () {
        f_Peer_ip_src *= -1;
        var n = $(this).prevAll().length;
        sortTable(f_Peer_ip_src, n);
    });
//same for the rest
    </script>

I'm very new to all of this, so if you could explain the logic behind why it does what I don't want it to, I would be grateful. Answers are better of course.