Table slow on IE 8 becauses of code in fnDrawCallback

telahu1

I have the following code. It works fine on firefox but IE8 is very slow. I have managed to identify that whatever is making IE slow is in the fnDrawCallback function. Can you help me rewrite or find out why the script gets slow? Thanks.

[code]


$(function () {
var my_sRangeFormat = 'Enter a start date (e.g. mm/dd/yyyy) {from} Enter an end date (e.g. mm/dd/yyyy) {to}';
var url = '<%= Url.Action("LabTableAjaxHandler", "Document") %>';

$('#labTbl').dataTable({
bDeferRender: true,
bJQueryUI: true,
bProcessing: true,
bServerSide: true,
bStateSave: true,
fnStateSave: function (oSettings, oData) {
localStorage.setItem('DataTables_labTbl', JSON.stringify(oData));
},
fnStateLoad: function (oSettings) {
return JSON.parse(localStorage.getItem('DataTables_labTbl'));
},
fnServerParams: function (aoData) {
aoData.push({ "name": "TableType", "value": "Lab" });
},
sAjaxDataProp: "aaData",
sPaginationType: 'full_numbers',
sAjaxSource: url,
fnDrawCallback: function () {


$('#labTbl tr').each(function () {


$(this).find('select.catagorycombo').selectmenu({
menuWidth: 200,
select: function (event, options) {

var td = $(this).parent().parent();

var combo = td.next("td").find("select.testcombo").selectmenu();

var url = '<%= Url.Action("GetTestListDropDown", "Document") %>';
var contextKey = options.value;
var text = $("option:selected", $(this)).text();
var length = combo.find('option').length;

$.ajax({
type: "POST",
url: url,
data: { contextKey: contextKey, catagory: text },
success: function (data, textStatus, jqXHR) {
var options = [];
$.each(data, function (i, el) {
options.push("" + el["Text"] + "");

});

combo.append(options.join("")).selectmenu();
combo.selectmenu('enable');
}
});

}
});

$(this).find('select.testcombo').selectmenu({
menuWidth: 200
});


});

},
aoColumnDefs: [
{ aTargets: [0], bSortable: false, mDataProp: function (aaData) {

var display_value = 'View';
return display_value;
}
},
{ aTargets: [1], sType: 'date', mDataProp: function (oObj) {
return formatJsonDate(oObj[0], 'MM/DD/YYYY hh:mm');
}
},
{ aTargets: [2], mDataProp: function (oObj) { return oObj[1] } },
{ aTargets: [3], mDataProp: function (oObj) { return oObj[2] } },
{ aTargets: [4], mDataProp: function (oObj) { return oObj[3] } },
{ aTargets: [5], bSortable: false, mDataProp: function (oObj) {

var r = 'Select All';
return r;

}

},
{ aTargets: [6], bSortable: false, mDataProp: function (oObj) {

var r = 'Select All';
return r;
}

}
]
})
.columnFilter({
sPlaceHolder: 'head:after',
aoColumns: [
null,
{ type: 'date-range', sRangeFormat: my_sRangeFormat, displayBlock: true, showLabels: false, showToolTips: true },
{ type: "text" },
null,
null,
null,
null
]
}).fnSetFilteringDelay();


});


$('body').on('click', '.pcatagorycombo', function (e) {

var url = '<%= Url.Action("GetCatagoryListDropDown", "Document") %>';
var combo = $(this).find('select.catagorycombo').selectmenu();
var contextKey = combo.val();
var length = combo.find('option').length;
var loading = "Loading...";

if (length == 1) {
combo.append(loading).selectmenu();
$.ajax({
type: "POST",
url: url,
data: { contextKey: contextKey },
success: function (data, textStatus, jqXHR) {
var options = [];
$.each(data, function (i, el) {
options.push("" + el["Text"] + "");

});
combo.find('[value="Loading"]').remove();
combo.selectmenu();
combo.append(options.join("")).selectmenu();
}
});

}
else {
return false;
}



});

$('body').on('click', '.doclist-view-detail', function (e) {

var catagoryCombo = $(this).closest('tr').find('.catagorycombo');
var testCombo = $(this).closest('tr').find('.testcombo');
var contextKey = catagoryCombo.find('option:selected').val();
var catagory = catagoryCombo.find('option:selected').text() == "Select All" ? "all" : catagoryCombo.find('option:selected').text();
var test = testCombo.find('option:selected').text() == "Select All" ? "all" : testCombo.find('option:selected').text();
var url = '<%= Url.Action("detailslab", "document") %>/lab?contextKey=' + contextKey + '&catagory=' + catagory + '&test=' + test;

window.location = url;

});




[/code]

telahu1

I've managed to rewrite the code in fnDrawCallback. The performance is better now. But i still have a problem when rendering the regular select box (html combobox) into jQuery selectmenue (plugin). Is there a better select box plugin i can use with datatables?

Modified code

[code]
fnDrawCallback: function () {

if (typeof oTable != 'undefined') {

$('select', oTable.fnGetNodes()).each(function () {

if ($(this).is(".catagorycombo")) {

$(this).selectmenu({

menuWidth: 200,
select: function (event, options) {

var td = $(this).parent().parent();

var combo = td.next("td").find("select.testcombo");

var url = '<%= Url.Action("GetTestListDropDown", "Document") %>';
var contextKey = options.value;
var text = $("option:selected", $(this)).text();
//var length = combo.find('option').length;

$.ajax({
type: "POST",
url: url,
data: { contextKey: contextKey, catagory: text },
success: function (data, textStatus, jqXHR) {
var options = [];
$.each(data, function (i, el) {
options.push("" + el["Text"] + "");

});

combo.append(options.join("")).selectmenu();
combo.selectmenu('enable');
}
});

}
});
} else {

$(this).selectmenu({
menuWidth: 200
});

}


});
}

},
[/code]

allan

I doubt that the use of DataTables makes any difference to the performance of the auto complete plug-in. There are several others other than jQuery UI's, but I can't speak for their performance.

Allan