refresh data after ajax request

blubblub

hi guys,
im trying to reload my data table after i send an ajax request to the server which creates me an html table return, that i want to put in the data table. This is not working well, i can see still all of my records even if i try searching for other parameters. The thing is, i got it work to see only the data i wanted but now i want to put only this data in my csv and excel files, but there are still all other records. hope u'll understand my problem here is my js-code. the json returned from the php script is right.

$('#suchButton').on('click', function (event) {

        $.ajax({
            url: 'suche.php',
            type: 'POST',
            data: $('#id_form_artikelsuche').serialize() + "&ac=ajax",
            success: function (result) {
                var parsed_result = JSON.parse(result);

                $('#dtBody').empty();
                $('#dtBody').html(parsed_result.table_return);
console.log(parsed_result.table_return);
                $('#varianten').html(parsed_result.count);
                $('#stueckmenge').html(parsed_result.kalk);
                $('#vkw').html(parsed_result.verkaufspreis +" €");
                $('#lw').html(parsed_result.einkaufspreis +" €");
                $('#vk').html(parsed_result.vk_new +" €");
                $('#ek').html(parsed_result.ek_new +" €");



                dataTable = $('#dataTable').DataTable({
                    paging: false,
                    searching: false,
                    // lengthMenu: [[10, 25, 50, 100, 250, "All"]],
                    //lengthMenu: [[10, 25, 50, 100, 250, -1], [10, 25, 50, 100, 250, "All"]],
                    pageLength: -1,
                    dom: 'lBfrtp',
                    buttons: [
                        'csv', 'excel', 'print'
                    ],
                    destroy: true,
                    retrieve: true,
                    language: {
                        // Liegt im AAS Verzeichnis
                        "url": "datatable_german.json"
                    }
                });

                dataTable.ajax.reload(null,false);

                //}

                //if(typeof parsed_result.table_return != 'undefined') {
                //   console.log(parsed_result);
                //

            },
            error: function (event) {
                console.log(event);
            }
        });

ive tried a lot with reload(), destroy(), clear(), draw() but all this seems not working.

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

Is one of those $().html() lines create then new HTML table?

Don't use both destroy and retrieve together (it doesn't make sense to destroy and retrieve at the same time!). Probably just destroy for the above.

Also don't use ajax.reload() if you aren't specifying the DataTables ajax option.

Allan

blubblub

ok ive already realised that i only should use the destroy method. The $().html() lines create only elements for a div, this is working. I tried a bit more and was sure it is working with that code, but it also did not.
[code]
var dataTable = $('#dataTable').DataTable();

$('#suchButton').on('click', function (event) {

    dataTable.destroy();

    $.ajax({
        url: 'suche.php',
        type: 'POST',
        data: $('#id_form_artikelsuche').serialize() + "&ac=ajax",
        success: function (result) {
            var parsed_result = JSON.parse(result);

            $('#dtBody').empty();
            $('#dtBody').html(parsed_result.table_return);
            console.log(parsed_result.table_return);
            $('#varianten').html(parsed_result.count);
            $('#stueckmenge').html(parsed_result.kalk);
            $('#vkw').html(parsed_result.verkaufspreis +" €");
            $('#lw').html(parsed_result.einkaufspreis +" €");
            $('#vk').html(parsed_result.vk_new +" €");
            $('#ek').html(parsed_result.ek_new +" €");

            //$('#dataTable').DataTable().fnDestroy();

            dataTable = $('#dataTable').DataTable({
                paging: false,
                searching: false,
                pageLength: -1,
                dom: 'lBfrtp',
                buttons: [
                    'csv', 'excel', 'print'
                ],
                destroy: true,
                language: {
                    // Liegt im AAS Verzeichnis
                    "url": "datatable_german.json"
                }
            });

        },
        error: function (event) {
            console.log(event);
        }
    });

});

[/code]

Dont know how to rewrite this i trying it for the whole day now, but it doesnt work,
ty for your answer

allan

The $().html() lines create only elements for a div

So where it that data for the table coming from?

If you can link to the page that would be useful.

Allan