Datentabelle mit Symbolen in nicht Spaltensortierung basierend auf anderer Spalte

Question

Ich habe eine Datentabelle mit Daten-bind Werten:

<table class="table" style="width: 100%;" id="TableC"> 
    <thead> 
     <tr> 
     <th>Vehicle</th> 
     <th>Serial</th> 
     <th>Power</th> 
     <th>Lock</th> 
     <th>Lock2</th> 
     </tr> 
    </thead> 
    <tbody data-bind="foreach: techlist"> 
     <tr> 
      <td data-bind="text: Vehicle">Vehicle</td> 
      <td data-bind="text: Serial">Serial</td> 
      <td data-bind="text: Power">Power</td> 
      <td> 
      <span data-bind="visible: $data.Lock==0" style="font-size:75%" class="fa-stack fa-lg"><i class="fa fa-unlock fa-stack-2x" style="color:#71BF3D"></i></span> 
      <span data-bind="visible: $data.Lock==1" style="font-size:75%" class="fa-stack fa-lg"><i class="fa fa-lock fa-stack-2x" style="color:#E74C3C"></i></span> 
      <span data-bind="visible:$data.Lock=='-'">-</span> 
     </td> 
     <td data-bind="text: Lock"></td> 
     </tr> 
    </tbody> 
</table> 

und die Js für sie:

TableC = $("#TableC").DataTable({ 
    bSortable: true, 
    bPaginate: false, 
    //"searching": false, 
    "info": false, 
    "bFilter": false, 
    "aoColumnDefs": [ 
     { targets: 0 }, 
     { targets: 1 }, 
     { targets: 2 }, 
     { targets: 3, orderData: 4 }, 
     { bSearchable: false, targets: 4 }   
    ] 
}); 

Als ich die erste Last die Datentabelle hat mehr als eine Zeile, aber wenn ich den Filter für die Spalte 'Lock' drücke, sollte sie die Icons entsprechend der Spalte 'Lock2' filtern, stattdessen wird eine Zeile mit beiden Icons und dem "-" Zeichen und dem Wert angezeigt für 'Lock2' verschwindet und die anderen Felder sind mit den Zeichenfolgen in den td-Markierungen gefüllt: Vehicle, Serial und Po wir sind.

Was mache ich falsch?

BEARBEITEN!

var displayinfo = []; 
displayinfo.push({ 
       Vehicle: "05", Serial: "925", Power:"30V", 
       Lock: 1 
      }); 
displayinfo.push({ 
       Vehicle: "06", Serial: "937", Power:"60V", 
       Lock: 0 
      }); 
displayinfo.push({ 
       Vehicle: "07", Serial: "835", Power:"50V", 
       Lock: 1 
      }); 
techstatuslist(displayinfo); 

Alle Werte sind mit "-", wenn die Liste leer sein sollte ...

displayinfo.push({ 
       Vehicle: "-", Serial: "-", Power:"-", 
       Lock: "-" 
      }); 

Answer 1

var displayinfo = []; 
displayinfo.push({ 
       Vehicle: "05", Serial: "925", Power:"30V", 
       Lock: 1 
      }); 
displayinfo.push({ 
       Vehicle: "06", Serial: "937", Power:"60V", 
       Lock: 0 
      }); 
displayinfo.push({ 
       Vehicle: "07", Serial: "835", Power:"50V", 
       Lock: 1 
      }); 
TableC = $("#TableC").DataTable({ 
    data: displayInfo, 
    ordering: true, 
    paging: false, 
    //"searching": false, 
    "info": false, 
    "searching": false, 
    columns: [ 
     { data: "Vehicle", title: "Vehicle" }, 
     { data: "Serial", title: "Serial" }, 
     { data: "Power", title: "Power" }, 
     { data: "Lock", title: "Lock" }, 
     { data: "Lock", title: "Lock2" } 
    ], 
    "columnDefs": [ { 
     "targets": 3, 
     "render": function (data, type, full, meta) { 
      // If it is rendering the cell contents 
      if(type === 'display') { 
      switch(data) { 
       case 0: 
        return '<span style="font-size:75%" class="fa-stack fa-lg"><i class="fa fa-unlock fa-stack-2x" style="color:#71BF3D"></i></span>'; 
       case 1: 
        return '<span style="font-size:75%" class="fa-stack fa-lg"><i class="fa fa-lock fa-stack-2x" style="color:#E74C3C"></i></span>'; 
       default: 
        return '<span>-</span>'; 
       } 
      } 

      // Your code implies that lock could be a number or a string ('-') 
      // So checking it first to see if we can convert it. If not then 
      // assign -1 as our numeric value. If we can convert it to a 
      // numeric value for sorting and filtering. 
      return (isNaN(data)) ? -1 : +data; 
      } 
     }, 
{ 
     "targets": 4, 
     "render": function (data, type, full, meta) { 
      // If it is rendering the cell contents 
      if(type === 'display') { 
       return data; 
      } 

      // Your code implies that lock could be a number or a string ('-') 
      // So checking it first to see if we can convert it. If not then 
      // assign -1 as our numeric value. If we can convert it to a 
      // numeric value for sorting and filtering. 
      return (isNaN(data)) ? -1 : +data; 
     } 
     }] 
}); 

Ok so mit der vor allem was Sie brauchen ist ein leeres Tabellenelement. Sie sollten nicht länger ein "thead" oder "tbody" im HTML angeben müssen, das das Plugin automatisch erstellt. Ich habe Lock- und Lock2-Spalten an dasselbe Datenelement gebunden, sodass die Sortierung nach einer der beiden Spalten auf dem numerischen Wert "Lock" basiert, da ich in den columnDef-Optionen einen benutzerdefinierten Renderer angegeben habe.

Ich habe diese Blind aber codiert, also hoffentlich funktioniert es aus der Box.

Beachten Sie auch, dass ich Ihre Optionsparameter von der Legacy-Definition zu den aktuellen 1.10-Definitionen geändert habe. Die meisten der alten Parameternamen sind veraltet und daher nicht sicher zu verwenden, es sei denn, Sie möchten in künftigen Versionen Probleme haben.

Lassen Sie mich wissen, wenn dies funktioniert.

EDIT: Entschuldigung vergessen, in der Datenbindung hinzuzufügen. Referenz: https://datatables.net/manual/data/