버튼을 클릭할 때 jquery datables fnServerData를 트리거하여 AJAX를 통해 테이블을 업데이트하려면 어떻게 해야 합니까?

버튼을 클릭할 때 jquery datables fnServerData를 트리거하여 AJAX를 통해 테이블을 업데이트하려면 어떻게 해야 합니까?

서버측 데이터로 datables plugin을 사용하고 있으며, AJAX를 사용하여 테이블을 업데이트하고 있습니다.

내 dataTables 설정은 다음과 같습니다.

tblOrders = parameters.table.dataTable( {
    "sDom": '<"S"f>t<"E"lp>',
    "sAjaxSource": "../file.cfc",
    "bServerSide": true,
    "sPaginationType": "full_numbers",  
    "bPaginate": true,
    "bRetrieve": true,
    "bLengthChange": false,         
    "bAutoWidth": false,
    "aaSorting": [[ 10, "desc" ]],      
    "aoColumns": [                      
        ... columns 
                  ],
    "fnInitComplete": function(oSettings, json) {
        // trying to listen for updates
        $(window).on('repaint_orders', function(){
            $('.tbl_orders').fnServerData( sSource, aoData, fnCallback, oSettings );
            });
        },
    "fnServerData": function ( sSource, aoData, fnCallback, oSettings ) {
        var page = $(oSettings.nTable).closest('div:jqmData(wrapper="true")')
        aoData.push(
            { "name": "returnformat", "value": "plain"},
            { "name": "s_status", "value": page.find('input[name="s_status"]').val() },
            { "name": "s_bestellnr", "value": page.find('input[name="s_bestellnr"]').val() },
            { "name": "form_submitted", "value": "dynaTable" }
            );
        $.ajax({ "dataType": 'json', "type": "POST", "url": sSource, "data": aoData , "success": fnCallback });
        }

AJAX 요청과 함께 데이터 서버 측 필터링을 위한 사용자 지정 필드가 있습니다.문제는 테이블 외부에서 JSON 요청을 트리거하는 방법을 모른다는 것입니다.사용자가 필터에 입력하면 fnServerData가 테이블을 실행하고 업데이트합니다.그러나 사용자가 테이블 외부에서 컨트롤을 선택하면 fnServerData 함수를 트리거하는 방법을 알 수 없습니다.

지금은 사용자 지정 이벤트를 실행하고 fnInitComplete에서 듣고 있습니다.사용자 지정 필터링 기준을 선택하는 사용자를 탐지할 수 있지만 fnServerData가 올바르게 트리거하는 데 필요한 모든 매개 변수가 누락되었습니다.

질문:
실제 dataTables 테이블 외부의 버튼에서 fnServerData를 트리거하는 방법이 있습니까?

필터에 공백을 추가할 수 있지만, 이것은 실제로 선택사항이 아닙니다.

의견 감사합니다!

질문.

여기서 논의한 바에 따르면, Allan(DataTables 담당자)은 단순히 fnDraw를 호출하는 것만으로도 원하는 결과를 얻을 수 있다고 합니다.이것은 제가 서버 측 자료(중요한 fnServerData를 통해)를 다시 로드하는 데 사용하는 방법이며, 지금까지 작동했습니다.

$("#userFilter").on("change", function() {
    oTable.fnDraw();  // In your case this would be 'tblOrders.fnDraw();'
});

저는 얼마 전에 이 스크립트를 발견했습니다(그래서 어디서 왔는지 기억이 나지 않습니다. :( 그리고 누구를 믿어야 할지:'( ) 하지만 여기서는:

$.fn.dataTableExt.oApi.fnReloadAjax = function (oSettings, sNewSource, fnCallback, bStandingRedraw) {
    if (typeof sNewSource != 'undefined' && sNewSource != null) {
        oSettings.sAjaxSource = sNewSource;
    }
    this.oApi._fnProcessingDisplay(oSettings, true);
    var that = this;
    var iStart = oSettings._iDisplayStart;
    var aData = [];

    this.oApi._fnServerParams(oSettings, aData);

    oSettings.fnServerData(oSettings.sAjaxSource, aData, function (json) {
        /* Clear the old information from the table */
        that.oApi._fnClearTable(oSettings);

        /* Got the data - add it to the table */
        var aData = (oSettings.sAjaxDataProp !== "") ?
            that.oApi._fnGetObjectDataFn(oSettings.sAjaxDataProp)(json) : json;

        for (var i = 0; i < aData.length; i++) {
            that.oApi._fnAddData(oSettings, aData[i]);
        }

        oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
        that.fnDraw();

        if (typeof bStandingRedraw != 'undefined' && bStandingRedraw === true) {
            oSettings._iDisplayStart = iStart;
            that.fnDraw(false);
        }

        that.oApi._fnProcessingDisplay(oSettings, false);

        /* Callback user function - for event handlers etc */
        if (typeof fnCallback == 'function' && fnCallback != null) {
            fnCallback(oSettings);
        }
    }, oSettings);
}

데이터 테이블 초기화 함수를 호출하기 전에 추가합니다.그러면 다음과 같이 다시 로드를 호출할 수 있습니다.

$("#userFilter").on("change", function () {
        oTable.fnReloadAjax(); // In your case this would be 'tblOrders.fnReloadAjax();'
    });

userFilter는 드롭다운의 ID이므로 변경 시 테이블의 데이터를 다시 로드합니다.예를 들어 방금 추가했지만 어떤 이벤트에서도 트리거할 수 있습니다.

앞에서 언급한 모든 솔루션에 문제가 있습니다(예: 추가 사용자 http 매개 변수가 게시되지 않았거나 오래된 경우).그래서 저는 잘 작동하는 다음과 같은 해결책을 생각해냈습니다.

확장 기능(내 매개 변수는 키 값 쌍의 배열)

<pre>
$.fn.dataTableExt.oApi.fnReloadAjax = function (oSettings, sNewSource, myParams ) {
if ( oSettings.oFeatures.bServerSide ) {
    oSettings.aoServerParams = [];
    oSettings.aoServerParams.push({"sName": "user",
        "fn": function (aoData) {
            for (var i=0;i<myParams.length;i++){
            aoData.push( {"name" : myParams[i][0], "value" : myParams[i][1]});
         }
     }});
     this.fnClearTable(oSettings);
     this.fnDraw();
     return;
    }
};
</pre>

새로 고침 이벤트 수신기에 넣는 사용 예입니다.

<pre>
oTable.fnReloadAjax(oTable.oSettings, supplier, val);
</pre>

딱 한 가지 주목할 점이 있습니다.테이블을 만든 후에는 시간이 많이 걸리므로 테이블을 다시 그리지 마십시오.그러므로, 처음에만 그것을 그려야 합니다.그렇지 않으면 다시 로드합니다.

<pre>
var oTable;
if (oTable == null) {
    oTable = $(".items").dataTable(/* your inti stuff here */); {
}else{
    oTable.fnReloadAjax(oTable.oSettings, supplier, val);
}
</pre>

초기화에서 다음을 사용합니다.

"fnServerData": function ( sSource, aoData, fnCallback ) {
                    //* Add some extra data to the sender *
                    newData = aoData;
                    newData.push({ "name": "key", "value": $('#value').val() });

                    $.getJSON( sSource, newData, function (json) {
                        //* Do whatever additional processing you want on the callback, then tell DataTables *
                        fnCallback(json);
                    } );
                },

다음을 사용합니다.

$("#table_id").dataTable().fnDraw();

fnServerData에서 중요한 것은 다음과 같습니다.

    newData = aoData;
    newData.push({ "name": "key", "value": $('#value').val() });

aoData에 직접 푸시하면 변경 사항이 처음에 영구적으로 적용되며 테이블을 다시 그릴 때 fnDraw가 원하는 방식으로 작동하지 않습니다.따라서 aoData 복사본을 사용하여 데이터를 Ajax에 푸시합니다.

경기가 늦은 건 알지만,fnDraw(위의 이 답변에서 - 허용되는 답변이어야 함)은 v1.10에서 더 이상 사용되지 않습니다.

새로운 방법은 다음과 같습니다.

this.api( true ).draw( true );

BTW에는 다음과 같은 댓글이 있습니다.

// Note that this isn't an exact match to the old call to _fnDraw - it takes
// into account the new data, but can hold position.

Mitja Gustin 답변과 유사합니다.루프를 변경하고 sNewSource를 추가했습니다.

$.fn.dataTableExt.oApi.fnReloadAjax = function (oSettings, sNewSource, myParams ) {
    if(oSettings.oFeatures.bServerSide) {
        if ( typeof sNewSource != 'undefined' && sNewSource != null ) {
            oSettings.sAjaxSource = sNewSource;
        }
        oSettings.aoServerParams = [];
        oSettings.aoServerParams.push({"sName": "user",
            "fn": function (aoData) {
                for(var index in myParams) {
                    aoData.push( { "name" : index, "value" : myParams[index] });
                }
            }
        });
        this.fnClearTable(oSettings);
        return;
    }
};

var myArray = {
    "key1": "value1",
    "key2": "value2"
};

var oTable = $("#myTable").dataTable();
oTable.fnReloadAjax(oTable.oSettings, myArray);

와 함께 jquery selector를 사용하여 .DataTable() call 함._fnAjaxUpdate기능.

다음은 예입니다.

$('#exampleDataTable').DataTable()._fnAjaxUpdate();

언급URL : https://stackoverflow.com/questions/11566463/how-can-i-trigger-jquery-datatables-fnserverdata-to-update-a-table-via-ajax-when