1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery AJAX arrays</title>
<link rel="stylesheet" type="text/css" href="./rowjscss/jquery.dataTables.minb.css">
<link rel="stylesheet" type="text/css" href="./rowjscss/select.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="./rowjscss/rowReorder.dataTables.min.css">
<script type="text/javascript" language="javascript" src="./rowjscss/jquery-1.12.0.min.js"></script>
<script type="text/javascript" language="javascript" src="./rowjscss/jquery.dataTables.minb.js"></script>
<script type="text/javascript" language="javascript" src="./rowjscss/dataTables.rowReorder.min.js"> </script>
<script type="text/javascript" class="init">
$(document).ready(function() {
var url = "/jquery03/MyServlet2";
var table = $('#example').DataTable( {
dom: 'Bfrtip',
"searching": false,
"paging": false,
"info": false,
ajax: url,
columns: [
{ data: 'readingOrder', className: 'reorder' },
{ data: 'title' },
{ data: 'author' },
{ data: 'duration', render: function ( data, type, row ) {
return parseInt(data/60, 10)+'h '+(data%60)+'m';
} }
,
{
"data": function (row, type, val, meta) {
return '<input name="key-' + meta.row + '" value="' +row.readingOrder+'" type="hidden" />'
}}
],
columnDefs: [
{ orderable: false, targets: [ 1,2,3 ] },
{
"targets": [ 0 ],
"visible": false
}
],
rowReorder: {
dataSrc: 'readingOrder'
},
select: true,
} );
$('#form').submit( function() {
// e.preventDefault(); // avoid to execute the actual submit of the form. A PRIORI PB ICI
var mystring = "";
$("#example").each(function(k){
$( this ).find( 'input:hidden' ).each(function(i){
mystring=mystring+'row_'+i+'='+$(this).val()+'&';
});
});
//alert('AVANT'+mystring);
$.ajax({
type: "POST",
url: url,
data: mystring, // serializes the form's elements.
//success: function(data) { alert(data); // show response from the php script. }
success: function() { alert('Success'); },
error: function() { alert('Error'); }
});
} );
} );
</script>
</head>
<body>
<form id="form" onsubmit="return false;">
<div style="text-align:right; padding-bottom:1em;">
<button type="submit">Submit form ET CLICK</button>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Order</th>
<th>Title</th>
<th>Author</th>
<th>Duration</th>
<th></th>
</tr>
</thead>
</table>
</form>
</body>
</html> |
Partager