Always get a script error for more than 1000 rows

Yurii

Hi, I'm getting this script Error when my table is larger than 1000 rows.

This is my configuration for the plugin

[code]
jQuery.fn.dataTableExt.oSort['string-case-asc'] = function(x,y) {
return ((x < y) ? -1 : ((x > y) ? 1 : 0));
};

jQuery.fn.dataTableExt.oSort['string-case-desc'] = function(x,y) {
return ((x < y) ? 1 : ((x > y) ? -1 : 0));
};

$(document).ready(function() {

$('.loader').hide();
$('.content').show();
var oTable = $('#tab_show').dataTable( {
"aaSorting": [ [0,'asc'] ],
} );

oTable.$('td').editable( 'edit.php', {
"callback": function( sValue, y ) {
var aPos = oTable.fnGetPosition( this );
oTable.fnUpdate( sValue, aPos[0], aPos[1] );
},
"submitdata": function ( value, settings ) {
return {
"row_id": this.parentNode.getAttribute('id'),
"column": oTable.fnGetPosition( this )[2]
};
},
"height": "20px"
} );
} );
[/code]

All works good till the oTable.$('td').editable() function is called. How should I work it out? I read that this plugin works good with thousands of rows, so I don't understand what's going wrong!!
I already tried to create a .txt file to read from with Deferred Render method, but oTable.$('td').editable() ( I guess) gives the same on jquery.js.


[code]
var oTable = $('#tab_show').dataTable( {
"aaSorting": [ [0,'asc'] ],
"sAjaxSource": "test.txt",
"bDeferRender": true
} );

oTable.$('td').editable( 'edit.php', {
"callback": function( sValue, y ) {
var aPos = oTable.fnGetPosition( this );
oTable.fnUpdate( sValue, aPos[0], aPos[1] );
},
"submitdata": function ( value, settings ) {
return {
"row_id": this.parentNode.getAttribute('id'),
"column": oTable.fnGetPosition( this )[2]
};
},
"height": "20px"
} );
[/code]

Help please!!

allan

What error? You say there is an error, but haven't told us what the error is? :-)

My guess is that it is related to the deferred rendering - try removing that and seeing if it works? You might need to use a 'live' version of jEditable (I'm not such if such a thing exists, but I'm sure the library could be altered to add that ability).

Allan

Yurii

I get the usual script error when a JS script takes too long to execute..
Like these:

http://datatables.net/forums/discussion/8714/script-error-while-loading-long-size-data/p1
http://www.datatables.net/forums/discussion/336/stop-running-script-message-in-browser/p1

Although I read those posts, I was not able to fix it..

Yurii

it all depends by dom.max_script_run_time that is set to 10. Editing this value would not be fair and I think it could be quite dangerous.

allan

Sounds like a performance issue with the Editable plug-in then - I would suggest adding an issue to that projects repository. I'm afraid I can't offer much help since I know very little about that 3rd party plug-in.

My guess is that it is running very every cell (which I think is how jEditable works), so that is going to be a performance hit. The best option would be a 'live' event, or doing it on-the-fly.

Allan

Yurii

Thank you Allan!!

Yurii

The only thing that I don't understand is: why does I'm not able to run DataTables' plugin on my table? It is only 8k rows long, and as far as I know, you tested it on even more rows tables.
I'm not trying to do an impossible thing.

dom.max_script_run_time is a configuration of each browser (for example on Firefox you can find it typing about:config in your url).

Is it possible that all people using DataTables have less than 1k rows??

allan

> Is it possible that all people using DataTables have less than 1k rows??

Heh - no. I've seen tables with many millions of records. However, you do need to consider what you are asking the browser to do. DataTables has two processing modes and multiple data source types which can help with processing speeds - this is what I generally recommend:

0-5000 rows - client-side processing, DOM source (although if IE6/7 are used, then the maximum might be 2000)
5000-50'000 rows - client-side processing with Ajax sourced data and deferred rendering enabled
50'000+ - server-side processing

You said specifically that the error only occurs when you enable the editable plug-in, leading me to believe that it is the addition of its event handlers while traversing the DOM that is the issue. However, without a demo page, its is impossible to say for sure.

Allan

Yurii

Ok, I fixed it up, and now it works VERY fast!!!
This is all my code:

[code]$(document).ready(function() {
/* Build the DataTable with third column using our custom sort functions */
var data;
$.get('makeTXT.php',{},function(){

var oTable = $('#tab_show').dataTable( {
"bProcessing": true,
"sAjaxSource": "test2.txt",
"aaSorting": [ [0,'asc'] ],
"aoColumnDefs": [
{ "sClass": "view", "aTargets": [ "_all" ] },
],
"sDom": '<"top"lpf>rt<"bottom"ip><"clear">'
} );
})

$('td.view').live('click',function(){
if($(this).parent().children().index($(this)) == 0) //my table had the id of the mysql data on that column, so I don't do anything when clicked
return false;
var self = $(this);
data = self.text();
var form = '';
self.html(form);
self.attr('class','edit');
$('input:last').focus();
$('input[name=valore]', form).focus();
});

$('input[name=valore]').live('blur',function(){
var self = $(this);
var cell = self.parent().parent();
cell.attr('class','view');
cell.html(data);
data = "";
})

$('#editForm').live('submit',function(e) {
e.preventDefault();
var self = $(this);
var cell = self.parent();
var id = cell.parent().find('td:first').text();
var col = cell.parent().children().index(cell);
var toSave = self.find('input[name=valore]').val();
cell.attr('class','view');
cell.html(toSave);
data = toSave;
$.get('edit.php',{id:id,col:col,data:toSave},function(r){
if(r)
alert(r);
else
$('input[name=valore]').blur();
});
return false;
});
} );
[/code]


I hope that this could help someone!
My last question is: how can I set the target of the search box? I don't understant how does it works!

Thanks