Übergabe dynamischer Wert von AJAX zu benutzerdefinierten Parameter in jQuery DataTable

Question

Ich verwende DataTable mit Server-Side-Verarbeitung. Ich möchte Token als benutzerdefinierten Parameter an den Server senden. Token wird von AJAX gesetzt. Wenn AJAX-Anforderung für dataTable ausgelöst wird, Token-Parameter, die immer null senden. Ich denke, das liegt daran, dass die AJAX-Anfrage auf dataTable ausgelöst wurde, bevor der Token-Prozess beendet wurde. Hier sind Wege, die ich schon versucht habe.

1. ajax.data

function GetToken() { 
     var token; 
     $.get("/User/GetToken?_=" + new Date().getTime(), function (token) { 
      token= token; 
     }); 
     return token; 
    } 

    var dataTable = $('#dataTable').DataTable({ 
     serverSide: true, 
     pagingType: 'full_numbers', 
     scrollY: false, 
     scrollX: true, 
     sort: false, 
     fixedColumns: true, 
     autoWidth: true, 
     language: { 
      paginate: { 
       first: "<<", 
       previous: "<", 
       next: ">", 
       last: ">>", 
      } 
     }, 
     pageLength: 10, 
     lengthMenu: [[2, 5, 10, 25, 50], [2, 5, 10, 25, 50]], 
     columns: [ 
       { "data": "Name", "autoWidth": true }, 
       { "data": "Address", "autoWidth": true }, 
       { "data": "Gender", "autoWidth": true }, 
     ], 
     ajax: { 
      url: '@Url.Action("LoadData", "Student")', 
      type: 'POST', 
      data: { token: GetToken() } 
      dataSrc: "Data" 
     } 
    }); 

2. Mit preXhr.dt

var dataTable = $('#dataTable') 
     .on('preXhr.dt', function (e, settings, data) { 
      $.get("/User/GetToken?_=" + new Date().getTime(), function (token) { 
       data.token = token; 
      }); 
     }) 
     .DataTable({ 
      serverSide: true, 
      pagingType: 'full_numbers', 
      scrollY: false, 
      scrollX: true, 
      sort: false, 
      fixedColumns: true, 
      autoWidth: true, 
      language: { 
       paginate: { 
        first: "<<", 
        previous: "<", 
        next: ">", 
        last: ">>", 
       } 
      }, 
      pageLength: 10, 
      lengthMenu: [[2, 5, 10, 25, 50], [2, 5, 10, 25, 50]], 
      columns: [ 
        { "data": "Name", "autoWidth": true }, 
        { "data": "Address", "autoWidth": true }, 
        { "data": "Gender", "autoWidth": true }, 
      ], 
      ajax: { 
       url: '@Url.Action("LoadData", "Student")', 
       type: 'POST', 
       dataSrc: "Data" 
      } 
     }); 

3. Add Looping für die Verzögerung verwenden auf preXhr.dt

var isTokenChange = false; 
    var dataTable = $('#dataTable') 
     .on('preXhr.dt', function (e, settings, data) { 
      $.get("/User/GetToken?_=" + new Date().getTime(), function (token) { 
       data.token= token; 
       isTokenChange = true; 
      }); 

      while(!isTokenChange) { 

      } 

      isTokenChange = false; 
     }) 
     .DataTable({ 
      serverSide: true, 
      pagingType: 'full_numbers', 
      scrollY: false, 
      scrollX: true, 
      sort: false, 
      fixedColumns: true, 
      autoWidth: true, 
      language: { 
       paginate: { 
        first: "<<", 
        previous: "<", 
        next: ">", 
        last: ">>", 
       } 
      }, 
      pageLength: 10, 
      lengthMenu: [[2, 5, 10, 25, 50], [2, 5, 10, 25, 50]], 
      columns: [ 
        { "data": "Name", "autoWidth": true }, 
        { "data": "Address", "autoWidth": true }, 
        { "data": "Gender", "autoWidth": true }, 
      ], 
      ajax: { 
       url: '@Url.Action("LoadData", "Student")', 
       type: 'POST', 
       dataSrc: "Data" 
      } 
     }); 

Für den dritten Weg funktioniert es, aber ich denke, es ist keine gute Lösung. Meine Frage ist, was ist eine gute Lösung zu halten oder zu verzögern Ajax Anfrage auf Datatable bis Token erhalten hat?

Answer 1

Sie wollen nicht eine async Anfrage in diesem Fall zu tun, also statt $ der mit so etwas wie dieses .get versuchen (async: false):

$.ajax({ 
    type: "GET", 
    async:false, 
    url: "/User/GetToken?_=" + new Date().getTime(), 
    success: function(token, textStatus, xhr) { 
     data.token = token; 
    } 
}); 

Answer 2

Sie können Kette Ihre Anrufe, nur, wenn Sie Ein Token wird ausgelöst, um die Initialisierung der Datentabelle auszulösen.

function GetToken() { 
    var token; 
    $.get("/User/GetToken?_=" + new Date().getTime(), function (token) { 
     initializeTable(token); 
    }); 
} 

initializeTable(token){ 
// Here initialize ur data table with the passed token. 
}