1

我遇到了一个奇怪的问题,它只出现在选定环境中的 dataTable 中。我编写了一个函数,允许用户删除一行,然后如果它是该特定页面上的最后一行,则重新加载表并将用户发送到“新”最后一页。

但是,在某些服务器上,它不能正常工作——我认为这与使用 fnClearTable 和 fnDraw 后,表格的分页仍然保留最后一个“空”页有关。

这是我现在正在使用的功能:

function fnDelete(elem) {

if (selected.length > 0) {
var c;
c = confirm("Are you sure you want to delete the selected Agency?");
if (c) {
    var deleteURL = urlstr.substring(0, urlstr.lastIndexOf("/") + 1) + "delete.do";
    deleteRecord(deleteURL, selected[0]);

    if ($(".tableViewer tbody tr:visible").length === 1) {
    oTable.fnClearTable();
    oTable.fnDraw();
    oTable.fnPageChange("last");

}}}}

另外,这是我的删除功能。

function deleteRecord(deleteURL, iid){
    var didDelete = false;
    jQuery.ajax({
            type: "POST",
            url: deleteURL,
            dataType:"html",
            data:"recordID="+iid,
            async : false,
            success:function(response){
                didDelete = true;
                oTable.fnDraw(true);
                selected = [];
                selectedRecord = [];
                enableButtons(selected);
            },
            error:function (xhr, ajaxOptions, thrownError){
                <%-- is the message in a range we can handle? --%>
                if ((xhr.status >=400) && (xhr.status < 500)) {
                    alert(xhr.responseText);
                }
                else {
                    alert('<spring:message arguments="" text="Internal Server Error" code="ajax.internal.server.error"/>');
                }
            }   
        });

    return didDelete;
}

同样,此问题仅在某些计算机上出现。任何人都可以帮忙吗?

另外,这是我的 DataTable 的配置:

oTable = $('#${tableName}_grid').dataTable({
        bDestroy: true,
        bSort: true,
        bFilter: true,
        bJQueryUI: true,
        bProcessing: true,
        bAutoWidth: true,
        bInfo: true,
        bLengthChange: true,
        iDisplayLength: ${sessionScope.displayLength},
        sPaginationType: 'full_numbers',
        bServerSide: true,
        sAjaxSource: "<c:url value='${dataUrl}'/>",
        aaSorting: [<c:forEach items="${sortInfo}" var="oneSort">    [${oneSort.columnIndex},'${oneSort.ascending ? "asc":"desc"}']</c:forEach>],
        aoColumns: [
            <c:forEach items="${columns}" var="curCol" varStatus="colLoop">
                {sName: '${curCol.fieldName}', bSortable: ${curCol.sortable}, bSearchable: false, sTitle: "<c:out value='${curCol.title}'/>", sType: '${curCol.displayType}', bVisible:${curCol.visible}, vdbType:'${curCol.vdbType}', sClass:'${curCol.displayType}'}${colLoop.last ? '' : ','}
            </c:forEach>
            ],
            aoColumnDefs:[{sClass:"color_col", aTargets:['color']}],

            fnRowCallback: function( nRow, aData, iDisplayIndex ) {
                $('#${tableName}_grid tbody tr').each( function () {
                    if ($.inArray(aData[0], selected)!=-1) {
                        $(this).addClass('row_selected');
                    }
                });
                return nRow;
            },
            fnInfoCallback: function( oSettings, iStart, iEnd, iMax, iTotal, sPre ) {

if(myPos>=iStart && myPos<=iEnd){
    //alert(myPos+" visible")
}else{
    selected = [];
    selected = [];
    selectedRecord = [];
    $('tr').removeClass('row_selected');
    enableButtons(selected);
}

},
            fnDrawCallback: function ( oSettings ) {



                $('#${tableName}_grid tbody tr').each( function () {
                    var iPos = myPos = oTable.fnGetPosition( this );
                    if (iPos!=null) {
                        var aData = oTable.fnGetData( iPos );
                        if ($.inArray(aData[0], selected)!=-1) {
                            $(this).addClass('row_selected');
                        }
                    }
                    var htxt = '';
                    $(this).find('.color').filter(function(i,tdata){
                        htxt = '';
                        htxt = '#'+($(tdata).text());
                        return true;
                     }).css("background",htxt);
                    $(this).dblclick( function(){
                        var iPos = myPos = oTable.fnGetPosition(this);
                        var aData = oTable.fnGetData(iPos);
                        var iId = aData[0];
                        selected = [];
                        selectedRecord = [];
                        selected.push(iId);
                        selectedRecord.push(aData);
                        $('tr').removeClass('row_selected');
                        $(this).addClass('row_selected');
                        enableButtons(selected);
                        <%-- in case there is no edit button or its enablement is more complex,
                        // click the button instead of assuming it will call fnEdit.
                        // Do first() because jQuery is returning the same element multiple times.--%>
                        $(".${tableName}_bttns > span.edit-doubleclick:not(.disabld)").first().click();
                    });
                    $(this).click( function () {
                    var iPos = myPos =  oTable.fnGetPosition(this);<%-- row index on_this_page --%>
                        var aData = oTable.fnGetData(iPos);
                        var iId = aData[0];
                        var is_in_array = $.inArray(iId, selected);
<%-- alert("iPos: " + iPos + "\nData: " + aData + "\niId: " + iId + "\nselected: " + selected + "\nis_in_array: " + is_in_array); --%>
                        selected = [];
                        selectedRecord = [];
                        if (is_in_array==-1) {                              
                            selected.push(iId);
                            selected.sort(function(a,b){return a-b});
                            selectedRecord.push(aData);
                            selectedRecord.sort(function(a,b){return a[0]-b[0]});
                        }
                        else {
                            selected = $.grep(selected, function(value) {
                                return value != iId;
                            });
                            selectedRecord = $.grep(selectedRecord, function(value) {
                                return value != aData;
                            });
                        }
                        if ( $(this).hasClass('row_selected') ) {
                            $(this).removeClass('row_selected');
                        }
                        else {
                            $('#${tableName}_grid tr').removeClass('row_selected');
                            $(this).addClass('row_selected');
                        }
                        enableButtons(selectedRecord);
                    });
                });
            } ,
            "sDom": '<"H"lTfr>t<"F"ip>',
            "oTableTools":{
                "aButtons":[ { 
                    "sExtends":"print", 
                    "bShowAll": true,
                    "sInfo": printmsg,
                    "sButtonClass":"ui-icon fg-button ui-button edit-print DTTT_button_print",
                    "sButtonClassHover":"ui-icon fg-button ui-button edit-print DTTT_button_print"
                } ] }
        });
        $('#${tableName}_grid_filter input').attr("maxlength", "255").attr("size", "35");

        $('#${tableName}_grid').ready(function(){

            $(".DTTT_containerc").remove();

            BuildToolBarButtons();

           var tt;
           $(".DTTT_containerc").each(function(){
                tt = $(this).find("#Print").attr("title");
                $(this).find("#Print").remove();  
                $(this).find(".DTTT_container").remove();  
                }
            );

            $(".DTTT_container > button").attr("title",tt).css("border","1px solid #9597A3").removeClass("ui-state-default");    
            $(".DTTT_containerc").append($(".DTTT_container").removeAttr("style"));
        });
    });
4

3 回答 3

2

您的数据表配置为使用 ajax 加载数据。这意味着对数据的任何操作都是异步发生的。具体来说,fnDraw() 函数允许控制在新数据从服务器返回之前转到更改页面页面的语句。您应该将带您到最后一页的逻辑移动到 fnDrawCallback。我相信这应该可以解决您的问题。

于 2012-10-29T14:37:12.323 回答
0

以为我会写一个回复来帮助其他人展示我是如何修复它的。

@Gavin 是正确的,因为它位于错误的位置——我将有问题的函数移到了 AJAX 中的成功回调中。但是,要完全修复它,我必须“先发制人”读取正在删除的页面(使用 fn.PageChange 插件),减去 1(bc DataTables 是从零开始的)并将用户发送到那里。

希望这对任何人都有帮助!@Gavin,感谢您的帮助并引导我进入正确的方向!

于 2012-11-08T17:46:40.817 回答
0

您可以在表格刷新后保持在同一页面上。刷新数据表后,您需要使用以下代码段来保持分页相同。只需将以下 js 代码复制粘贴到单独的文件中,然后将其与当前页面挂钩。

$.fn.dataTableExt.oApi.fnStandingRedraw = function(oSettings) {

   if(oSettings.oFeatures.bServerSide === false){
      var before = oSettings._iDisplayStart;
      oSettings.oApi._fnReDraw(oSettings);       
      oSettings._iDisplayStart = before;
      oSettings.oApi._fnCalculateEnd(oSettings);
   } 
    oSettings.oApi._fnDraw(oSettings);
};

现在,您可能会使用“fnDraw”来刷新数据表。所以现在,而不是那个代码。像这样改变它。

oTable1.fnStandingRedraw();

现在,您的 dataTable 将在刷新后保持相同的页面。

于 2015-10-09T07:20:26.387 回答