[Plugin] jQuery DataTables pluggin help fnServerData

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"

Code:

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");
      }
   });
}

Initialization de la table "Slave"

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
 
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();
   })
 })
}

Note
J'ai pris exemple sur ce code qui fonctionne très bien:

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
$(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();
         });
     });