操作后重绘数据表
Posted
技术标签:
【中文标题】操作后重绘数据表【英文标题】：Redraw Datatables after action 【发布时间】：2012-01-07 04:58:48 【问题描述】：我无法刷新我的数据表。我有一个按钮，它在执行任何操作之前调用更新脚本和确认消息。这一切都很好，但是我希望刷新表格以获得新结果。这是我目前所拥有的。
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();
);
*/
【问题讨论】：
【参考方案1】：调用 oTable.fnDraw() 肯定会导致刷新。你在做 $.post，我会把它改成 .$ajax，而且，你似乎没有对 post 操作返回的数据做任何事情。请记住，如果您希望 DataTable 重新绑定数据，则在响应中的某处需要一个 oData 对象。
其实datatable期望的还很多，需要返回总的item个数，页面上显示的个数等等。
【讨论】：
如果你有时间可以告诉我我需要在哪里更改我当前的代码。上面已经添加了完整的代码。 很乐意这样做，但我必须在明天，因为我在酒吧，用手机打字；但是，我现在可以告诉您，当您执行 fnDraw 时将调用的服务器端函数将是 ajax/pc-ajax-table.php因为那是你在标记上定义的。您可以以编程方式清除表格并添加行，这似乎是您的意图，但您需要遍历您的结果集并调用 fnAddRow 或类似的东西。检查文档，很抱歉我不能更具体。 谢谢伙计，我想我得去做更多的研究或满足于刷新页面。在酒馆里？如果是的话，你是英国人吗？星期天早上喝酒有点早，不是吗？ :) @monsterboy 我在美国，正在度假，所以很酷。祝你好运！ :)以上是关于操作后重绘数据表的主要内容，如果未能解决你的问题，请参考以下文章