SOLVED: Starting with empty table?

SOLVED: Starting with empty table?

dreamerdreamer Posts: 8Questions: 0Answers: 0
edited March 2012 in General
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.

Replies

  • allanallan Posts: 63,542Questions: 1Answers: 10,476 Site admin
    With almost a million rows I would very much suggest you use server-side processing:
    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
  • dreamerdreamer Posts: 8Questions: 0Answers: 0
    Hi 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. :-(
  • dreamerdreamer Posts: 8Questions: 0Answers: 0
    Now i've tried the iDeferLoading and the $.ajax.
    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]
  • dreamerdreamer Posts: 8Questions: 0Answers: 0
    Hi all.

    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
This discussion has been closed.