2016-12-07 81 views
1

我目前正在制作一个可排序的表,并且需要将更多的id传递给序列化数组。如何将自定义变量添加到jQuery可排序?

我添加了所有我的代码exept后文件,该dossent relly做任何事情比var_dumping张贴。

<!DOCTYPE html> 
<html lang="en"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
</head> 
<body> 
<div class="container"> 
    <div class="row"> 
     <div class="col-md-12"><br><br><br><br> 
      <table class="display table table-striped table-hover table-bordered dt-responsive responsive nowrap" cellspacing="0" width="100%"> 
      <thead> 
       <th>Navn</th> 
       <th>Order</th> 
      </thead> 
      <tbody id="sortable"> 
       <tr id="order_1" data-extravalue="45"> 
        <td>value</t> 
       </tr> 
       <tr id="order_2" data-extravalue="56"> 
        <td>value</t> 
       </tr> 
      </tbody> 
      </table> 
     </div> 
    </div> 
</div> 
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 

     $('#sortable').sortable({ 
      update: function(event, ui) { 

       var order = $("#sortable").sortable('serialize'); 

       $.ajax({ 
        data: order, 
        type: 'POST', 
        url: 'post.php' 
       }); 
      } 
     }); 
    }); 
</script> 
</body> 
</html> 
+0

首先,你应该正确地关闭你''​​标签:'​​'。其次,你想收集哪些其他信息? – Twisty

回答

1

不确定,但这可能会帮助你。由于您发布到PHP,因此您需要使用json_decode(),电话号码为$_POST['json']

工作实例:https://jsfiddle.net/Twisty/a2e9626L/4/

HTML

<div class="container"> 
    <div class="row"> 
    <div class="col-md-12"> 
     <br> 
     <br> 
     <br> 
     <br> 
     <table class="display table table-striped table-hover table-bordered dt-responsive responsive nowrap" cellspacing="0" width="100%"> 
     <thead> 
      <th>Navn</th> 
      <th>Order</th> 
     </thead> 
     <tbody id="sortable"> 
      <tr id="order_1" data-extravalue="45"> 
      <td>value</td> 
      </tr> 
      <tr id="order_2" data-extravalue="56"> 
      <td>value</td> 
      </tr> 
     </tbody> 
     </table> 
    </div> 
    </div> 
</div> 

的JavaScript

$(function() { 
    $('#sortable').sortable({ 
    update: function(event, ui) { 
     var order = $("#sortable").sortable('serialize'); 
     var data = []; 
     $("#sortable tr").each(function(i, el) { 
     data.push({ 
      order: $(el).attr("id"), 
      value: $(el).data("extravalue") 
     }); 
     }); 
     $.ajax({ 
     data: { 
      json: JSON.stringify(data) 
     }, 
     type: 'POST', 
     url: 'post.php' 
     success: function(d) { 
      console.log(d); 
     } 
     }); 
    } 
    }); 
}); 
相关问题