Compatibilité affichage résultat avec Ajax et Script javascript de datagrid
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 :x j'ai essayer de simplifier):
La vue de mon fichier où apparait le tableau
Code:
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:
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:
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:
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> |
