programing

데이터 테이블 에이잭스 호출 성공 시 함수를 호출한다.

stoneblock 2023. 4. 4. 20:53

데이터 테이블 에이잭스 호출 성공 시 함수를 호출한다.

datable ajax 호출 성공 시 javascript 함수를 호출할 수 있습니까?여기 사용하려는 코드가 있습니다.

var oTable = $('#app-config').dataTable(
            {
                "bAutoWidth": false,                                                
                "bDestroy":true,
                "bProcessing" : true,
                "bServerSide" : true,
                "sPaginationType" : "full_numbers",
                "sAjaxSource" : url,                    
                "fnServerData" : function(sSource, aoData, fnCallback) {
                    alert("sSource"+ sSource);
                    alert("aoData"+ aoData);
                    $.ajax({
                        "dataType" : 'json',
                        "type" : "GET",
                        "url" : sSource,
                        "data" : aoData,
                        "success" : fnCallback
                    });
                }

이런 걸 가질 수 있을까요?

success : function(){
    //.....code goes here
}

"success" 대신 : fnCallback ------>을 클릭합니다.이것은 AJAX 콜의 마지막 회선입니다.이 기능에서는 서버 측에서 송신된 값을 확인하고 싶습니다.

dataSrc를 사용할 수 있습니다.

다음은 데이터 테이블의 일반적인 예입니다.그물

var table = $('#example').DataTable({
    "ajax": {
            "type" : "GET",
            "url" : "ajax.php",
            "dataSrc": function ( json ) {
                //Make your callback here.
                alert("Done!");
                return json.data;
            }       
    },
    "columns": [
            { "data": "name" },
            { "data": "position" },
            { "data": "office" },
            { "data": "extn" },
            { "data": "start_date" },
            { "data": "salary" }
        
        ]
    } );

다음을 사용할 수 있습니다.

"drawCallback": function(settings) {
   console.log(settings.json);
   //do whatever  
},

데이터 취득 후 init Complete 메서드를 사용하여 테이블을 렌더링하는 것이 가장 좋은 방법입니다., 이것은 1회만 발생합니다.

$("#tableOfData").DataTable({
        "pageLength": 50,
        "ajax":{
            url: someurl,
            dataType : "json",
            type: "post",
            "data": {data to be sent}
        },
        "initComplete":function( settings, json){
            console.log(json);
            // call your function here
        }
    });

저는 이거면 돼요.다른 방법은 효과가 없습니다.

                'ajax': {
                    complete: function (data) {
                        console.log(data['responseJSON']);
                    },
                    'url': 'xxx.php',
                },

데이터 테이블 1.10.12의 경우.

$('#table_id').dataTable({
  ajax: function (data, callback, settings) {
    $.ajax({
      url: '/your/url',
      type: 'POST',
      data: data,
      success:function(data){
        callback(data);
        // Do whatever you want.
      }
    });
  }
});

데이터 로드가 완료되면 DataTables에서 내부적으로 테이블 추첨을 실행하기 위해 성공 옵션을 사용하기 때문에 ajax의 성공 옵션을 변경하지 마십시오.권장사항은 수신된 데이터를 변경하기 위해 "dataSrc"를 사용합니다.

서류에 의하면xhrAjax 이벤트는 Ajax 요청이 완료되면 실행됩니다.다음과 같은 작업을 수행할 수 있습니다.

let data_table = $('#example-table').dataTable({
        ajax: "data.json"
    });

data_table.on('xhr.dt', function ( e, settings, json, xhr ) {
        // Do some staff here...
        $('#status').html( json.status );
    } )

당신이 원하는 건 아닐지 몰라도, 에이잭스 컴플리트 사용으로 에이잭스 호출이 돌아왔을 때 스피너를 숨기는 문제가 해결됐어요.

그래서 이렇게 생겼을 거예요

var table = $('#example').DataTable( {
    "ajax": {
            "type" : "GET",
            "url" : "ajax.php",
            "dataSrc": "",
            "success": function () {
                alert("Done!");
            }       
    },
    "columns": [
            { "data": "name" },
            { "data": "position" },
            { "data": "office" },
            { "data": "extn" },
            { "data": "start_date" },
            { "data": "salary" }            
        ]
    } );

코드를 따르세요.

       var oTable = $('#app-config').dataTable(
        {
            "bAutoWidth": false,                                                
            "bDestroy":true,
            "bProcessing" : true,
            "bServerSide" : true,
            "sPaginationType" : "full_numbers",
            "sAjaxSource" : url,                    
            "fnServerData" : function(sSource, aoData, fnCallback) {
                alert("sSource"+ sSource);
                alert("aoData"+ aoData);
                $.ajax({
                    "dataType" : 'json',
                    "type" : "GET",
                    "url" : sSource,
                    "data" : aoData,
                    "success" : fnCallback
                }).success( function(){  alert("This Function will execute after data table loaded");   });
            }

언급URL : https://stackoverflow.com/questions/15786572/call-a-function-in-success-of-datatable-ajax-call