css - Jquery datatables fixed columns issue in IE 9 -


i using jquery ui tabs display 2 grids side side within same div. grid displayed using jquery datatables plugin. have added feature of fixed columns in both of grids, makes ie 9 behave weirdly @ random.
behavior happen @ total random on 1 of 2 grids not on both. ie 9 display fixed column portion on horizontal scroll-bar. looks below:

enter image description here

other grid display fine below:
enter image description here
funny thing if sort out affected table or enter characters in search textbox, overlapping portion got fixed automatically.
search on , came know draw() function called on these actions tried call function manually on tab selection event didn't solve problem.
below js code tab selection event:

$('#diveamountdismountgridstabs, #currentspec').tabs(     {         select: function(event, ui)         {             // stuff here             var tempdismount = $('#tbldismountatt').datatable();             tempdismount.draw(false);              var tempcurrentspec = $('#tblcurrentspec1').datatable();             tempcurrentspec.draw(false);         }     }); 


below js write on datatable initialization(both grids got same attributes copying initialization of first grid).

/*datatable implementation*/     var tabledismountatt = $('#tbldismountatt').datatable(     {         "bfilter": true,         "binfo": false,         "bdestroy": true,         "bwidth": '100%',         //"sdom": '<"top"f>',         'idisplaylength':5000,         "order": [[2, "asc"]],          dom: "cfrtip",          scrolly: "140px",          scrollx: "100%",          paging: false,          scrollcollapse: true,         "aocolumndefs" : [                         {'bsortable' : false, 'atargets' : [ 0 ] , "width": "80px"}, //switch dismount                         {'bsortable' : false, 'atargets' : [ 1 ], "width": "80px"}, //parts status                         {'bsortable' : true, 'atargets' : [ 2 ], "width": "80px"}, //sales code                         {'bsortable' : true, 'atargets' : [ 3 ] , "width": "60px"}, //price                         {'bsortable' : false, 'atargets' : [ 4 ], "width": "60px"}, //currency                         {'bsortable' : true, 'atargets' : [ 5 ], "width": "150px"}, //sales code description                         {'bsortable' : false, 'atargets' : [ 6 ], "width": "80px"}, //quantity                         {'bsortable' : false, 'atargets' : [ 7 ], "width": "380px"}, //remarks                         {'bsortable' : true, 'atargets' : [ 8 ], "width": "80px"}, //    pso ref no.                         {'bsortable' : false, 'atargets' : [ 9 ], "width": "150px"}, //model sub name                         {'bsortable' : false, 'atargets' : [ 10 ] , "width": "80px"}, //value                         {'bsortable' : false, 'atargets' : [ 11 ], "width": "150px"}, //date                         {'bsortable' : true, 'atargets' : [ 12 ]},                         {'bsortable' : true, 'atargets' : [ 13 ]},                         {'bsortable' : true, 'atargets' : [ 14 ]}                     ]      });     /*freezing dismount attachment columns*/            new $.fn.datatable.fixedcolumns( tabledismountatt, {leftcolumns: 6, heightmatch: 'auto'}); 

cause of problem initialization of second grid occuring when hidden, result when became visible, alignment of controls got disturbed. thing mentioned on jquery datatables official site. can read details here.

to avoid situation need call adjustcolumns function whenever grid shows/drawn.

i have called function 2 times:

  1. when datatable initializes
  2. when draw function called on grid

(at first called function on initialization, when tried filter records using smart search, alignment getting disturbed again.)

below changes have made datatable initialization code working fine now.

/*datatable implementation*/     var tabledismountatt = $('#tbldismountatt').datatable(     {         "bfilter": true,         "binfo": false,         "bdestroy": true,         "bwidth": '100%',         //"sdom": '<"top"f>',         'idisplaylength':5000,         "order": [[2, "asc"]],          dom: "cfrtip",          scrolly: "140px",          scrollx: "100%",          paging: false,          scrollcollapse: true,          "fninitcomplete": function ()           {             this.fnadjustcolumnsizing(true);          },          "fndrawcallback" : function(osettings)          {             this.fnadjustcolumnsizing(false);          },         "aocolumndefs" : [                         {'bsortable' : false, 'atargets' : [ 0 ] , "width": "80px"}, //switch dismount                         {'bsortable' : false, 'atargets' : [ 1 ], "width": "80px"}, //parts status                         {'bsortable' : true, 'atargets' : [ 2 ], "width": "80px"}, //sales code                         {'bsortable' : true, 'atargets' : [ 3 ] , "width": "60px"}, //price                         {'bsortable' : false, 'atargets' : [ 4 ], "width": "60px"}, //currency                         {'bsortable' : true, 'atargets' : [ 5 ], "width": "150px"}, //sales code description                         {'bsortable' : false, 'atargets' : [ 6 ], "width": "80px"}, //quantity                         {'bsortable' : false, 'atargets' : [ 7 ], "width": "380px"}, //remarks                         {'bsortable' : true, 'atargets' : [ 8 ], "width": "80px"}, //    pso ref no.                         {'bsortable' : false, 'atargets' : [ 9 ], "width": "150px"}, //model sub name                         {'bsortable' : false, 'atargets' : [ 10 ] , "width": "80px"}, //value                         {'bsortable' : false, 'atargets' : [ 11 ], "width": "150px"}, //date                         {'bsortable' : true, 'atargets' : [ 12 ]},                         {'bsortable' : true, 'atargets' : [ 13 ]},                         {'bsortable' : true, 'atargets' : [ 14 ]}                     ]      }); 

note:

  1. fnadjustcolumnsizing(true) => adjust column size grids/datatables either visible or hidden.

  2. fnadjustcolumnsizing(false) => adjust column size grids/datatables visible.


Comments

Popular posts from this blog

apache - PHP Soap issue while content length is larger -

asynchronous - Python asyncio task got bad yield -

javascript - Complete OpenIDConnect auth when requesting via Ajax -