Posted in Javascript onMay 17, 2013
使用Jquery的DataTable进行数据表处理非常方便,常遇到的一个问题就是删除一行后页面必须进行更新,需要注意的方法如下:前台页面中初始化table时注意:
var table = $('#sorting-advanced'); table.dataTable({ 'bServerSide': true, 'sAjaxSource': 'servlet/UserList<%=queryString%>', '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
JQuery DataTable删除行后的页面更新利用Ajax解决
声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@