AJAX経由でJQuery UIでソートされたテーブルの注文を送信するには？

Question

Iはそれぞれドラッグアンドドロップした後

<table id="sort" class="grid"> 
    <thead> 
     <tr><th>Permanent ID</th><th class="index">Sorted</th><th>Rest of the row</th></tr> 
    </thead> 
    <tbody> 
     <tr><th>63</th><td class="index"></td><td>something</td></tr> 
     <tr><th>65</th><td class="index"></td><td>test</td></tr> 
     <tr><th>11</th><td class="index"></td><td>more text</td></tr> 
     <tr><th>333</th><td class="index"></td><td>other stuff</td></tr> 
     <tr><th>2</th><td class="index"></td><td>something text</td></tr> 
    </tbody> 

とJS

var fixHelperModified = function(e, tr) { 
    var $originals = tr.children(); 
    var $helper = tr.clone(); 
    $helper.children().each(function(index) { 
     $(this).width($originals.eq(index).width()) 
    }); 
    return $helper; 
}, 
    updateIndex = function(e, ui) { 
     $('td.index', ui.item.parent()).each(function (i) { 
      $(this).html(i + 1); 
     }); 
    }; 

$("#sort tbody").sortable({ 
    helper: fixHelperModified, 
    stop: updateIndex 
}).disableSelection(); 

（jsfiddle）としてjQueryのUIを介して、テーブルの行の順序は、第二カラム（class="index"）が新しい順に更新されます。この新しい行番号を取得してAJAX経由でサーバーに送信するにはどうすればよいですか？

実際、各ドラッグアンドドロップ操作後にAJAX経由で"Permanent ID"="Sorted"の配列を送信する必要があります。

Answer 1

指定された要素に対してindexを検索するとします。 これを試してください：

$('#getIndex').click(function(){ 
    $('tbody tr').each(function(){ 
    if($(this).find('th').html()=='333'){ 
     alert($(this).find('.index').html()); 
     //var index=$(this).find('.index').html(); 
     $.ajax({ 
      //code 
     }); 
    } 
    }); 
}); 

あなたは.indexクラスから情報を「抽出」によりelementのインデックスを取得することができます。

ここでは、id=333の要素のインデックスを表示する例を示します。

var fixHelperModified = function(e, tr) { 
 
    var $originals = tr.children(); 
 
    var $helper = tr.clone(); 
 
    $helper.children().each(function(index) { 
 
     $(this).width($originals.eq(index).width()) 
 
    }); 
 
    return $helper; 
 
}, 
 
    updateIndex = function(e, ui) { 
 
     $('td.index', ui.item.parent()).each(function (i) { 
 
      $(this).html(i + 1); 
 
     }); 
 
    }; 
 

 
$("#sort tbody").sortable({ 
 
    helper: fixHelperModified, 
 
    stop: updateIndex 
 
}).disableSelection(); 
 
$('#getIndex').click(function(){ 
 
    $('tbody tr').each(function(){ 
 
     if($(this).find('th').html()=='333'){ 
 
     alert($(this).find('.index').html()); 
 
     } 
 
    }); 
 
}); 
 
$('#getArray').click(function(){ 
 
    var arr=[]; 
 
    $('tbody tr').each(function(){ 
 
     arr.push($(this).find('th').text()); 
 
    }); 
 
    console.log(arr); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<table id="sort" class="grid"> 
 
    <thead> 
 
     <tr><th>Permanent ID</th><th class="index">Sorted</th><th>Rest of the row</th></tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr><th>63</th><td class="index"></td><td>something</td></tr> 
 
     <tr><th>65</th><td class="index"></td><td>test</td></tr> 
 
     <tr><th>11</th><td class="index"></td><td>more text</td></tr> 
 
     <tr><th>333</th><td class="index"></td><td>other stuff</td></tr> 
 
     <tr><th>2</th><td class="index"></td><td>something text</td></tr> 
 
    </tbody> 
 
<br> 
 
    <br> 
 
Get index for row with id=333; 
 
<button id="getIndex"> 
 
Get Index 
 
</button> 
 
<button id="getArray"> 
 
    Get Array 
 
</button> 
 
    <br> 
 
    <br>