Question

我正在使用asp table和repeater.i需要在单击表头时对数据进行排序。当我点击表格标题时，如何对表格数据进行排序？请有人帮帮我我的HTML代码如下

<div class="blue"> <table id="mytable" data-sortable class="table table-hover table-striped"> <thead> <tr> <th id="sl">Code</th> <th id="nm">Name</th> <th data-sortable="false">Edit</th> <th data-sortable="false">Delete</th> </tr> </thead> <tbody> <asp:Repeater runat="server" id="rptArea" > <ItemTemplate> <tr> <td> <strong> <%# Eval("strAreaCode")%></strong></td> <td> <%# Eval("strAreaName")%></td> <td> <div class="btn-group btn-group-xs"><a href="AreaMaster.aspx?strAreaCode=<%# Eval("strAreaCode")%>&Action=Edit" data-toggle="tooltip" title="" data-original-title="Edit"> <i class="fa fa-edit" style="font-size:24px;color:red;"></i> </a> </div> </td> <td> <div class="btn-group btn-group-xs"> <a href="AreaMaster.aspx?strAreaCode=<%# Eval("strAreaCode")%>&Action=Delete" onclick="return confirm('Are you sure?')" data-toggle="tooltip" title="Delete"> <i class="fa fa-trash" style="font-size:24px;color:green;"> </i> </a> </div> </td> </tr> </ItemTemplate> </asp:Repeater> </tbody> </table>

Answer 1

你可以通过两种方式来实现。

客户端排序

使用jQuery plugin类可排序或this one，so post having many

服务器端排序

将表格标题设为链接按钮/按钮

<asp:LinkButton ID="sl" runat="server" CommandName="Code" CssClass="hrefclass">Code</asp:LinkButton>

处理服务器上的click事件
对数据源进行排序，例如数据表并将其重新绑定到转发器控件

例如，参考this

Answer 2

这是使用引导程序的example，这可能对您有所帮助

<table data-toggle="table"
>
<thead>
    <tr>
        <th data-field="fruit" data-sortable="true">Item</th>
        <th data-field="date"  data-sortable="true" data-sort-name="_date_data" data-sorter="monthSorter">Date</th>
        <th data-field="type"  data-sortable="true">Type</th>
    </tr>
</thead>
<tbody>
    <tr><td>Pear  </td><td data-month="1">January</td> <td>Fruit</td></tr>
    <tr><td>Carrot</td><td data-month="3">March</td>   <td>Vegetable</td></tr>
    <tr><td>Apple </td><td data-month="2">February</td><td>Fruit</td></tr>
</tbody>

<script>
function monthSorter(a, b) {
    if (a.month < b.month) return -1;
    if (a.month > b.month) return 1;
    return 0;
}
</script>

单击表头时的表排序

2 个答案: