Question

我使用jQuery datatables来建立表格，以下列格式显示项目进度：

Project   |Stage   |Start   |Finish
____________________________________
project 1 |stage 1 |W1D1    |W2D2
project 1 |stage 2 |W2D3    |W4D5
...

项目里程碑以“ W_D _”（周，日）的形式进行度量。问题是，当我开始按列Start或Finish进行排序时，它无法正常工作。

到目前为止，我的代码：

HTML ：

<table id="projectStatus">
    <thead>
        <tr>
            <th>Project</th><th>Stage</th><th>Start</th><th>Finish</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>project 1</td><td>stage 1</td><td>W1D1</td><td>W2D2</td>
        </tr>
        <tr>
            <td>project 1</td><td>stage 2</td><td>W2D3</td><td>W11D5</td>
        </tr>
        <tr>
            <td>project 1</td><td>stage 3</td><td>W11D6</td><td>W5D6</td>
        </tr>       
    </tbody>
</table>

JS ：

$('#projectStatus').DataTable({
    orderable: true,
  processing: true,
  defaultContent: '',
  pageLength: 10
});

如何解决排序问题？谢谢。

Answer 1

您可以将rsreportserver属性添加到单元格。 DataTables将使用此值对行进行排序，而不是对其中的文本进行排序。您可以在此属性中串联RSNegotiate和data-order。

Week

Answer 2

您应该提供错误的结果。

我看到的是您有字符串值，这些值不视为数字。例如，W11D5显示在W2D3之前。

尝试使用data-order属性，将周和日连接起来：

<td>project 1</td>
<td>stage 2</td>
<td data-order="23">W2D3</td>
<td data-order="115">W11D5</td>

如果仍然无法正常工作，请对其进行零填充：

<td>project 1</td>
<td>stage 2</td>
<td data-order="023">W2D3</td>
<td data-order="115">W11D5</td>

Answer 3

由于您的数据具有数字性质，因此恐怕您无法从相应表单元格的data-order / data-sort属性中受益，这些属性将按字母顺序对行进行排序

解决方法（不加载额外的插件）是设置您自己的自定义数据类型（例如“工作日”）和相应的排序方法：

//init DataTable
$('#projectStatus').DataTable({
//set data type 'weekday' for columns 2, 3
  columnDefs: [{
    targets: [2,3],
    type: 'weekday'
  }]
});
//turn 'week+day' string into number of days
const weekDay2Num = str => ([week, day] = str.match(/W(\d+)D(\d+)/).slice(1), week*7+day);
//specify sorting method for type 'weekday'
Object.assign($.fn.DataTable.ext.oSort, {
  'weekday-asc': (a,b) => weekDay2Num(a)-weekDay2Num(b),
  'weekday-desc': (a,b) => weekDay2Num(b)-weekDay2Num(a)
});

<script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="application/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<table id="projectStatus">
    <thead>
        <tr>
            <th>Project</th><th>Stage</th><th>Start</th><th>Finish</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>project 1</td><td>stage 1</td><td>W1D1</td><td>W2D2</td>
        </tr>
        <tr>
            <td>project 1</td><td>stage 2</td><td>W2D3</td><td>W11D5</td>
        </tr>
        <tr>
            <td>project 1</td><td>stage 3</td><td>W11D6</td><td>W5D6</td>
        </tr>       
    </tbody>
</table>

按星期和日期对DataTable进行排序

3 个答案: