Prob with some custom httpVariable when I generate dynamic DataTables

CM5423

Hi, I've a prob :(. some clients have different (DataTables) by product. I try to put some variables for filter when I create a DataTables but, when I try to refresh some section, that always that the last filter

Case:

1- first time for load, this perfect, wee see "Pair" section and "Impair" section
2- Try to reorder some column of the "Pair" section and that use the filter "Impair" or when I click on the button to redraw

"data": function (d) {
                            
                            d.Filtre = infoRapportCourant.getfiltre();  <----- where is the problem
                        }

============== HTML =======================

<div>
    <button type="button" id="BtnPair">Pair</button>
    <table id="dataTables_Pair" class="table table-striped table-bordered" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>group</th>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody></tbody>
        <tfoot>
            <tr>
                <th>group</th>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Salary</th>
            </tr>
        </tfoot>
     
    </table>
    <button type="button" id="BtnImpair">Impair</button>
    <table id="dataTables_Impair" class="table table-striped table-bordered" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>group</th>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody></tbody>
        <tfoot>
            <tr>
                <th>group</th>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Salary</th>
            </tr>
        </tfoot>

    </table>
    
</div>

==============SCRIPT======================


<script type="text/JavaScript">


        var listSection = ["Pair", "Impair"]
        var listTable = [];

        $(document).ready(function () {
            var AliasSite = "/BIDON";
            var Controlleur = "/Test";
           
            

            for (var i in listSection) {

              
                var infoRapportCourant = (function () {
                    var filtre = '';
                    var proptable = '';

                    return {
                        getfiltre: function () {
                            return this.filtre;
                        },
                        setfiltre: function (newSource) {
                            this.filtre = newSource;
                        },
                        getproptable: function () {
                            return this.proptable;
                        },
                        setproptable: function (newSource) {
                            this.proptable = newSource;
                        }
                    }
                }());

                infoRapportCourant.setfiltre(listSection[i]);

                infoRapportCourant.setproptable($('#dataTables_' + infoRapportCourant.getfiltre()).DataTable({                  
                    serverSide: true,
                    select: true,
                    "ajax": {
                        "url": "/BIDON/test/getData",
                        "type": "POST",
                        "dataType": "json",
                        "data": function (d) {
                            
                            d.Filtre = infoRapportCourant.getfiltre();
                        }
                    },
                    "processing": true,
                    "bFilter": true,
                    "pagingType": "full_numbers",
                    columns: [
                         { data: "group" },
                        { data: "Name" },
                        { data: "Position" },
                        { data: "Office" },
                        { data: "Salary" }
                    ]

                }));
                
                listTable.push(infoRapportCourant);
            }


            for (var iSection in listTable) {
                var idChoisi = "#Btn" + listTable[iSection].filtre
                $(idChoisi).on('click', { objTemp: listTable[iSection] }, function (e) {
                     
                       e.data.objTemp.proptable.draw();                       
                    });
                }

});
</script>

allan

I'm afraid I don't immediately see the issue. Can you link to the page showing the issue please? If you debug the return value of infoRapportCourant.getfiltre(); - what is it?

Allan

CM5423

No I cant, my web page it's in intranet :(
If I debug, the return value of "infoRapportCourant.getfiltre();" in the creation of DataTables id "Pair" in first, "Impair" in second cond time ( here it's correct). But when I reordering datatables_Pair ( ex: column group), the return value is "Impair".

I think, it's beacause I'm in scope that can see my objet infoRapportCourant in the section

"data": function (d) {
                             
                            d.Filtre = infoRapportCourant.getfiltre();  <----- where is the problem
                        }

allan

So is the issue that the value is not what you expect rather than the data is not being sent to the server? If so, it does sound like a scoping issue.

Allan