jQuery Ajax to DataTables Ajax

WebCodex

Hi, I'm looking to convert my jQuery ajax table code to dataTables so I can use things like reload etc

Im stuck on how I would send the variables (the POST data) to the controller to get the data for the table back.

My current code:

$(document).ready(function() {
    var token = '<?php echo json_encode($token); ?>';
    var getUserComments = true;
    var usereid = '<?php echo $_SESSION['exid']; ?>';
    // Get Data from Database and Populate the DataTable
    $.ajax({
        url: 'controllers/recipeControl.php',
        method: 'post',
        dataType: 'json',
        data: { getUserComments: getUserComments, usereid: usereid, token: token },
        success: function(data) {
            var table = $('#datatable').dataTable({
                order: [[ 2, "desc" ]],
                responsive: true,
                data: data,
                select: false,
                "columnDefs": [
                    { "orderable": false, "targets": 3 }
                ],
                columns: [
                    
                    { 'data': 'recipe_comment_recipe_name', 
                        "render": function ( data, type, row, meta ) {
                            if(row.batch_recipe_url === '') {
                                recipeLink = data;
                            }
                            else {
                                recipeLink = "<a href='recipe/" + row.recipe_comment_recipe_id + "'>" + data + '</a>';
                            }
                            return recipeLink;
                        },
                    },
                    { 'data': 'recipe_comment', 
                        "render": function ( data, type, row, meta ) {
                            return data;
                        },
                    },
                    { 'data': 'recipe_comment_date', 
                        "render": function ( data, type, row, meta ) {
                            if (type == "sort" || type == 'type')
                                return data;
                                // Create date from input value
                                var inputDate = new Date(data);

                                
                                // Get today's date
                                var todaysDate = new Date();
                                //var date = (moment(data).format("ddd DD/MM/YYYY HH:mm:ss"));
                                // call setHours to take the time out of the comparison
                                if(inputDate.setHours(0,0,0,0) == todaysDate.setHours(0,0,0,0)) {
                                    var d = new Date(data);
                                    var hour = d.getHours();
                                    var minute = ('0'+d.getMinutes()).slice(-2);
                                    return 'Today ' + hour +':'+ minute;
                                }else {
                                    return (moment(data).format("ddd DD/MM/YYYY HH:mm:ss"));
                                }
                        }
                    },  
                    { 'data': 'actions',
                        "render": function ( data, type, row, meta ) {
                            return "<button type='button' class='btn btn-primary recipeCommentEdit' href='#'>Edit</button><button class='btn btn-primary delete' type='button'>Delete</button>";
                        }
                    }],
            });
        }
    })
})

WebCodex

Ok, I'm a bit closer but now I get a TypeError: f is undefined error,

var table = $('#datatable').dataTable({
                "ajax": {
                    'type': 'POST',
                    'url': 'controllers/flavourControl.php',
                    'data': {
                       getUserFlavourComments: getUserFlavourComments, exid: exid, token: token
                    },
                },
                order: [[ 2, "desc" ]],
                responsive: true,
                select: false,
                "columnDefs": [
                    { "orderable": false, "targets": 3 }
                ],
                columns: [
                    
                    { 'data': 'flavour_comment_flavour_name', 
                        "render": function ( data, type, row, meta ) {
                            if(row.batch_recipe_url === '') {
                                flavourLink = data;
                            }
                            else {
                                flavourLink = "<a href='flavour/" + row.flavour_comment_flavourcompany + "/" + data + "'>" + data + '</a>';
                            }
                            return flavourLink;
                        },
                    },
                    { 'data': 'flavour_comment_comment', 
                        "render": function ( data, type, row, meta ) {
                            return data;
                        },
                    },
                    { 'data': 'flavour_comment_date', 
                        "render": function ( data, type, row, meta ) {
                            if (type == "sort" || type == 'type')
                                return data;
                                // Create date from input value
                                var inputDate = new Date(data);

                                
                                // Get today's date
                                var todaysDate = new Date();
                                //var date = (moment(data).format("ddd DD/MM/YYYY HH:mm:ss"));
                                // call setHours to take the time out of the comparison
                                if(inputDate.setHours(0,0,0,0) == todaysDate.setHours(0,0,0,0)) {
                                    var d = new Date(data);
                                    var hour = d.getHours();
                                    var minute = ('0'+d.getMinutes()).slice(-2);
                                    return 'Today ' + hour +':'+ minute;
                                }else {
                                    return (moment(data).format("ddd DD/MM/YYYY HH:mm:ss"));
                                }
                        }
                    },  
                    { 'data': 'actions',
                        "render": function ( data, type, row, meta ) {
                            return "<button type='button' class='btn btn-primary flavourCommentEdit' href='#'>Edit</button><button class='btn btn-primary delete' type='button'>Delete</button>";
                        }
                    }],
            //});
        //}
    })

WebCodex

The Ajax response:

[{"flavour_comment_id":23,"flavour_comment_flavour_id":1205,"flavour_comment_flavour_name":"Vanilla Custard","flavour_comment_flavourcompany":"Capella","flavour_comment_comment":"Delicious Custard","flavour_comment_userid":1,"flavour_comment_url":"https:\/\/www.chefsflavours.co.uk\/capella-concentrates\/1866-vanilla-custard.html?search_query=vanilla+custard&results=19","flavour_comment_user":"Grubby","flavour_comment_avatar":"https:\/\/vapingcommunity.co.uk\/uploads\/default\/original\/2X\/9\/9d5f0f655b439aef5e31408c9bdeb0cf41bab72d.jpg","flavour_comment_date":"2018-06-13 09:09:59"},{"flavour_comment_id":34,"flavour_comment_flavour_id":9085,"flavour_comment_flavour_name":"Graham Cracker Clear","flavour_comment_flavourcompany":"The Perfumers Apprentice","flavour_comment_comment":"Delicious caramel ","flavour_comment_userid":1,"flavour_comment_url":"none","flavour_comment_user":"Grubby","flavour_comment_avatar":"https:\/\/vapingcommunity.co.uk\/uploads\/default\/original\/2X\/9\/9d5f0f655b439aef5e31408c9bdeb0cf41bab72d.jpg","flavour_comment_date":"2018-06-13 12:08:31"}]

kthorngren

That error is found in this post:
https://datatables.net/forums/discussion/43245

Maybe you need to place dataType: 'json', in your ajax option?

Kevin

WebCodex

Fixed it.. Thanks!

var table = $('#datatable').dataTable({
                "ajax": {
                    "dataSrc": "",
                    'type': 'POST',
                    'dataType': 'json',
                    'url': 'controllers/flavourControl.php',
                    'data': {
                       getUserFlavourComments: getUserFlavourComments, exid: exid, token: token
                    },
                },