sorting - 数据表中具有 3 组值的字符串的自定义排序

Question

我在我的一个 html 表上使用了数据表。目前其中有多列。 其中的一列可以包含以下三个值之一:

1. 琥珀色
2. 待处理
3. 红色

我想实现排序，以便首先看到值为 Pending 的所有行，然后是琥珀色，然后是红色。 (不能使用默认的升序和降序排序，否则顺序不正确)

代码片段:

JSP(表创建)

<table class="tableContent nofx cell-border compact" id="violationTable">
        <thead>
            <tr>
                <th class="col1"><i18n:message key="rule.name" /></th>
                <th class="col2"><i18n:message key="rule.value" /></th>                             
                <th class="col3"><i18n:message key="rule.isr.value" /></th>
                <th class="col4"><i18n:message key="rule.status" /></th>
            </tr>
        </thead>
        <tbody>
            <c:forEach items="${ruleViolationList}" var="i" varStatus="loopStatus">
                <tr data-rule-id="<c:out value="${i.id}" />" data-country-id="<c:out value="${i.countryId}" />"                 
                >
                    <td class="col1">
                        <c:out value="${i.PolicyRule}" />
                    </td>
                    <td class="col2">
                        <c:out value="${i.RuleValue}" escapeXml="false" />
                    </td>
                    <td class="col3">
                        <c:out value="${i.isrValue}" />
                    </td>
                    <c:choose>
                        <c:when test="${i.violationTypeId == 1}">
                            <td class="red status" >
                                <i18n:message key="rule.violation.red" />
                            </td>
                        </c:when>
                        <c:when test="${i.violationTypeId == 2}">
                            <td class="amber status" >
                                <i18n:message key="rule.violation.amber" />
                            </td>
                        </c:when>
                        <c:when test="${i.violationTypeId == 4}">
                            <td class="blue status" >
                                <i18n:message key="rule.violation.dispensation.approval.pending" />
                            </td>
                            </c:when>
                            <c:when test="${i.violationTypeId == 5}">
                                <td class="amber status" >
                                    <i18n:message key="rule.violation.amber" />
                                </td>
                            </c:when>
                            <c:when test="${i.violationTypeId == 6}">
                                <td class="red status" >
                                    <i18n:message key="rule.violation.red" />
                            </td>
                            </c:when>
                    </c:choose>
                </tr>
            </c:forEach>
        </tbody>
    </table>

Servlet:

ArrayList<RuleViolation> ruleViolationList = daoFactory.getRuleViolationsDAO().list();       
request.setAttribute("ruleViolationList", ruleViolationList);

JS:

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

所以我理想地想要的是，当表格显示在页面上时，数据应该根据第一列中的数据以及最后一列中的数据按字母顺序排序(即待处理，琥珀色，然后是红色)。

Answer 1

查看代码片段，您可以使用选项 columns.render 高度自定义列的过滤/排序方式.

我给出的例子并不是最聪明的，但让你知道你可以做什么。我建议您使用"Nested Object data"如果您选择这种方法。

var dataSet = [
  ['Name1', 3, 'Red'],
  ['Name2', 2, 'Amber'],
  ['Name3', 1, 'Pending']
];

$(document).ready(function() {
    $('#example').DataTable( {
        data: dataSet,
        columns: [
            { title: "Name" },
            { title: "Value" },
            { 
              title: "Types",
              "render": function ( data, type, full, meta ) {
                if (type == 'sort') {
                  if (data == 'Red') return 3;
                  else if(data == 'Pending') return 1;
                  else if(data == 'Amber') return 2;
                } else {
                  return data;
                }
               }
            }
        ]
    } );
} );

<link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet"/>

<script src="//code.jquery.com/jquery-1.12.3.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>

<table id="example" class="display" width="100%"></table>