Compatibilité affichage résultat avec Ajax et Script javascript de datagrid

**Sereine** · 08/10/2012, 15h46

Bonjour. Je galère un peu avec ajax je dois dire ...

J'ai un formulaire de filtre d'une liste dans un tableau qui filtre les données en même temps que j'entre des données dans le champ de recherche.

Mon script marche bien.

Maintenant, je dois insérer un script permettant de trier le tableau. Je ne sais pas si c'est la bonne méthode mais j'ai choisis de le faire via un petit script javascript.

Mon soucis est, sur la liste simple, le tri du tableau s'effectue bien. Mais lorsque le filtre s'effectue en asyncrone, le tri ne fonctionne plus.

Voici le code (un peu long

j'ai essayer de simplifier):

La vue de mon fichier où apparait le tableau

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
 
<table >
	<thead>
          <tr align="center">
             <th colspan="1" width="5%">Recherche</th>
             <th width="5%"><input type='text' name='find_article' id="find_article" value="" /></th>
                   ...
         </tr>
    </thead>
</table>
<table id="results" class="sorted regroup">
        <thead>       
            <tr id="grid" align="center">
                <th class="sortedplus" style="cursor: pointer;" id="th_numnc" width="5%">Num NC</th>
                <th style="cursor: pointer;" id="th_artcl" width="5%">Article</th>
                <th style="cursor: pointer;" id="th_design" width="20%">Désignation</th>
            </tr>
        </thead>
        <tbody >
        <?php
            if (isset($paginator) && count($paginator) > 0) {
                foreach ($paginator as $id => $qualitynote) {
             ?>
             <tr  align="center">
                <td axis="number" headers="th_numnc" class="resultat" width="5%"><?php echo $qualitynote['id']; ?></td>
                 <td axis="sstring" headers="th_artcl" class="resultat" width="5%"><?php echo $qualitynote['qn_num_material']; ?></td>
                 <td  axis="sstring" headers="th_design" class="resultat" width="20%"><?php echo $qualitynote['qn_name_material']; ?></td>
            </tr>
		<?php
                  }
             }
        ?>
        </tbody>
</table>

le code ajax

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
 
<script type='text/javascript'> 
    $(document).ready( function() {
        $('.search_bar').keyup( function(){
            var val1 = $('#find_article').val(),
            val2 = $('#find_fournisseur').val(),
            val3 = $('#find_designation').val(),
            ajaxData = { "a": 2 },
            ok = false;
 
            $('#results').html('');
            $('#ajax-loader').remove();
 
            if (val1.length > 0) {
                ajaxData.find_article = val1;
                ok = true;
            }
            if (val2.length > 0) {
                ajaxData.find_fournisseur = val2;
                ok = true;
            }
            if (val3.length > 0) {
                ajaxData.find_designation = val3;
                ok = true;
            }
            if (val1.length == 0 && val2.length == 0 && val3.length == 0) {
                ajaxData = "";
                ok = true;
            }
 
            if(ok === true)
            {
                $.ajax({
                    type : 'POST',
                    url : '../inc_pages/test-ajax.php?a=2',
                    data :ajaxData,
                    success : function(data){
                        $('#results').html(data);
 
                    }
                });
            }
        });
    });
</script>

le code javascript et la css effectuant le tri du tableau

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
 
<script type="text/javascript" src="../scripts/Event.js"></script>
<script type="text/javascript" src="../scripts/SortedTable.js"></script>
<script type="text/javascript">//<![CDATA[
   var sourceTable, destTable;
    onload = function() {
        sourceTable = new SortedTable('s');
        destTable = new SortedTable('d');
        mySorted = new SortedTable();
        mySorted.colorize = function() {
            for (var i=0;i<this.elements.length;i++) {
                if (i%2){
                    this.changeClass(this.elements[i],'even','odd');
                } else {
                    this.changeClass(this.elements[i],'odd','even');
                }
            }
        }
        mySorted.onsort = mySorted.colorize;
        mySorted.onmove = mySorted.colorize;
        mySorted.colorize();
        secondTable = SortedTable.getSortedTable(document.getElementById('id'));
        secondTable.allowDeselect = false;
    }
    function moveRows(s,d) {
        var a = new Array();
        for (var o in s.selectedElements) {
            a.push(s.selectedElements[o]);
        }
        for (var o in a) {
            var elm = a[o];
            var tds = elm.getElementsByTagName('td');
            for (var i in tds) {
                if (tds[i].headers) tds[i].headers = d.table.id+''+tds[i].headers.substr(d.table.id.length);
            }
            d.body.appendChild(a[o]);
            d.deselect(a[o]);
            d.init(d.table);
            d.sort();
            s.deselect(a[o]);
            s.init(s.table);
        }
    }
        //]]></script>
<style type="text/css">
			/* document styles */
			.disclaimer {border-top:1px solid #ccc;color:#879AB7;padding-top:.5em;font-size:.9em;}
			dl {margin:0 1em;padding:0;}
			dl, form {float:left;}
			li {padding:.1em 0;}
			hr {clear:both;width:100%;background:#fff;height:0;border:0;border-bottom:1px solid #fff;margin:0 0 1em;padding:0;}
 
			/* table styles */
			table {border:0;padding:0;margin:0 0 1em;border-left:1px solid #336;border-top:1px solid #336;float:left;clear:left;}
			tr {border:0;padding:0;margin:0;}
			td, th {border:0;padding:2px 6px;margin:0;border-right:1px solid #336;border-bottom:1px solid #336;background-color:#EAEEF3;}
			td[axis='number'], td[axis='date'] {text-align:right;}
			th {white-space:no-wrap;background-color:#B4C4D1;padding:2px 20px;}
			tfoot td {border-top:1px solid #003;}
			thead th {border-bottom:2px solid #003;}
			.odd td {background-color:#E8ECF1;}
			.even td {background-color:#DDE5EB;}
			.hover td {background-color:#A5B3C9;}
			.sortedminus {background-color:#ecc;}
			.sortedplus {background-color:#cec;}
			.selrow td {background-color:#879AB7;}
 
			/* source-dest example styles */
			#s {float:left;}
			#d {float:left;clear:none;}
			form#tabletool {margin:0;padding:0.5em;}
			form#tabletool fieldset {width:8em;text-align:center;}
			form#tabletool legend {margin:0 auto;}
			form#tabletool input {margin:0.5em;}
</style>

Le fichier contenant le code appelé par ajax.

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
 
<?php 
$qualitynoteListTable = new TQualitynote(); 
if (!isset($_POST['find_article']))
    $_POST['find_article'] = '';
if (!isset($_POST['find_designation']))
    $_POST['find_designation'] = '';
 
if (isset($_POST['find_statut']) && $_POST['find_statut'] != '') { 
    $select = $qualitynoteListTable->select()
            ->distinct()
            ->where('qn_num_material  like "' . $_POST['find_article'] . '%"')
            ->where('qn_name_material like "%' . $_POST['find_designation'] . '%"')
            ->where('qn_name_vendor like "%' . $_POST['find_fournisseur'] . '%"')
} else { // l'utilisateur n'a pas choisit de statut pour les FRF recherché
    $select = $qualitynoteListTable->select()
            ->distinct()
            ->where('qn_num_material  like "' . $_POST['find_article'] . '%"')
            ->where('qn_name_material like "%' . $_POST['find_designation'] . '%"')
            ->where('qn_name_vendor like "%' . $_POST['find_fournisseur'] . '%"')
}
 
if (isset($select)) {
    $qualitynotesList = $qualitynoteListTable->fetchAll($select)->toArray();
} else {
    $qualitynotesList = $qualitynoteListTable->fetchAll()->toArray(); 
}
$query_qualitynotes_numbers = $select->query();
$nbTotalQualityNotes = $query_qualitynotes_numbers->rowCount();
 
 
if (!empty($_GET["page"])) {
    $page = $_GET["page"];
} else if (!empty($_POST["page"]))
    $page = $_POST["page"];
else {
    $page = 1;
}
 
$qualityNotesPerPage = 20;
$paginator = Zend_Paginator::factory($select);
$paginator->setDefaultScrollingStyle('Sliding');
$paginator->setCurrentPageNumber($page);
$paginator->setItemCountPerPage($qualityNotesPerPage);
$paginator->setCurrentPageNumber($page);
?>
 <thead>       
            <tr id="grid" align="center">
                <th class="sortedplus" style="cursor: pointer;" id="th_numnc" width="5%">Num NC</th>
                <th style="cursor: pointer;" id="th_artcl" width="5%">Article</th>
                <th style="cursor: pointer;" id="th_design" width="20%">Désignation</th>
            </tr>
        </thead>
        <tbody >
        <?php
            if (isset($paginator) && count($paginator) > 0) {
                foreach ($paginator as $id => $qualitynote) {
             ?>
             <tr  align="center">
                <td axis="number" headers="th_numnc" class="resultat" width="5%"><?php echo $qualitynote['id']; ?></td>
                 <td axis="sstring" headers="th_artcl" class="resultat" width="5%"><?php echo $qualitynote['qn_num_material']; ?></td>
                 <td  axis="sstring" headers="th_design" class="resultat" width="20%"><?php echo $qualitynote['qn_name_material']; ?></td>
            </tr>
		<?php
                  }
             }
        ?>
        </tbody>

**Sereine** · 09/10/2012, 10h46

j'ai tout tenté ou presque, j'ai mis un écouteur sur ajax pour executer a nouveau le script javascript sur #results, mais rien n'y fait.

**Sereine** · 09/10/2012, 11h09

Bon et bien au final j'y suis arrivé:

Code :

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

1
2
3
4
5
6
 
 
$('#results').ajaxStop( function() {
 
    onchange = function() {
....

changer le onload en onchange ... déjà je comprends pas que ça change quoique ce soit, pour moi ce sont des variables ... Enfin bref, ça marche, c'est moche, mais ça marche. Je retravaillerais le code plus tard, je passe déjà derrière un projet très très moche, donc quand je retravaillerais la structure de l'ensemble, je m'en occuperais.

Compatibilité affichage résultat avec Ajax et Script javascript de datagrid [AJAX]

jQuery

Discussions similaires

Partager

Partager