I think I found a bug, not sure if anybody can confirm it

I think I found a bug, not sure if anybody can confirm it

liorlior Posts: 2Questions: 0Answers: 0

We use datatables pretty extensively and so far it's been an awesome tool. I found what I think is either a badly configured structure by us (unintentional) or a pretty big bug.

We have pages with n tables on them. Each table is initialized via standard init method. Here's the setup.

  1. Tables use server side loading.
  2. Some columns have rendering methods
  3. All columns have a "data" variable configured on them
  4. Initial load uses HTML loaded table
  5. All subsequent actions use JSON to update the data

After initialization of a table the aoColumns array has all the columns for the table but the objects DATA variable and render method are not pointing to the correct information provided during the initialization. Basically I configure column X with data: 'data1' and column X+1 with data:'data2' and the loaded aoColumns inverses them.

Config code:

var table = $(table).DataTable({
                    "info":     false,
                    "paging":   true,
                    "responsive": true,
                    "bLengthChange": false,
                    "pageLength": 15,
                    "deferLoading": $('#tableDeferLoading_' + that.attr('data-section')).val(),
                    "serverSide": true,
                    "ajax": {
                        'url': '...AJAX URL',
                        'dataSrc': 'data', // does nothing but added it just in case
                        'data': function(d){
                            that.attr('data-serverside',true);
                            d.sectionid = that.attr('data-section');
                            d.originalCount = $('#tableDeferLoading_' + that.attr('data-section')).val();
                            return d;
                        }
                        
                        
                    },
                    "language": {
                        "url": langFile
                  },
                    "searching": true,
                    "dom": 'Rlrtip',
                    "colReorder": {                                 
                              'fixedColumns' : 2,
                              'fixedColumnsRight': 1,
                              'fnReorderCallback': dealUIManager.sortTableColumns
                                },
                "createdRow": function ( row, data, index ) {
                               //... big method here but I can remove it and it still happens                                   

              },

            "drawCallback": function(settings){
//... I can remove this and it still happens
                    },

                    "order": [ "2","desc"],
                    "columns": [{   "orderable": false ,
                                                    "name": 'CHECKALL',
                                                    "data": 'options',
                                                    "width": "1%", /*CHECK BOX*/
                                                    "render": genRenderCallback
                                                    },
                                                    { "data": 'expand',
                                                        "name": 'EXPAND',
                                                        "orderable": false, /*EXPAND*/
                                                        "render": genRenderCallback
                                                    },
                                                    { "data": "date",
                                                        "name": 'DATE',
                                                        "orderable": true, /*DATE*/
                                                        "render": genRenderCallback
                                                    
                                                    },
                                                    { 
                                                        "data": "dealer",
                                                        "name": 'DEALER',
                                                        "orderable": true, /*true DEALER */
                                                        "render": genRenderCallback
                                                    },
                                                    { "data": "rep",
                                                        "name": 'REP',
                                                        "orderable": true, /*true DEALER */
                                                        "render": genRenderCallback
                                                        
                                                    },
                                                    { "data": "contact",
                                                        "name": 'CONTACT',
                                                        "orderable": true, /*true CONTACT */
                                                        "render": genRenderCallback
                                                        
                                                    },
                                                    { "data": "email",
                                                        "name": 'EMAIL',
                                                        "orderable": true /*true EMAIL */
                                                        ,
                                                        "render": genRenderCallback
                                                        
                                                    },
                                                    { "data": "phone",
                                                        "name": 'PHONE',
                                                        "orderable": true, /*true TELEPHONE*/
                                                        "render": genRenderCallback
                                                    
                                                    },
                                                    { "data": "car",
                                                        "name": 'CAR',
                                                        "orderable": true /*true CAR */
                                                        ,
                                                        "render": genRenderCallback
                                                        
                                                    },
                                                    { "data": "score",
                                                        "name": 'SCORE',
                                                        "orderable": true /*true SCORE */,
                                                        "sType": "numeric-comma",
                                                        "render": genRenderCallback
                                                    },
                                                    { "data": "status",
                                                        "name": 'STATUS',
                                                        "orderable": false /*true STATUS */,
                                                        "render": genRenderCallback

                                                    },
                                                    { "data": "edit",
                                                        "name": 'EDIT',
                                                        "orderable": false,
                                                        "render": genRenderCallback

                                                    }
                    ]


                    })
        .on('xhr',function(){
            //...some code here
        });

What I did to solve the issue:

  1. Added render methods for all as they were being invoked incorrectly
  2. Used a generic render method that overrides the column the data table thinks it's rendering

How did I do this?

I debugged the dataTables code and found that the render method passes a meta variable. That meta variable has the settings and the current column being rendered (col). I used these variables to identify the correct column and retrieve the correct data variable. Since I use object loading I was able to use the row variable provided during the render to retrieve the correct [data] variable

in essence:

var genRenderCallback = function(data,type,row,meta)
{
  var type = meta.settings.aoColumns[meta.col].type; // I store the real data value in this
  var data = row[type];
  
  //your code here
    
}

Obviously this is not ideal and it feels as if the issue is probably my fault as I would have assumed an issue like this would have been found already. I can't seem to see where I screw up the data/render configs but they're definitely wrong on the aoColumn. Right after the init code they're wrong. I can't attach images or I'd provide an image of my chrome debugger showing the issue.

Anybody else ever encounter something like this? Or does anybody see some glaring mistake I made in my init table?

Replies

  • allanallan Posts: 63,173Questions: 1Answers: 10,409 Site admin

    Can you link to a page showing the issue please?

    Thanks,
    Allan

  • liorlior Posts: 2Questions: 0Answers: 0

    Not easily as it's an application and not a web page. I can probably provide a login for you guys on my VM...actually if we do it now I can even switch between git branches so you can see the error and see it with my fix. I can provide the login creds via email

  • allanallan Posts: 63,173Questions: 1Answers: 10,409 Site admin

    You can drop me a PM with the details by clicking my name above and then "Send message".

    Allan

This discussion has been closed.