Question

我有一个用<asp:Repeater>创建的DataTable来创建一个看起来像这样的表（注意：这里的headers / data是任意的）：

<table>
    <tr>
        <th>Destination</th>
        <th>Name</th>
        <th>DOB</th>
    </tr>
    <tr>
        <td>
            <div>USA</div>
            <div>Canada</div>
        </td>
        <td>
            <div>Marc Anthony</div>
            <div>Cleopatra</div>
        </td>
        <td>
            <div>JUL-10-1990</div>
            <div>DEC-22-1045</div>
        </td>
    </tr>
    <!-- multiple data rows like the one above; always USA/Canada, but different names DOBs -->
</table>

我需要做的是，当点击列（名称或DOB）对其进行排序时，按第一个数据集（连续的第一个<div>数据）或第二个数据排序对列进行排序数据集（连续第二个<div>数据）。即按[USA]-[Marc Anthony]-[JUL-10-1990]设置首先点击订单，按[Canada]-[Cleopatra]-[DEC-22-1045]设置点击第二次订单，但保留<tr>结构中的每个订单。

我不需要使用转发器，我可以使用JSON数据源a la：

$(...).DataTable(
    data: [JSON object]
);

我还没有能够通过阅读DataTables手册/ API /其他任何组合或其他内容来弄清楚如何做到这一点。有人可以帮忙吗？

我没有和目前的结构结婚，只要它保持“看起来”的样子，我就可以操纵它。每行中的分组集。

Answer 1

这有两个部分。较大的一个是自定义排序，然后是较小的一个来检测是否按第一个或第二个div进行排序。

Datatables提供了一些自定义排序插件的文档，但通过查看examples可以轻松创建自己的插件。基本上我在这里做的是创建一个名为＆＃39; div-toggle＆＃39;的自定义排序插件。

对于我提出的解决方案，如果您在数据中为div添加类，这将是最简单的，如下所示：

 <td>
    <div class="firstDiv">USA</div>
    <div class="secondDiv">Canada</div>
 </td>

要做你想做的事，你需要添加一个自定义排序插件来解析每一行中的数据，然后决定是否返回第一行或第二行中包含的数据。此代码在dataTables中生成一个插件来执行此操作：

$.fn.dataTable.ext.order['div-toggle'] = function (settings, col) {
    return this.api().column(col, { order: 'index' }).nodes().map(function (td, i) {
        var cellData;
        if (firstDiv) cellData = $($(td).html()).find('.firstDiv').text();
        else cellData = $($(td).html()).find('.secondDiv').text();
        return cellData;
    });
}

我在这里接近它的方式，＆＃34; firstDiv＆＃34;是一个布尔全局变量，它告诉插件在排序时是使用第一个还是第二个div。您可以将事件侦听器应用于单击的标题以切换此值：

$('.dataTable').on('click', 'thead tr th:eq(0)', function () {
    if (firstDiv) firstDiv = false;
    else firstDiv = true;
});

要告诉dataTables在特定列上使用此排序插件，请将声明添加到＆＃34;列＆＃34;初始化属性：

$(...).DataTable(
    { 
        "columns" : [ {"orderDataType": "div-toggle"} ]
    }
);

这可以将此排序插件应用于只有一列的dataTable，只是为了让您了解如何使用它。

请注意：毫无疑问，您可以在我的示例代码中使用更好的选择器，这可能是一种更有效的方式来进行排序解析，但这段代码应该可以运行并为您提供良好的基础从而使它更好地工作。

行

1 个答案: