Columns are getting tonnes of extra data added to the title attributes of td elements
Columns are getting tonnes of extra data added to the title attributes of td elements
ConorHiggins
Posts: 9Questions: 0Answers: 0
Hi, I am working on implementing serverpaging across our entire web application.
At the moment, I am using the processing event to remove title attributes but that is just adding unnecessary processing to the app.
Below is my full declaration. I've also included the processing event, which is currently removing the title attribute. The reason I don't want this to stay as is, is simply that a user can show up to 250/500 contacts at once and so I would like to avoid unnecessary processing each time someone searches/updates/etc.
[code]
contactTable = $(".datatable").dataTable({
sDom: 'rt<"dataTables_bottom cf"pl>', // Move the components around
sPaginationType: "22touch", // Custom pagination HTML
oLanguage: { // Change some language stuff
"sLengthMenu": "_MENU_",
"sZeroRecords": "No Contacts found",
"sInfo": "Showing _START_ to _END_ of _TOTAL_ records",
"sInfoEmpty": "Showing 0 to 0 of 0 records",
"sInfoFiltered": "(filtered from _MAX_ total records)"
},
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "/utils/server",
"bStateSave": false,
"bDeferRender": true,
"aoColumns": [
{
sClass: 'check-box',
"bSortable": false,
mRender: function ( data, type, row ) {
return '';
}
},
{
sClass: 'name',
mData: 'title',
mRender: function ( data, type, row ) {
return ''+data+'';
}
},
{
sClass: 'company',
mData: 'contact_company'
},
{
sClass: 'email',
mData: 'contact_email',
mRender: function ( data, type, row ) {
return ''+data+'';
}
},
{
sClass: 'phone',
mData: 'contact_mobile'
},
{
sClass: 'list',
sWidth: '100px',
mData: 'contact_list_designation',
mRender: function ( data, type, row ) {
return ''+
'A'+
'B'+
'C'+
'D'+
'';
}
}
],
"aoColumnDefs": [
{
// Add the 'title' attribute to all cells. Since this is applied
// equally to all columns, for their defined data property, we
// can use aTargets and just do it once.
aTargets: ['_all'],
fnCreatedCell: function ( td, data, row, rowIdx, colIdx ) {
td.title = data;
}
}
]
});
contactTable.on( 'processing', function ( e, o, processing ) {
if (processing) $('.active_processes').show();
else $('.active_processes').hide();
if (!processing){
$('tbody td').each(function(){
if ($(this).hasClass('list')) $(this).removeAttr('title');
else $(this).attr('title', $(this).text());
});
}
});
[/code]
At the moment, I am using the processing event to remove title attributes but that is just adding unnecessary processing to the app.
Below is my full declaration. I've also included the processing event, which is currently removing the title attribute. The reason I don't want this to stay as is, is simply that a user can show up to 250/500 contacts at once and so I would like to avoid unnecessary processing each time someone searches/updates/etc.
[code]
contactTable = $(".datatable").dataTable({
sDom: 'rt<"dataTables_bottom cf"pl>', // Move the components around
sPaginationType: "22touch", // Custom pagination HTML
oLanguage: { // Change some language stuff
"sLengthMenu": "_MENU_",
"sZeroRecords": "No Contacts found",
"sInfo": "Showing _START_ to _END_ of _TOTAL_ records",
"sInfoEmpty": "Showing 0 to 0 of 0 records",
"sInfoFiltered": "(filtered from _MAX_ total records)"
},
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "/utils/server",
"bStateSave": false,
"bDeferRender": true,
"aoColumns": [
{
sClass: 'check-box',
"bSortable": false,
mRender: function ( data, type, row ) {
return '';
}
},
{
sClass: 'name',
mData: 'title',
mRender: function ( data, type, row ) {
return ''+data+'';
}
},
{
sClass: 'company',
mData: 'contact_company'
},
{
sClass: 'email',
mData: 'contact_email',
mRender: function ( data, type, row ) {
return ''+data+'';
}
},
{
sClass: 'phone',
mData: 'contact_mobile'
},
{
sClass: 'list',
sWidth: '100px',
mData: 'contact_list_designation',
mRender: function ( data, type, row ) {
return ''+
'A'+
'B'+
'C'+
'D'+
'';
}
}
],
"aoColumnDefs": [
{
// Add the 'title' attribute to all cells. Since this is applied
// equally to all columns, for their defined data property, we
// can use aTargets and just do it once.
aTargets: ['_all'],
fnCreatedCell: function ( td, data, row, rowIdx, colIdx ) {
td.title = data;
}
}
]
});
contactTable.on( 'processing', function ( e, o, processing ) {
if (processing) $('.active_processes').show();
else $('.active_processes').hide();
if (!processing){
$('tbody td').each(function(){
if ($(this).hasClass('list')) $(this).removeAttr('title');
else $(this).attr('title', $(this).text());
});
}
});
[/code]
This discussion has been closed.
Replies
I'm a little touch confused I'm afraid. I'm not sure what your actual question is? Is it how to speed things up? I'm not sure why you are adding the title attributes to cells on line 67 and then removing that same attribute on line 79 (or indeed setting is again on line 80).
Allan