使表行可排序

时间:2016-04-26 14:07:24

标签: jquery html

当通过ajax在页面上加载表行时,我究竟能如何排序? 我在页面标记上通过ajax加载表格

<div id="mycart" style="text-align:center;"> </div>

这是我尝试在表格中对tr进行排序的脚本

$(document).ready(function() {
   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();
});

当我放$("#mycart tbody").sortable({它正在工作但正在移动整个mycart div。那么如何在页面上选择不是“真正”的表...在页面的源代码中我只看到<div id="mycart" style="text-align:center;"> </div> ..我没有看到实际的表格。 这是我提取数据的js whit

function show_cart()
{
  $.ajax({
  type:'post',
  url:'includes/store_items.php',
  data:{
    showcart:"cart"
  },
  success:function(response) {
    document.getElementById("mycart").innerHTML=response;

    $("#mycart").slideToggle();
  }
 });

1 个答案:

答案 0 :(得分:3)

我认为您需要在放置新HTML后立即在ajax请求的成功回调中调用相同的JQuery Sortable函数:

IntStream.range(0, (int)Math.pow(3, 20))                       // yields 0 to 3^20-1
         .mapToObj(number -> Integer.toString(number, 3))      // base 3 conversion
         .map(string -> String.format("%1$20s", string))       // 20 char padding
         .map(paddedString -> paddedString.replace("2", "3"))  // number shifting. must be made in this specific order not to fail
         .map(paddedString -> paddedString.replace("1", "2"))
         .map(paddedString -> paddedString.replace("0", "1"))
         .map(paddedString -> paddedString.replace(" ", "1"))
         .forEach(System.out::println);

更新:您可能需要在 success:function(response) { document.getElementById("mycart").innerHTML=response; // or $("#mycart").html(response); $("#sort tbody").sortable({ helper: fixHelperModified, stop: updateIndex }).disableSelection(); $("#mycart").slideToggle(); } 之外移动以下功能:

$(document).ready({});