Redraw Datatables after action

Question

Im having problems getting my datatable to refresh. I have a button which calls an update script and a confirmation message before it does anything. This all works fine but, I would like the table to refresh to get the new results. Here is what I have so far.

function unapprove_link(data)
{
    var str = $(this).attr('title');
    var answer = confirm("Are you sure you want to UNAPPROVE this lead?");
    if (!answer) return false;
    $.post("actions/unapprove-lead.php",
    {'lead_id': data},
        function()
        {
            oTable.fnClearTable(0);
            oTable.fnDraw();
        }
);

}

Here is my full code:

            $(document).ready(function()
              {
        /*      // Unapprove Lead Alert
                $('.unapprove').live('click', function() {
                var str = $(this).attr('title');
                var answer = confirm("Are you sure you want to UNAPPROVE this lead?");
                oTable.fnDraw();
                if (!answer) return false;
                });
                // Delete Lead Alert
                $('.delete').live('click', function() {
                var str = $(this).attr('title');
                var answer = confirm("Are you sure you want to DELETE this lead?");
                oTable.fnDraw();
                if (!answer) return false;
                });
        */
                var anOpen = [];
                var oTable = $('#example').dataTable
                ({
                      'bProcessing': true,
                      'aaSorting': [[1,'asc']], // sorts date by default.
                      'iDisplayLength': 10,
                      'bJQueryUI': true,
                      'bStateSave': true,
                      'bServerSide': true,
                      'sAjaxSource': 'ajax/pc-ajax-table.php',
                      'fnServerData': function(sSource, aoData, fnCallback)
                  {

                      aoData.push( { "name": "from_date", "value": $( "#from" ).val() },
                                   { "name": "to_date", "value": $( "#to" ).val() } );
                    $.ajax
                        ({
                          'dataType': 'json',
                          'type'    : 'POST',
                          'url'     : sSource,
                          'data'    : aoData,
                          'success' : fnCallback
                        });
                  },
                       'aoColumns':[
                      {"bVisible": false, "bSortable": false, "bSearchable": true}, 
                      {"fnRender": format_ddmmyyyy}, // renders the date as dd/mm/yyyy
                      null,  // name
                      null,  // lead location
                      null, // course type
                      {"bVisible": false, "bSortable": false, "bSearchable": true},
                      {"bVisible": false, "bSortable": false, "bSearchable": true},
                      {"bVisible": false, "bSortable": false, "bSearchable": true},
                      {"bVisible": false, "bSortable": false, "bSearchable": true},
                      null,
                      null,
                      {"sClass": "control", "bSortable": false, "bSearchable": false},
                      {"bSortable": false, "bSearchable": false},
                      {"bSortable": false, "bSearchable": false}]
                });
                // for adding a details box
            $('#example td.control').live( 'click', function () {
              var nTr = this.parentNode;
              var i = $.inArray( nTr, anOpen );

              if ( i === -1 ) {
                $('img', this).attr( 'src', "../images/details_close.png" );
                var nDetailsRow = oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
                $('div.innerDetails', nDetailsRow).slideDown();
                anOpen.push( nTr );
              }
              else {
                $('img', this).attr( 'src', "../images/details_open.png" );
                $('div.innerDetails', $(nTr).next()[0]).slideUp( function () {
                  oTable.fnClose( nTr );
                  anOpen.splice( i, 1 );
                } );
              }
            } );

            function fnFormatDetails( oTable, nTr )
            {
              var oData = oTable.fnGetData( nTr );
              var sOut =
                '<div class="innerDetails">'+   
                '<div style="padding:6px; background-color:#FFF;">Enquiry: <span style="color:#2663A4;">'+oData[8]+'</span></div>'+
                '<div style="padding:6px; background-color:#FFF;">Email: <span style="color:#2663A4;">'+oData[5]+'</span></div>'+
                '<div style="padding:6px; background-color:#FFF;">Phone: <span style="color:#2663A4;">'+oData[6]+'</span></div>'+
                '<div style="padding:6px; background-color:#FFF;">IP Address: <span style="color:#2663A4;">'+oData[7]+'</span></div>'+
                '<div style="padding:6px; background-color:#FFF;">Lead ID: <span style="color:#2663A4;">'+oData[0]+'</span></div>'+
                '<div style="height:6px;"></div>'+      
                '<div class="light-blue-underline-main" style="margin:0px;"></div>'+
                '<div style="height:6px;"></div>'+      
                '</div>';
              return sOut;
            }
            // For clicking and selecting the date ranges
            $("button").button().click(function() {
                oTable.fnDraw();
              });
            var dates = $( "#from, #to" ).datepicker({
              defaultDate: "+1w",
              changeMonth: true,
              changeYear: true,
              dateFormat: 'dd/mm/yy',
              onSelect: function( selectedDate ) {
                var option = this.id == "from" ? "minDate" : "maxDate",
                  instance = $( this ).data( "datepicker" ),
                  date = $.datepicker.parseDate(
                    instance.settings.dateFormat ||
                    $.datepicker._defaults.dateFormat,
                    selectedDate, instance.settings );
                dates.not( this ).datepicker( "option", option, date );
              }
            });
        });
        // Take date from mysql, formatted yyyy-mm-dd, and return as dd/mm/yyyy
        function format_ddmmyyyy(oObj) {
          var sValue = oObj.aData[oObj.iDataColumn]; 
          var aDate = sValue.split('-');
          return aDate[2] + "/" + aDate[1] + "/" + aDate[0];
        }

        // Highlight Rows
        $("tbody tr").live("mouseover", function(){
            $(this).children().addClass("highlighted");
        });
        $("tbody tr").live("mouseout", function(){
            $(this).children().removeClass("highlighted");
        });
        // Actions for Unapprove button
        function unapprove_link(data)
            {
                var str = $(this).attr('title');
                var answer = confirm("Are you sure you want to UNAPPROVE this lead?");
                if (!answer) return false;
                $.post("actions/unapprove-lead.php",
                {"lead_id": data},
                    function(data)
                    {
                     oTable.fnDraw();
                    }
            );

        }
        /*// Actions for Delete button
        function delete_link(data)
            {
                $.post("actions/delete-lead.php",
                {'lead_id': data},
                    function(data)
                    {
                    oTable.fnDraw();
                    }
            );

        }
        */

Answer 1

Calling oTable.fnDraw() will cause the refresh for sure. You are doing $.post, I would change it to .$ajax, also, you don't seem to be doing anything with the data returned from the post operation. Remember, DataTable expects an oData object somewhere in the response if you expect it to rebind the data.

In fact, datatable expects a lot more, you need to return the number of items in total, the number being displayed on the page, etc.