Ajax call is not being executed on second event

luisD

Hi, I do a search of records with ajax, sending date and retreiving records between the selected date, It works fine, but if I change the date and click search again, Ajax call is not being executed, so data doesn't change. The code is the following :

$("#dateselected").click(function () {
    var to = $("#to");
    var toValue = to.val();
    var from = $("#from");
    var fromValue = from.val();
    var Controller = $(".tempdata").prop("id");

   var table = $('#datatable_fixed_column').DataTable({            
        retrieve: true,

        "ajax": {
            type: 'POST',
            url: '/Order/GetOrdersByDate',
            dataType: 'json',
            data: { from: fromValue, to: toValue, controller: Controller },
            dataSrc: function (json){
            json.data;
            }

        },
        "columnDefs": [
            {
                "targets": [0],
                "visible": false,
                "searchable": false
            }
        ],
        "columns": [
            { "data": "OrderId" },
            { "data": "Number" },
            { "data": "Date" },
            { "data": "Status" },
            { "data": "UserReqId" },
            { "data": "AddedOn" },
            { "data": "UpdateOn" },
            { "defaultContent": "<a href='#' id = 'Update' >Update</a> }
        ]

    });

    var responsiveHelper_dt_basic = undefined;
    var responsiveHelper_datatable_fixed_column = undefined;
    var responsiveHelper_datatable_col_reorder = undefined;
    var responsiveHelper_datatable_tabletools = undefined;

    var breakpointDefinition = {
        tablet: 1024,
        phone: 480
    };

         var otable = $('#datatable_fixed_column').DataTable({
        retrieve: true,

        "sDom": "<'dt-toolbar'<'col-xs-12 col-sm-6 hidden-xs'f><'col-sm-6 col-xs-12 hidden-xs'<'toolbar'>>r>" +
        "t" +
        "<'dt-toolbar-footer'<'col-sm-6 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-6'p>>",
        "autoWidth": true,
        "preDrawCallback": function () {
            // Initialize the responsive datatables helper once.
            if (!responsiveHelper_datatable_fixed_column) {
                responsiveHelper_datatable_fixed_column = new ResponsiveDatatablesHelper($('#datatable_fixed_column'), breakpointDefinition);
            }
        },
        "rowCallback": function (nRow) {
            responsiveHelper_datatable_fixed_column.createExpandIcon(nRow);
        },
        "drawCallback": function (oSettings) {
            responsiveHelper_datatable_fixed_column.respond();
        }
    });
    // Apply the filter
    $("#datatable_fixed_column thead th input[type=text]").on('keyup change', function () {

        otable
            .column($(this).parent().index() + ':visible')
            .search(this.value)
            .draw();

    });

}); ////On button clicked
});

Bindrid2

Once a table a DataTable is created, you cannot recreate it without first destroying it.

It looks like you are trying to create a new instance of DataTable with each click without destroying the existing one.

Check your console for errors.

luisD

Yes, you are rigth, I just used:

$('#datatable_fixed_column').DataTable().data().clear(); $('#datatable_fixed_column').DataTable().table().destroy();

before initializing and it worked

Bindrid2

@luisD you can test for that (if you aren't)

if($.fn.dataTable.isDataTable('#datatable_fixed_column')){
    $('#datatable_fixed_column').DataTable().data().clear(); 
     $('#datatable_fixed_column').DataTable().table().destroy();
}