动作后重新绘制数据表


Redraw Datatables after action

我有问题让我的数据表刷新。我有一个按钮,调用更新脚本和确认消息之前,它做任何事情。这一切都很好,但是,我希望表刷新以获得新的结果。以下是我到目前为止写的。

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();
        }
);
}
下面是我的完整代码:
            $(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();
                    }
            );
        }
        */

调用oTable.fnDraw()将导致刷新。你正在做$。post,我会把它改成。$ajax,您似乎没有对post操作返回的数据做任何事情。请记住,如果希望DataTable重新绑定数据,则它期望在响应中的某个位置有一个oData对象。

实际上,datatable期望的更多,您需要返回项目总数,页面上显示的数字等