Vertauschen von Zeilen in den jQuery-Datatabellen

Question

Ich arbeite am jQuery Datatable-Plugin. Wenn Sie auf den Abwärtspfeil klicken, vertauschen Sie die aktuelle Zeile und die nächste Zeile. Wenn Sie auf den Pfeil nach oben klicken, vertauschen Sie die aktuelle Zeile und die vorherige Zeile. Aber ich kann den Index der bestimmten angeklickten Zeile nicht erhalten.

$(document).ready(function() { 
    var table = $('#example').DataTable(); 

$('#example tbody').on('click', '.swapDown', function(event){ 
    var ind = table.row(this.closest("tr")).index(); 
    var movedData = table.row(this.closest("tr")).data(), 
       otherData =table.row(this.closest("tr").prev()).data(); 
     table.row(this.closest("tr").prev()).data(otherData).draw(); 
     table.row(this.closest("tr")).data(movedData).draw(); 
    console.log(ind); 
    }); 

$('#example tbody').on('click', '.swapUp', function(event){ 
var ind = table.row(this.closest("tr")).index(); 
    var movedData = table.row(this.closest("tr")).data(), 
       otherData =table.row(this.closest("tr").next()).data(); 
     table.row(this.closest("tr").next()).data(otherData).draw(); 
     table.row(this.closest("tr")).data(movedData).draw(); 
    console.log(ind); 
}); 
}); 

jsfiddle.net/UvjnT/1289/

Answer 1

Ich habe heute Morgen verbrachte mit diesem zu spielen, und das ist, was ich habe und läuft, ich bin wirklich nicht sicher, dass es die beste Lösung ist, aber es funktioniert:

$(function() { 
    var table = $("#example").DataTable({ 
     "order": [ 
      [0, 'asc'] 
     ], 
     "paging": true, 
     "columns": [{ 
      "visible": false 
     }, { 
      "orderable": false 
     }, { 
      "orderable": false 
     }, { 
      "orderable": false 
     }, { 
      "render": function(d) { 
       return $("<i/>", { 
        "class": "fa fa-caret-down swapable swapDown" 
       }).prop("outerHTML"); 
      }, 
      "orderable": false 
     }, { 
      "render": function(d) { 
       return $("<i/>", { 
        "class": "fa fa-caret-up swapable swapUp" 
       }).prop("outerHTML"); 
      }, 
      "orderable": false 
     }] 
    }); 
    $('#example tbody').on('click', 'td', function(event) { 
     // We're only interested in cells with a class of swapable 
     if ($(this).find(".swapable")) { 
      // Helper variable 
      var _this = $(this).find(".swapable"); 
      // Total number of rows (including hidden rows (zero based index)) 
      var tableRows = table.data().length - 1; 
      // Index of current row 
      var rowIndex = table.row(this).index(); 
      // Data of current row 
      var rowData = table.row(this).data(); 
      // Index value of row (artifical because it's ours) - also tempval 
      var artificalIndex = ~~rowData[0]; 
      /* 
      * If we're on the bottom row of the table and the direction of travel is downwards or if we're 
      * on the top row and the direction of travel is upwards then we need to just swap the top and 
      * bottom rows 
      */ 
      if(
        (_this.hasClass("swapDown") && artificalIndex === tableRows) 
        || 
        (_this.hasClass("swapUp") && artificalIndex === 0) 
      ){ 
       var topIndex, bottomIndex; 
       table.rows().every(function(rowIdx, tableLoop, rowLoop) { 
        var data = this.data(); 
        if(~~data[0] === 0){ 
         topIndex = rowIdx; 
        } 
        if(~~data[0] === tableRows){ 
         bottomIndex = rowIdx; 
        } 
       }); 
       table.cell(topIndex, 0).data(tableRows); 
       table.cell(bottomIndex, 0).data(0); 
      }else{ 
       var movingIndex, tempData; 
       table.rows().every(function(rowIdx, tableLoop, rowLoop) { 
        var data = this.data(); 
        // Moving down 
        if (_this.hasClass("swapDown") && ~~data[0] === artificalIndex + 1) { 
         movingIndex = rowIdx; 
         tempData = data[0]; 
        } 
        // Moving up 
        if (_this.hasClass("swapUp") && ~~data[0] === artificalIndex - 1) { 
         movingIndex = rowIdx; 
         tempData = data[0]; 
        } 
       }); 
       table.cell(rowIndex, 0).data(tempData); 
       table.cell(movingIndex, 0).data(artificalIndex); 
      } 
      table.draw(false); 
     } 
    }); 
}); 

This is a working JSFiddle.

Ich hatte einige Probleme mit dem Index, da ich nicht 100% sicher bin, dass der interne Index nach einem draw() aktualisiert wird, also entschied ich mich, einen versteckten Index zu verwenden und auf diesem zu bestellen. Dies ist die HTML verwendet, um die Tabelle zu erstellen:

<div class="container"> 
    <table cellpadding="0" cellspacing="0" border="0" class="table" id="example"> 
     <thead> 
      <tr> 
       <th>Index</th> 
       <th>Rendering engine</th> 
       <th>Browser</th> 
       <th>Platform(s)</th> 
       <th>Swap Down</th> 
       <th>Swap Up</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <th>0</th> 
       <td>Trident</td> 
       <td>Internet Explorer 4.0</td> 
       <td>Win 95+</td> 
       <td></td> 
       <td></td> 
      </tr> 
      <tr> 
       <th>1</th> 
       <td>Trident</td> 
       <td>Internet Explorer 5.0</td> 
       <td>Win 95+</td> 
       <td></td> 
       <td></td> 
      </tr> 
      <tr> 
       <th>2</th> 
       <td>Trident</td> 
       <td>Internet Explorer 5.5</td> 
       <td>Win 95+</td> 
       <td></td> 
       <td></td> 
      </tr> 
      <tr> 
       <th>3</th> 
       <td>Trident</td> 
       <td>Internet Explorer 6</td> 
       <td>Win 98+</td> 
       <td></td> 
       <td></td> 
      </tr> 
      <tr> 
       <th>4</th> 
       <td>Trident</td> 
       <td>Internet Explorer 7</td> 
       <td>Win XP SP2+</td> 
       <td></td> 
       <td></td> 
      </tr> 
      <tr> 
       <th>5</th> 
       <td>Trident</td> 
       <td>AOL browser (AOL desktop)</td> 
       <td>Win XP</td> 
       <td></td> 
       <td></td> 
      </tr> 
      <tr> 
       <th>6</th> 
       <td>Gecko</td> 
       <td>Firefox 1.0</td> 
       <td>Win 98+/OSX.2+</td> 
       <td></td> 
       <td></td> 
      </tr> 
      <tr> 
       <th>7</th> 
       <td>Gecko</td> 
       <td>Firefox 1.5</td> 
       <td>Win 98+/OSX.2+</td> 
       <td></td> 
       <td></td> 
      </tr> 
      <tr> 
       <th>8</th> 
       <td>Gecko</td> 
       <td>Firefox 2.0</td> 
       <td>Win 98+/OSX.2+</td> 
       <td></td> 
       <td></td> 
      </tr> 
      <tr> 
       <th>9</th> 
       <td>Gecko</td> 
       <td>Firefox 3.0</td> 
       <td>Win 2k+/OSX.3+</td> 
       <td></td> 
       <td></td> 
      </tr> 
      <tr> 
       <th>10</th> 
       <td>Gecko</td> 
       <td>Camino 1.0</td> 
       <td>OSX.2+</td> 
       <td></td> 
       <td></td> 
      </tr> 
      <tr> 
       <th>11</th> 
       <td>Gecko</td> 
       <td>Camino 1.5</td> 
       <td>OSX.3+</td> 
       <td></td> 
       <td></td> 
      </tr> 
      <tr> 
       <th>12</th> 
       <td>Gecko</td> 
       <td>Netscape 7.2</td> 
       <td>Win 95+/Mac OS 8.6-9.2</td> 
       <td></td> 
       <td></td> 
      </tr> 
      <tr> 
       <th>13</th> 
       <td>Gecko</td> 
       <td>Netscape Browser 8</td> 
       <td>Win 98SE+</td> 
       <td></td> 
       <td></td> 
      </tr> 
      <tr> 
       <th>14</th> 
       <td>Misc</td> 
       <td>Lynx</td> 
       <td>Text only</td> 
       <td></td> 
       <td></td> 
      </tr> 
     </tbody> 
    </table> 
</div> 

Hoffnung, die hilft, und ich würde schätzen jedes Feedback aus der Community, wie es auf verbessert werden könnte, wie ich bin mir ziemlich sicher, dass ich etwas fehle. ..?

Answer 2

Ich habe noch nie mit diesem Plugin gearbeitet, aber @annoyingmouse ist richtig. Wahrscheinlich wollten Sie $(this) anstelle von this verwenden, da das vorherige ein jQuery-Objekt erstellt, in dem Sie jQuery-Methoden verwenden können. Eine andere Sache, die ich bemerkte, war, dass das enthaltene DataTables-Plugin nicht die aktuellste Version war (laut datatables.net). Ich weiß nicht, ob sich das auf Ihre Anwendung auswirkt, aber die verlinkte Geige enthält die aktuellste Version von datatables.net. Ich bin mir auch nicht sicher über das Ergebnis, das du von der Geige erwartest, aber es loggt eine Integer in der Konsole auf "Klick" aus.

Eine andere Sache ist Ihr Tisch ist nicht unbedingt richtig eingerichtet. das "Swap-Up" te Element ist mit der "Swap-Up" td-Element, das gleiche gilt für die "Swap-Down"

  <th>Swap Up</th> 
     <th>Swap Down</th> 
    </tr> 
</thead> 
<tbody> 
    <tr> 
     <td>Trident</td> 
     <td>Internet 
      Explorer 4.0</td> 
     <td>Win 95+</td> 
     <td><i class='fa fa-caret-down swapDown'></i></td> 
     <td><i class='fa fa-caret-up swapUp'></i></td> 

inkonsistent werden Sie wahrscheinlich die td-Elemente umkehren wollen. Oder die Namenskonvention ist nur verwirrend für mich.

http://jsfiddle.net/UvjnT/1291/