Question

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

琥珀
待
红色

我想实现排序，以便首先看到值为Pending的所有行，然后是Amber，然后是Red。（不能使用默认的升序和降序排序，因为顺序不正确）

代码段：

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>

String的自定义排序，在数据表中包含3组值

1 个答案: