Bonjour,
Ne lisez ce poste que si vous etes a l'aise avec le pluggin DataTable.
Je pose cette question ici parce que l'assistance que l'on obtient sur le forum officiel est vraiment trop faible.
Voila ma question:
La fonction fnDraw n'est elle pas sencée appeler la fonction set via fnServerData a chacuns de ses appels ?
Si oui, pourquoi cela ne fonctionne t'l pas dans ce code :
Initialisation de la table "Master"
Initialization de la table "Slave"
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 function InitTopDataTable() { TopTable = $("#TopTable").dataTable({ "bJQueryUI": true, "bServeSide": true, "bProcessing": true, "sAjaxSource": "Home/GetTopTable", "fnServerData": function (sSource, aoData, fnCallback, oSettings) { console.log("Start update top"); $.getJSON(sSource, aoData, function (json) { fnCallback(json) }); console.log("End update top"); } }); }
Note
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 function InitBotDataTable() { BotTable = $("#BotTable").dataTable({ "bPaginate": false, "bJQueryUI": true, "bServeSide": true, "bProcessing": true, "sAjaxSource": "Home/GetBotTable", "fnServerData": function (sSource, aoData, fnCallback, oSettings) { console.log("Start update bot with id = " + MasterRecordID); aoData.push({ "name": "value", "value": MasterRecordID }); $.getJSON(sSource, aoData, function (json) { fnCallback(json) }); console.log("End update bot"); } }); /* ** Au click sur une ligne de la table master j'envoi l'id de la ligne à la methode sencée me renvoyer le tableau Slave ** ** Et je re-draw la table du bas. */ TopTable.on("click", "tbody tr", function (e) { MasterRecordID = this.rowIndex; console.log("Calling bot update"); BotTable.fnDraw(); }) }) }
J'ai pris exemple sur ce code qui fonctionne très bien:
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 $(document).ready(function () { /* Initialize master table - optionally */ var oCompaniesTable = $('#companies').dataTable({ "bJQueryUI": true }); /* Highlight selected row - optionally */ $("#companies tbody").click(function (event) { $(oCompaniesTable.fnSettings().aoData).each(function () { $(this.nTr).removeClass('row_selected'); }); $(event.target.parentNode).addClass('row_selected'); }); var MasterRecordID = null; var oEmployeesTable = $('#employees').dataTable({ "sScrollY": "100px", "bJQueryUI": true, "bServerSide": true, "sAjaxSource": "MasterDetailsAjaxHandler", "bProcessing": true, "fnServerData": function (sSource, aoData, fnCallback) { aoData.push({ "name": "CompanyID", "value": MasterRecordID }); $.getJSON(sSource, aoData, function (json) { fnCallback(json) }); } }); $(".masterlink").click(function (e) { MasterRecordID = $(this).attr("id"); oEmployeesTable.fnDraw(); }); });
Partager