我遇到一个奇怪的问题,该问题仅在特定环境中的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"));
        });
    });

最佳答案

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

关于javascript - 在DataTables中刷新分页?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/13122669/

10-11 05:30