重新繪製數據表後行動

Question

我有問題讓我的數據表刷新。我有一個按鈕，它在執行任何操作之前調用更新腳本和確認消息。這一切工作正常，但我希望刷新表以獲得新的結果。這是我到目前爲止。

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(); 
        } 
      ); 

     } 
     */ 

Answer 1

調用oTable.fnDraw（）將導致刷新肯定。您正在做$ .post，我會將其更改爲。$ ajax，此外，您似乎沒有對從發佈操作返回的數據執行任何操作。請記住，如果您希望DataTable重新綁定數據，DataTable需要在響應中的某個oData對象。

事實上，數據表預計多了很多，你需要返回總項目數，顯示在頁面上的號碼等