jquery DataTables中的动态排序答案

【问题标题】：Dynamic sorting in jquery DataTablesjquery DataTables中的动态排序
【发布时间】：2016-09-16 22:54:08
【问题描述】：

我正在使用带有columns.render 选项的DataTables 来实现表格的自定义排序。当排序函数中的逻辑仅依赖于静态数据时，这很好用。但是，我想为我的用户提供一些控制如何进行排序的控件。问题是似乎 DataTables 正在缓存第一个排序结果，因此当用户尝试更改排序控件时它没有任何效果。

简而言之，我想要一个动态排序功能。

显然，最好用一个例子来解释这一点。这个想法是允许“信息”列按“客户名称”或“价格”排序，具体取决于用户在表格上方的收音机中选择的内容。运行它，您会看到排序仅适用于初始单选。

$(function() {
    var opts = {
        "columns": [{
            'searchable': false
        }, {
            'render': function(data, type, row, meta) {
                if (type === 'sort') {
                    var sel = $("input[name=infoFilterOptions]:checked").val();
                    return $(sel, $(data)).data('value');
                }
                return data;
            }
        }]
    };
    $("#the_table").DataTable(opts);
});

<html>

<head>
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.12/datatables.min.css" />
  <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.12/datatables.min.js"></script>
</head>

<body>
  <div style="color:green; margin-bottom: 10px;">
    <div style="display: inline-block; margin-right: 10px;">Sort <i>Info</i> column by:</div>
    <label class="radio-inline">
      <input style="margin-top: 0;" type="radio" name="infoFilterOptions" value=".info-price" checked>Price
    </label>
    <label class="radio-inline">
      <input style="margin-top: 0;" type="radio" name="infoFilterOptions" value=".info-customer-name">Customer name
    </label>
  </div>
  <table id="the_table" class="stripe">
    <thead>
      <tr>
        <th>Id</th>
        <th>Info</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>
          <div>Customer name: <span class="info-customer-name" data-value="John">John</span>
          </div>
          <div>Price: <span class="info-price" data-value="42.42">$42.42</span>
          </div>
        </td>
      </tr>
      <tr>
        <td>3</td>
        <td>
          <div>Customer name: <span class="info-customer-name" data-value="Melvyn">Melvyn</span>
          </div>
          <div>Price: <span class="info-price" data-value="14.0">$14.00</span>
          </div>
        </td>
      </tr>
      <tr>
        <td>18</td>
        <td>
          <div>Customer name: <span class="info-customer-name" data-value="Aaaaardvark">Aaaaardvark</span>
          </div>
          <div>Price: <span class="info-price" data-value="22.3">$22.30</span>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</body>

</html>

【问题讨论】：

标签： javascript jquery datatable

【解决方案1】：

Allan 通过on the DataTables forums 回答了这个问题。一如既往的一流支持！

简短的回答是 DataTables 是确实缓存了排序结果。您需要使表中的数据无效（通过row().invalidate() 或rows().invalidate()）才能重新计算排序顺序。

这就是诀窍：

$('input[type=radio][name=infoFilterOptions]').on('change', function() {
    $("#the_table").DataTable().rows().invalidate();
});

这是上面包含此修复的完整示例：

$(function() {
    var opts = {
        "columns": [{
            'searchable': false
        }, {
            'render': function(data, type, row, meta) {
                if (type === 'sort') {
                    var sel = $("input[name=infoFilterOptions]:checked").val();
                    return $(sel, $(data)).data('value');
                }
                return data;
            }
        }]
    };
    $("#the_table").DataTable(opts);

    $('input[type=radio][name=infoFilterOptions]').on('change', function() {
        $("#the_table").DataTable().rows().invalidate();
    });
});

<html>

<head>
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.12/datatables.min.css" />
  <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.12/datatables.min.js"></script>
</head>

<body>
  <div style="color:green; margin-bottom: 10px;">
    <div style="display: inline-block; margin-right: 10px;">Sort <i>Info</i> column by:</div>
    <label class="radio-inline">
      <input style="margin-top: 0;" type="radio" name="infoFilterOptions" value=".info-price" checked>Price
    </label>
    <label class="radio-inline">
      <input style="margin-top: 0;" type="radio" name="infoFilterOptions" value=".info-customer-name">Customer name
    </label>
  </div>
  <table id="the_table" class="stripe">
    <thead>
      <tr>
        <th>Id</th>
        <th>Info</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>
          <div>Customer name: <span class="info-customer-name" data-value="John">John</span>
          </div>
          <div>Price: <span class="info-price" data-value="42.42">$42.42</span>
          </div>
        </td>
      </tr>
      <tr>
        <td>3</td>
        <td>
          <div>Customer name: <span class="info-customer-name" data-value="Melvyn">Melvyn</span>
          </div>
          <div>Price: <span class="info-price" data-value="14.0">$14.00</span>
          </div>
        </td>
      </tr>
      <tr>
        <td>18</td>
        <td>
          <div>Customer name: <span class="info-customer-name" data-value="Aaaaardvark">Aaaaardvark</span>
          </div>
          <div>Price: <span class="info-price" data-value="22.3">$22.30</span>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</body>

</html>

【讨论】：