Discussion :

[pcouas]

Bonjour

J'ai une table "example" qui est initialisé dynamiqument avec un GET lors du chargement de la page à l'initialisation. J'ai rajouté un bouton et une méthode sendAja11() afin de faire un post vers ma servlet apres changement de l'ordre des lignes.
Lorsque je click sur mon bouton cela envoi du null coté serveur ???

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
var editor; // use a global for the submit and return data rendering in the examples
$(document).ready(function() {
    var table = $('#example').DataTable({
        dom: 'Bfrtip',
        "searching": false,
        "paging": false,
        ajax: '/jquery03/MyServlet2',
        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';
            }
        }],
        columnDefs: [{
            orderable: false,
            targets: [1, 2, 3]
        }],
        rowReorder: {
            dataSrc: 'readingOrder',
            editor: editor
        },
        select: true,
    });
 
    editor
        .on('postCreate postRemove', function() {
            // After create or edit, a number of other rows might have been effected -
            // so we need to reload the table, keeping the paging in the current position
            table.ajax.reload(null, false);
        })
        .on('initCreate', function() {
            // Enable order for create
            editor.field('readingOrder').enable();
        })
        .on('initEdit', function() {
            // Disable for edit (re-ordering is performed by click and drag)
            editor.field('readingOrder').disable();
        });
});
 
sendAja11 = function() {
    var data;
    if ($.fn.dataTable.isDataTable('#example')) {
        data = $('#example').DataTable();
    } else {
        data = $('#example').DataTable({
            paging: false
        });
    }
 
    $.ajax({
        type: 'post',
        cache: false,
        url: '/jquery03/MyServlet2',
        data: function(d) {
            return {
                'd': JSON.stringify(d)
            };
        }
 
    });
}

et le HTML

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Order</th>
                <th>Title</th>
                <th>Author</th>
                <th>Duration</th>
            </tr>
        </thead>
    </table>
 <input type="button" style="width: 130px; height: 60px" value="send AJAX11" onclick="sendAja11();" />

Ou est mon erreur ?

Merci d'avance
Phil

[NoSmoking]

Bonjour,
dans ton appel Ajax, où récupères tu tes données ?

[pcouas]

Bonsoir

Oui je recupere les données au départ, et apres par drag and drop je change l'ordre de lignes.

Ma recuperation au départ est

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
 
var editor; // use a global for the submit and return data rendering in the examples
$(document).ready(function() {
 
 
    var table = $('#example').DataTable( {
        dom: 'Bfrtip',
		"searching": false,
		"paging":   false,
        ajax: '/jquery03/MyServlet2',
        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';
            } }
        ],
        columnDefs: [
            { orderable: false, targets: [ 1,2,3 ] }
        ],
        rowReorder: {
            dataSrc: 'readingOrder',
            editor:  editor
        },
        select: true,
    } );
 
    editor
        .on( 'postCreate postRemove', function () {
            // After create or edit, a number of other rows might have been effected -
            // so we need to reload the table, keeping the paging in the current position
            table.ajax.reload( null, false );
        } )
        .on( 'initCreate', function () {
            // Enable order for create
            editor.field( 'readingOrder' ).enable();
        } )
        .on( 'initEdit', function () {
            // Disable for edit (re-ordering is performed by click and drag)
            editor.field( 'readingOrder' ).disable();
        } );
} );

C'est du code issu d'un exemple du site de datatables
https://editor.datatables.net/exampl...owReorder.html

J'ai besoin apres modification de l'ordre des lignes de "commiter" le nouvel ordre.

[NoSmoking]

Regardé la documentation rapidement, mais pas d'accès à la totalité car pas de licence.
Il semblerait toutefois qu'il existe une méthode submit().

[pcouas]

Resolu

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>