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() 関数を使用すると、サーバーから新しいデータが返される前に、ページ page を変更するステートメントに制御を移すことができます。最後のページに移動するロジックを fnDrawCallback に移動する必要があります。これで問題は解決すると思います。

于 2012-10-29T14:37:12.323 に答える
0

私がどのように修正したかを他の人が示すのを助けるために、私は応答を書くと思いました.

@Gavin は間違った場所にあるという点で正しかった - 問題の関数を AJAX の成功コールバックに移動した。ただし、完全に修正するには、(fn.PageChange プラグインを使用して) 削除が行われたページを「先制的に」読み取り、1 を引いて (bc DataTables はゼロから始まる)、そこにユーザーを送信する必要がありました。

これが誰にも役立つことを願っています! @Gavin、あなたの助けと、私を正しい方向に導いてくれてありがとう!

于 2012-11-08T17:46:40.817 に答える