萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> DataTable刪除行後的頁面更新利用Ajax解決

DataTable刪除行後的頁面更新利用Ajax解決

   使用Jquery的DataTable進行數據表處理非常方便,常遇到的一個問題就是刪除一行後頁面必須進行更新,需要注意的方法如下:前台頁面中初始化table時注意:

  代碼如下:

  var table = $('#sorting-advanced');

  table.dataTable({

  'bServerSide': true,

  'sAjaxSource': 'servlet/UserList',

  'bProcessing': true, 'bStateSave': true,

  'aoColumnDefs': [

  { 'bSortable': false, 'aTargets': [0,1,6]}

  ],

  'sPaginationType': 'full_numbers',

  'sDom': '<"dataTables_header"lfr>t<"dataTables_footer"ip>',

  'fnInitComplete': function( oSettings )

  {

  // Style length select

  table.closest('.dataTables_wrapper').find('.dataTables_length select').addClass('select blue-gradient glossy').styleSelect();

  tableStyled = true;

  }

  });

  'bStateSave': true, 這個必須設置,這樣就可以在刪除返回時,保留在同一頁上'bStateSave': true, 這個必須設置,這樣就可以在刪除返回時,保留在同一頁上

  刪除的代碼如下:

  代碼如下:

  function deleteConfirm(deleteID)

  {

  $.modal.confirm('確實要刪除此用戶嗎?', function()

  {

  $.ajax('servlet/DeleteUser', {

  dataType : 'json',

  data: {

  userID: deleteID

  },

  success: function(data)

  {

  if (data.success =='true')

  {

  $.modal.alert('刪除成功!');

  start = $("#sorting-advanced").dataTable().fnSettings()._iDisplayStart;

  total = $("#sorting-advanced").dataTable().fnSettings().fnRecordsDisplay();

  window.location.reload();

  if((total-start)==1){

  if (start > 0) {

  $("#sorting-advanced").dataTable().fnPageChange( 'previous', true );

  }

  }

  }

  else

  {

  $.modal.alert('刪除發生錯誤,請聯系管理員!');

  }

  },

  error: function()

  {

  $.modal.alert('服務器無響應,請聯系管理員!');

  }

  });

  }, function()

  {

  //$.modal.alert('Meh.');

  });

  };

  其中只要是需要判斷一下當前頁中是否有數據,如果是最後一條的話,就在刪除後調用

  $("#sorting-advanced").dataTable().fnPageChange( 'previous', true );已回到上一頁中

  注意$("#sorting-advanced").dataTable().fnPageChange( 'previous'); 是不行的,必需進行刷新,否則頁面中顯示的iDisplayStart會從cookie中取得,還是刪除前的iDisplayStart

copyright © 萬盛學電腦網 all rights reserved