时间戳

首页 > 解决方案 > 当标题属性中断时，有没有办法让 DataTables 进行排序？

html - 当标题属性中断时，有没有办法让 DataTables 进行排序？

问题描述

我想
在我的列的标题属性中使用换行符（我正在使用），Decimal以显示如何计算某些内容的细分，但是当我这样做时，DataTables 无法对该列进行排序。如果我简单地删除
并使用 a,代替，这个例子排序很好，但我希望用中断来显示它们。

HTML

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script>

<table id="foo">
  <thead>
    <tr>
      <th>Fraction</th>
  <th>Decimal</th>
    </tr>
  </thead>
  <tbody>
    <tr>     
      <td>10/9</td>
      <td>
        <div title="A: 9.6&#10;B: 15.0&#10;C: 20.0" class="hoverable">44.6</div>
      </td>
    </tr>
    <tr>     
      <td>0/9</td>
      <td>
         <div title="A: 9.0&#10;B: 15.8&#10;C: 5.0" class="hoverable">29.8</div>
      </td>
    </tr>
    <tr>     
      <td>1/9</td>
      <td>
        <div title="A: 9.0&#10;B: 12.4&#10;C: 20.0" class="hoverable">41.4</div>
      </td>
    </tr>
    <tr>     
      <td>7/9</td>
      <td>
        <div title="A: 60.0&#10;B: 19.7&#10;C: 20.0" class="hoverable">99.7</div>
      </td>
    </tr>
  </tbody>
</table>

JS

$(document).ready( function () {
    $('#foo').DataTable();
} );

CSS

.hoverable {
    color: rgb(0, 14, 229);
}

.hoverable:hover {
    cursor: help;
}

https://jsfiddle.net/rhn1szkx/2/

标签： htmldatatables

解决方案

推荐阅读