自定義排序字符串與數據表中的3組值

Question

我已經在我的一個html表上使用了datables。其中有許多列。 在它的一列可以包含以下三個值之一：

1. 琥珀
2. 待定
3. 紅

我想要實現排序，使得具有價值掛起所有行首先看到，然後琥珀然後是紅色。 （不能使用默認的升序和降序排序爲順序將是不正確的，然後）

代碼片段：

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(); 
}); 

所以我最想要的是，當表格顯示在頁面上時，數據應該根據第一列的數據和最後一列的數據（即Pending，Amber，然後是紅色）按字母順序排序。

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>