Refresh Table with Post and Ajax

baeckerman83

Hi!
I try to refesh my table with ajax. With get all works fine, but if I use POST I can't change the values put to the ajax script. But I have to use POST, with get the URL is to long.
ajax.data() doesn't work. What is wrong with my code?

Here is my code:

table.ajax.url(url+"?aja=1&wch=tbl&").load();

var table=$('#showsTable').DataTable({
        "language": {
                    "sEmptyTable":      "Keine Daten in der Tabelle vorhanden",
                    "sInfo":            "_START_ bis _END_ von _TOTAL_ Einträgen",
                    "sInfoEmpty":       "0 bis 0 von 0 Einträgen",
                    "sInfoFiltered":    "(gefiltert von _MAX_ Einträgen)",
                    "sInfoPostFix":     "",
                    "sInfoThousands":   ".",
                    "sLengthMenu":      "_MENU_ Einträge anzeigen",
                    "sLoadingRecords":  "Wird geladen...",
                    "sProcessing":      "Bitte warten...",
                    "sSearch":          "Suchen",
                    "sZeroRecords":     "Keine Einträge vorhanden.",
                    "oPaginate": {
                        "sFirst":       "Erste",
                        "sPrevious":    "Zurück",
                        "sNext":        "Nächste",
                        "sLast":        "Letzte"
                    },
                    "oAria": {
                        "sSortAscending":  ": aktivieren, um Spalte aufsteigend zu sortieren",
                        "sSortDescending": ": aktivieren, um Spalte absteigend zu sortieren"
                    }
                },
        "order": [ [1,'asc'], [0,'asc'] ],
        "ajax": {   "url":"http://localhost/index.php?aja=1&wch=tbl",
                    "dataSrc": "",
                    "type":"POST",
                    "data":values
                },
        "columns": [
            { "data": "n" },
            { "data": "s" },
            { "data": "e" },
            { "data": "t" },
            { "data": "g" },
            { "data": "f" }
        ],        
        "lengthMenu": [ [10, 25, 50, 100, 200, -1], [10, 25, 50, 100, 200, "Alle"] ],
        "pageLength": 25,
        "searching":true,
        "columnDefs": [ { "orderable": false, "targets": 2 },  
                        { "orderable": false, "targets": 5 }]
                
    } );

ignignokt

Try making this change:

ajax: {   "url":"http://localhost/index.php?aja=1&wch=tbl",
    dataSrc: "",
    type:"POST",
    data: function(d){
        d.values = values;
    }
}

baeckerman83

Sorry but it doesn't work, the value is always the same.
I set the variable with values={"genre[]": $("#bb_genre_6").val()};

And then I change the value in the html code.

edit:
I now understand your solution after finding https://datatables.net/forums/discussion/21940/how-to-pass-new-post-parameters-on-ajax-reload#Comment_68316

But it didn't work. So there must be something else wrong.
Now I have:

        "ajax": {   "url":"http://localhost/index.php?aja=1&wch=tbl",
                    "dataSrc": "",
                    "type":"POST",
                    "data":searchData()
                },

and

function searchData(){
    console.log("Ben");
    return { "genre[]": $("#bb_inputtest").val()};
}

I think that is the same as you recommended.

When I call table.ajax.url(url+"?aja=1&wch=tbl&").load(); the function searchData() is not used again, there is no Ben in the log output.

baeckerman83

Now it works.
"ajax": { "url":"http://localhost/kommt-sport/index.php?aja=1&wch=tbl",
"dataSrc": "",
"type":"POST",
"data":function(d){ return searchData(); }
},

Important is, that my own function is in the other function.

ignignokt

Glad you figured it out and thank you for posting your working solution. Hopefully what I said helped you get there faster.