Question

我有转发器控制，我已经实现了Paging。现在它显示10个数据一次。现在我也想管理排序，在客户端使用jaquery意味着它不会再次命中数据库进行排序。

示例：假设转发器显示10个项目（行）。每个项目包含价格，项目计数和日期。现在我想在这个转发器中使用排序功能。因此它只会在显示10个项目的当前排序。所有的排序功能（Price，ItemCount，Date）

我在gridview中有一些示例，但是它没有工作转发器，请让我知道我该怎么做。我搜索了很多东西但是对我来说一切都没用。

Answer 1

对于您的解决方案，您可以访问此link

tablesorter是一个jQuery插件   用一个标准的HTML表格   THEAD和TBODY标签成可排序的   没有页面刷新的表。   tablesorter可以成功解析和   排序许多类型的数据，包括   单元格中的链接数据。它有很多   有用的功能包括：

多列分类解析器   排序文本，URI，整数，   货币，浮动，IP地址，日期   （ISO，长短格式），时间。   添加自己的轻松支持辅助   “隐藏”排序（例如，维护   排序时按字母顺序排序   其他标准）可扩展性   widget系统跨浏览器：IE 6.0+，   FF 2 +，Safari 2.0 +，Opera 9.0+小   代码大小

Answer 2

伪码：

var sortCriteria = ".Price"

var repeaterRows = $(".repeaterRows").detach();
var sortingArray = repeaterRows.map(function(key, val) {
    return {
        "jquery": $(this),
        "sort": $(this).find(sortCriteria).text();
    };
}).get();

sortingArray.sort(function(left, right) {
    return left.sort < right.sort;
});

$.each(sortingArray, function(key, val) {
    val.jquery.appendTo("#repeater");
});

首先从容器中删除转发器元素。

然后将转发器元素映射到包含转发器元素的包装器以及要排序的内容。

然后，您可以使用Array.prototype.sort按标准对其进行排序。

然后遍历排序列表并按排序顺序将它们附加到转发器。

Answer 3

哟可以使用Jquery tablesorter plugin

Jquery

 $(document).ready(function() { 
        $(".tablesorter") 
        .tablesorter({widthFixed: true, widgets: ['zebra']}) 
        .tablesorterPager({container: $("#pager")}); 
    });

aspx标记

<table cellspacing="1" class="tablesorter">

    <thead>
        <tr>
            <th>Column1</th>
            <th>Column2</th>
            <th>Column3</th>
        </tr>
    </thead>

        <tfoot>
        <tr>
            <th>Column1</th>
            <th>Column2</th>
                         <th>Column3</th>
        </tr>

    </tfoot>
         <tbody>
                <asp:Repeater runat="server" ID="rpt_data">
                    <ItemTemplate>
            <tr>

            <td><%#Eval("ColumnName1")%></td>

            <td><%#Eval("ColumnName2")%></td>

            <td><%#Eval("ColumnName3")%></td>

            </tr>
                </ItemTemplate>
                </asp:Repeater>
         </tbody>
</table>

<div id="pager" class="pager">

如何在客户端管理Repeater？

3 个答案: