Always get a script error for more than 1000 rows
Always get a script error for more than 1000 rows
Yurii
Posts: 16Questions: 0Answers: 0
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!!
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!!
This discussion has been closed.
Replies
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
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..
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
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??
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
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