draw() is not working for my site

chankl78

I have been trying to convert my data table from version 1.9.4 to 1.10. But I have face problem with draw(). The record can be updated to database. But, it does not reload itself after update or creation of record.

Can someone help me on this?

Below is my link & code.
http://worldsoftstaging1.worldsoftllp.com/public/Common/StaffListing

This is my javascript for first load, updating of row & create a new row

$(document).ready(function () {
            $(function() {
                var oTable = $('#tdefault').DataTable({
                    "displayLength": 10, // Default No of Records per page on 1st load
                    "lengthMenu": [[10, 25, 50, 100], [10, 25, 50, 100]], // Set no of records in per page
                    "pagingType": "full_numbers",
                    "responsive": true,
                    "processing": true,
                    "stateSave": true, // Remember paging & filters
                    "autoWidth": true,
                    "scrollCollapse": true,
                    "processing": false,
                    "serverSide": true,
                    "searching": true,
                    "order": [[ 0, "desc" ]],
                    "ajax": $.fn.dataTable.pipeline({
                        url: 'getStaffListing',
                        pages: 5 // number of pages to cache
                    }),
                    "aoColumnDefs": [
                    {
                        "targets": [ 0 ], "data": "created_at", "width": "200px", "searchable": "true",
                        "render": function ( data, type, full ){
                            return moment(data).format("DD-MMM-YYYY HH:mm:ss");
                        }
                    },
                    {
                        "targets": [ 1 ], "data": "name", "searchable": "true"
                    },
                    {
                        "targets": [ 2 ], "data": "department", "searchable": "true"
                    },
                    {
                        "targets": [ 3 ], "data": "position", "searchable": "true"
                    },
                    {
                        "targets": [ 4 ], "data": "teloffice", "searchable": "true"
                    },
                    {
                        "aTargets": [ 5 ], "data": "id",
                        "mRender": function ( data, type, full ){
                            return '<button type="submit" onClick=editrow('+ data +') class="btn btn-xs btn-info"><i class="fa fa-edit bigger-120"></i></button> <button type="submit" onClick=deleterow('+ data +') class="btn btn-xs btn-danger"><i class="fa fa-trash-o bigger-120"></i></button>'
                        }
                    }]
                });
            });

            $('#fStaffAdd').submit(function(e){
                noty({
                    layout: 'topRight', type: 'warning', text: 'Creating Record ...',
                    animation: { open: {height: 'toggle'}, close: {height: 'toggle'}, easing: 'swing', speed: 500 },
                    timeout: 4000
                });
                $.ajax({
                    url: 'postStaff',
                    type: 'POST',
                    data: { position: $("#position").val(), department: $("#department").val(), teloffice: $("#teloffice").val(), name: $("#name").val() },
                    dataType: 'json',
                    statusCode: { 
                        200:function(){
                            var oTable = $('#tdefault').DataTable();
                            oTable.ajax.reload();
                            $("#name").val('');
                            $("#teloffice").val('');
                            noty({
                                layout: 'topRight', type: 'success', text: 'Record Created!!',
                                animation: { open: {height: 'toggle'}, close: {height: 'toggle'}, easing: 'swing', speed: 500 
                                    },
                                timeout: 4000
                            }); 
                        },
                        400:function(data){ 
                            var txtMessage;
                            if (data.responseJSON.ErrType == "Duplicate") 
                                { txtMessage = 'Record already existed!'; }
                            else if (data.responseJSON.ErrType == "Failed")
                                { txtMessage = 'Please check your entry!'; }
                            else if (data.responseJSON.ErrType == "No Value")
                                { txtMessage = 'Please check your entry!'; }
                            else { txtMessage = 'Please check your entry!'; }
                            $("#name").focus();
                            noty({
                                layout: 'topRight', type: 'error', text: txtMessage,
                                animation: { open: {height: 'toggle'}, close: {height: 'toggle'}, easing: 'swing', speed: 500 
                                    },
                                timeout: 4000
                            });
                        }
                    }
                });
                e.preventDefault();
            });

            $('#resourceupdate').submit(function(e){
                noty({
                    layout: 'topRight', type: 'warning', text: 'Updating Record ...',
                    animation: { open: {height: 'toggle'}, close: {height: 'toggle'}, easing: 'swing', speed: 500 },
                    timeout: 4000
                });
                $.ajax({
                    url: 'putStaff',
                    type: 'POST',
                    data: { ename: $("#ename").val(), id: $("#id").val(), eteloffice: $("#eteloffice").val() , eposition: $("#eposition").val(), edepartment: $("#edepartment").val() },
                    dataType: 'json',
                    statusCode: { 
                        200:function(){
                            var oTable = $('#tdefault').DataTable();
                            oTable.draw();
                            $("#ename").val('');
                            $("#eteloffice").val('');
                            $("#id").val('');
                            noty({
                                layout: 'topRight', type: 'success', text: 'Record Updated!!',
                                animation: { open: {height: 'toggle'}, close: {height: 'toggle'}, easing: 'swing', speed: 500 
                                    },
                                timeout: 4000
                            });
                            $("#resourceedit").modal('hide');
                        },
                        400:function(data){ 
                            var txtMessage;
                            if (data.responseJSON.ErrType == "Duplicate") 
                                { txtMessage = 'Record already existed!'; }
                            else if (data.responseJSON.ErrType == "Failed")
                                { txtMessage = 'Please check your entry!'; }
                            else if (data.responseJSON.ErrType == "No Value")
                                { txtMessage = 'Please check your entry!'; }
                            else { txtMessage = 'Please check your entry!'; }
                            $("#ename").focus();
                            noty({
                                layout: 'topRight', type: 'error', text: txtMessage,
                                animation: { open: {height: 'toggle'}, close: {height: 'toggle'}, easing: 'swing', speed: 500 
                                    },
                                timeout: 4000
                            }); 
                        }
                    }
                });
                e.preventDefault();
            });
        });

allan

"ajax": $.fn.dataTable.pipeline

That is the problem. You are using cached data on the client-side, so you need to clear the cache.

The pipeline example on this site adds a clearPipeline() method to the DataTables API which you can use to clear the pipeline. Have a look at the example and specific the code at line 107 in the "JS" tab below the table.

Allan

chankl78

Thank you so much!!

Did not read until the end of the example when I start working on pipeline. So I have missed that out. Sorry for the trouble.

Thanks.!!

Smile
chankl78