how to re-initialize the datatable

pv619

Hi,

First of all this a great piece of kit so thanks for that. I've been stuck for almost three days now with this re-initialize error message. I almost tired everything to recifity this error from here and from Google but it doesn't seemed to go away. i.e. fnDestroy, bDestory, bRetrive, fnDraw and none of these worked. Could you please help me out as to what I may be doing wrong?

I am trying to re-load the data based on dates filters using jQuery i.e. by All, Week, Month, Year and From - To.

Here's my jQuery code for your inspection:
The Table jQuery:

$(document).ready(function () {

    if (typeof oTable == 'undefined') {

        var oTable = $('#myDataTable').dataTable({

            "bServerSide": true,
            "sAjaxSource": "AjaxHandler",
            "bProcessing": true,
            "sScrollY": "270",
            "bPaginate": true,
            "bRetrieve": true,
            "bDestroy": true,
            "sPaginationType": "full_numbers",
            "iDisplayLength": 150,
            "aoColumns": [
        { "mData": "TrackID" },
        {
            "mData": "Date", "bSortable": false,
            "fnRender": function (obj, val) {
                var dx = new Date(parseInt(val.substr(6)));
                var dd = dx.getDate();
                var mm = dx.getMonth() + 1;
                var yy = dx.getFullYear();

                if (dd <= 9) {
                    dd = "0" + dd;
                }
                if (mm <= 9) {
                    mm = "0" + mm;
                }
                return dd + "/" + mm + "/" + yy;
            }
        },
        { "mData": "TrackName" },
        { "mData": "ArtistName" },
        { "mData": "Times" }
            ]
        });
    }
    else {
        dataTable.fnDraw();
    }

The Dates filter jQuery:

    // All
    /////////////////////////////////////////////////////////////////////////////////////////////////////////////

    var todayDate = new Date();
    var endDate = todayDate.getDate() + '/' + (todayDate.getMonth() + 1) + '/' + (todayDate.getFullYear() + 100);
    var d = new Date();
    var st = d.setDate(todayDate.getDate() - 111365);
    var startDate = d.getDate() + '/' + (d.getMonth() + 1) + '/' + d.getFullYear();
    $('#allrecordsstart-venue').val(startDate);
    $('#allrecordsend-venue').val(endDate);
    $('#myDataTable').dataTable('load', {
        StartDate: startDate,
        EndDate: endDate
    });

    $('#allrecords-venue').click(function (e) {
        e.preventDefault();
        var startDate = $('#allrecordsstart-venue').val();
        var endDate = $('#allrecordsend-venue').val();

        $('#myDataTable').show(0).delay(0).fadeIn(1000).dataTable('load', {
            StartDate: startDate,
            EndDate: endDate

        });
    });

    /////////////////////////////////////////////////////////////////////////////////////////////////////

    // Week
    /////////////////////////////////////////////////////////////////////////////////////////////////////

    ...

    /////////////////////////////////////////////////////////////////////////////////////////////////////

    // Month
    /////////////////////////////////////////////////////////////////////////////////////////////////////

    ...

    /////////////////////////////////////////////////////////////////////////////////////////////////////

    // Year
    /////////////////////////////////////////////////////////////////////////////////////////////////////

    ...

    /////////////////////////////////////////////////////////////////////////////////////////////////////

    // Search Records
    /////////////////////////////////////////////////////////////////////////////////////////////////////

    var todayDate = new Date();
    var endDate = todayDate.getDate() + '/' + (todayDate.getMonth() + 1) + '/' + todayDate.getFullYear();
    var d = new Date();
    var st = d.setDate(todayDate.getDate() - 75);
    var startDate = d.getDate() + '/' + (d.getMonth() + 1) + '/' + d.getFullYear();
    $('#startdateadmin-venue').val(startDate);
    $('#enddateadmin-venue').val(endDate);

    $('#filterStyle-venue').click(function () {
        $("#AdvancedfilterForm-venue").slideToggle(500);
    });

    $(function () {
        $("#startdateadmin-venue").datepicker({
            dateFormat: 'dd/mm/yy',
            changeMonth: true,
            changeYear: true
        });
    });

    $(function () {
        $("#enddateadmin-venue").datepicker({
            dateFormat: 'dd/mm/yy',
            changeMonth: true,
            changeYear: true
        });
    });

    $('#searchrecord-venue').click(function (e) {
        e.preventDefault();
        var startDate = $('#startdateadmin-venue').val();
        var endDate = $('#enddateadmin-venue').val();

        $('#myDataTable').show(0).delay(0).fadeIn(1000).dataTable('load', {
            StartDate: startDate,
            EndDate: endDate

        });
    });

    /////////////////////////////////////////////////////////////////////////////////////////////////////

})

The Table itself:

<table id="myDataTable" class="display">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Date</th>
                        <th>Track Name</th>
                        <th>Artist Name</th>
                        <th>Times</th>
                    </tr>
                </thead>
                <tbody> 
                </tbody>
</table>

Sorry for the long code, but the dates one is mostly repeated.. Thanks in advance :)

pv619

anyone please? Allan? Some suggestion please??

allan

Can you link to a page (use JSFiddle or live.datatables.net if you can't host the page) showing the problem - as required in the forum rules.

Thanks,
Allan

pv619

Hi, Thanks Allan for getting back. Sorry that I missed the forum posting requirements.

Here's the link to live.datatables.net <a href="http://live.datatables.net/yomagoq/2/edit">Link</a>

I am using ASP.NET server-side data so the datatable is empty.

i get 'initializing error' when I hit the date link, which reloads the dataTable.

thanks again Allan :)

allan

I would need an actual working test case that shows the problem (unless that one does and I'm missing it? Clicking a date link just reloads the page).

Allan

pv619

Thanks Allan,

I am doing server-side so JSFiddle wouldn't let me do that.

Yes when you hit the dates (links), it repopulates the data on the dataTable and hence for this reason I get 'initialization error message'. Is there a way to stop this alert? thanks again :)

allan

I'm afraid I don't see that error message. The page just reloads for me when I click one of the links.

However, tech note 3 has a description of the error you note.

Allan

pv619

Thanks for that Allan, I'll look in to it :)

Just a quick similar question to this, is there any way to filter records by week, month and year in the datatable? Thanks again :)