SOLVED: Starting with empty table?
SOLVED: Starting with empty table?
Hi all.
I'm using the great tolls for nearly 0.5 years now and now I do have a big problem.
I want to schow a page with datatable inside. The resultset of my ajax-call (table-init) is more than 900,000 rows with around 70 columns.
The request takes around 60 seconds before I can see the completed table.
This is why I want to display an empty table with all columns, tabletools etc. on pageload. The data shall be requested after clicking on a search-button and (maybe) a message that the request can take a longer time.
Question: How can I prevent datatable from execute the ajax-request on page-load?
Question: How can I execute the request after clicking a search-button?
Thanks for all your help in advance.
I'm using the great tolls for nearly 0.5 years now and now I do have a big problem.
I want to schow a page with datatable inside. The resultset of my ajax-call (table-init) is more than 900,000 rows with around 70 columns.
The request takes around 60 seconds before I can see the completed table.
This is why I want to display an empty table with all columns, tabletools etc. on pageload. The data shall be requested after clicking on a search-button and (maybe) a message that the request can take a longer time.
Question: How can I prevent datatable from execute the ajax-request on page-load?
Question: How can I execute the request after clicking a search-button?
Thanks for all your help in advance.
This discussion has been closed.
Replies
http://datatables.net/usage/server-side
http://datatables.net/release-datatables/examples/data_sources/server_side.html
If you want to start with an empty table you could use iDeferLoading - but I would really recommend server-side processing.
Allan
thank you for your answer but i'm still using server-side-processing like described here: http://www.modeltraintracker.com/sandbox/items.php
My problem is that the request is started on pageload. What I want to do is that the request is started on button-click after the user had a chance to give some filter criteria first.
So first the page loads with empty table, user fills one or more external filter-fields () and click "Search" afterwards.
Sorry for my bad english but I can't explain it better. :-(
If i'm using the $.ajax only i've the problem with the million of rows.
If I set the iDeferLoading like in the following code i get the error: [quote]DataTables warning (table id = 'tablemarkup5'): Requested unknown parameter '0' from the data source for row 0[/quote]
Can anyone help me please?
[code]
$(function(){
var oTable= $('#tablemarkup5');
oTable.dataTable({
"bRetrieve": false,
"bDestroy": false,
"bJQueryUI": true,
"bSortClasses": true,
"bSortCellsTop": true,
"iDisplayLength": 10,
"sPaginationType": "full_numbers",
"sDom": 'CRT<"clear spacer"><"H"lfrip>t<"F"lfrip><"clear spacer">T', //
"bProcessing": false,
"iDeferLoading": 50,
"bServerSide": true,
"sScrollX": "100%",
"sAjaxSource": "data.php",
"bAutoWidth": true,
"bScrollCollapse": true,
"bStateSave": false,
"oLanguage": {
"sSearch": "Search all columns:",
"sZeroRecords": "No records to display",
"sEmptyTable": "No data available in table"
},
"oTableTools": {
"sSwfPath": "../_TableTools-2.0.1/media/swf/copy_cvs_xls_pdf.swf",
"aButtons": [ { "sExtends": "copy", "mColumns": "visible" }, { "sExtends": "csv", "mColumns": "visible" }, { "sExtends": "print" } ]
},
"fnServerData": function( sUrl, aoData, fnCallback ) {
//aoData.push({"name":"sSearch_0", "value":$('#test_ci').val() });
$.ajax( { "url": sUrl, "type": "GET", "data": aoData, "success": fnCallback, "dataType": "json", "cache": true, "async": true } );
}
})
.columnFilter({ sPlaceHolder: "head:after"
})
});
[/code]
After hours and hours I solved my problem by myself.
This code-snipped let's the table stay empty on pageload:
[code]
"fnServerData": function( sUrl, aoData, fnCallback ) {
if(search==true) {
aoData.push({"name":"sSearch_0", "value":$('#test_ci').val() });
$.ajax( { "url": sUrl, "type": "GET", "data": aoData, "success": fnCallback, "dataType": "json", "cache": true, "async": true } );
}
//search=false;
}
[/code]
And with this additional function the table is filled:
[code]
$('#search').click( function () {
search = true;
oTable.fnDraw();
} );
[/code]
With this additional line (search=false) you can prevent from every keyup-search. The ajax will wait for clicking "Search" again:
[code]
"fnServerData": function( sUrl, aoData, fnCallback ) {
if(search==true) {
aoData.push({"name":"sSearch_0", "value":$('#test_ci').val() });
$.ajax( { "url": sUrl, "type": "GET", "data": aoData, "success": fnCallback, "dataType": "json", "cache": true, "async": true } );
}
search=false;
}
[/code]
Whole table incl. the column-filters are like the fnFilterOnReturn described here: http://datatables.net/plug-ins/api