Trying to understand JQuery logic flow

Trying to understand JQuery logic flow

Let me start by saying, I clearly don't know what I'm doing. I know just enough about JQuery to be dangerous. Currently I'm working with version 3 of foo tables, and the author provides an example of populating an html table from a .js file where he's hardcoded some rows. I'm trying to convert this hardcoding into reading data from a web service using JSON. This part I've accomplished, in the success method of JSON, if I call: alert(JSON.stringify(response)); I can see my data in the correct format.

The issue I'm having, is how to store this returned data for later use. Below is the html file I'm using:

  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.     <meta name="viewport" content="width = device-width, initial-scale = 1.0, minimum-scale = 1.0, maximum-scale = 1.0, user-scalable = no" />
  6.     <title></title>
  7.     <link rel="stylesheet" href="../Content/bootstrap.min.css">
  8.     <script src="../Scripts/jquery-2.1.3.min.js"></script>
  9.     <script src="../Scripts/fajax.js"></script>

  11.     <link href="../Content/footable.bootstrap.min.css" rel="stylesheet" />
  12.     <script src="../Scripts/footable.min.js"></script>

  14.     <script>
  15.         jQuery(function ($) {
  16.             FAjax.defaults.delay = 1000;
  17.             $('#table_1').footable({
  18.                 ajaxEnabled: true,
  19.                 sorting: {
  20.                     enabled: true
  21.                 },
  22.                 paging: {
  23.                     enabled: true,
  24.                     total: FAjax.defaults.rows.length,
  25.                     size: 15,
  26.                     current: parseInt(FooTable.utils.getURLParameter('page')) || 1
  27.                 },
  28.                 filtering: {
  29.                     enabled: true
  30.                 },
  31.                 ajax: FAjax.request,
  32.                 columns: FAjax.defaults.columns
  33.             });
  34.         });
  35.     </script>
  36.     <style>
  37.         body
  38.         {
  39.             padding: 50px;
  40.         }
  41.     </style>
  42. </head>
  43. <body>
  44.     <table id="table_1" class="footable table table-bordered table-striped table-hover table-condensed">
  45.     </table>
  46. </body>
  47. </html>
The FAjax.js file looks like this:

  2. (function ($, FAjax) {
  3.     FAjax.eocResults = function () {
  4.         $.ajax({
  5.             type: "POST",
  6.             contentType: "application/json; charset=utf-8",
  7.             url: "../WebServices/eoc.asmx/getEOCResults",
  8.             data: "{}",
  9.             dataType: "json",
  10.             success: function (response) {
  11.                 results = response;
  12.                 alert(results);
  13.             },
  14.         })

  16.         alert("hi");

  18.         return results;
  19.     };

  21.     FAjax.defaults = {
  22.         delay: 1500,
  23.         columns: {
  24.             0: { name: 'grade', title: 'Grade', type: 'number' }
  25.         },
  26.         rows: FAjax.eocResults(),
  27.         sorters: {
  28.             text: function (a, b) {
  29.                 if (typeof (a) === 'string') { a = a.toLowerCase(); }
  30.                 if (typeof (b) === 'string') { b = b.toLowerCase(); }
  31.                 if (a === b) return 0;
  32.                 if (a < b) return -1;
  33.                 return 1;
  34.             },
  35.             number: function (a, b) {
  36.                 return a - b;
  37.             }
  38.         }
  39.     };

  41.     FAjax.isFiltered = function (query, text) {
  42.         var queries = query.split(' '), count = queries.length;
  43.         for (var i = 0, len = queries.length; i < len; i++) {
  44.             if (text.toUpperCase().indexOf(queries[i].toUpperCase()) >= 0) count--;
  45.         }
  46.         return count > 0;
  47.     };

  49.     FAjax.request = function (data) {
  50.         return $.Deferred(function (d) {
  51.             setTimeout(function () {
  52.                 var rows = JSON.parse(JSON.stringify(FAjax.defaults.rows));
  53.                 if (data.filtering && data.filtering.query) {
  54.                     var i, text, len = rows.length, remove = [];
  55.                     for (i = 0; i < len; i++) {
  56.                         text = '';
  57.                         for (var j = 0, column; j < data.filtering.columns.length; j++) {
  58.                             column = data.filtering.columns[j];
  59.                             text += ' ' + ($.isFunction(column.formatter) ? column.formatter(rows[i][column.name]) + '' : rows[i][column.name] + '');
  60.                         }
  61.                         if (FAjax.isFiltered(data.filtering.query, text)) {
  62.                             remove.push(i);
  63.                         }
  64.                     }
  65.                     remove.sort(function (a, b) { return a - b; });
  66.                     len = remove.length - 1;
  67.                     for (i = len; i >= 0; i--) {
  68.                         rows.splice(remove[i], 1);
  69.                     }
  70.                 }
  71.                 if (data.sorting && data.sorting.column && data.sorting.direction) {
  72.                     var sorter = $.isFunction(FAjax.defaults.sorters[data.sorting.column.type]) ? FAjax.defaults.sorters[data.sorting.column.type] : FAjax.defaults.sorters.text;
  73.                     rows.sort(function (a, b) {
  74.                         return data.sorting.direction == 'ASC'
  75. ? sorter(a[data.sorting.column.name], b[data.sorting.column.name])
  76. : sorter(b[data.sorting.column.name], a[data.sorting.column.name]);
  77.                     });
  78.                 }
  79.                 var total = rows.length, result = {};
  80.                 if (data.paging) {
  81.                     var start = (data.paging.current - 1) * data.paging.size,
  82. end = data.paging.current * data.paging.size > rows.length ? rows.length - 1 : data.paging.current * data.paging.size;

  84.                     if (total > data.paging.size) rows = rows.slice(start, end);
  85.                     result.paging = { total: total };
  86.                 }
  87.                 result.rows = rows;
  88.                 d.resolve(result);
  89.             }, FAjax.defaults.delay);
  90.         });
  91.     };

  93. })(jQuery, window.FAjax = window.FAjax || {});
When the function eocResults is called, I would expect that it would excute the JSON method first, wait for it to finish, the execute the alert and return commands. Obviously I'm wrong - I'm guessing it executes the JSON method but does not wait for it to finish, and immediately goes on to execute the rest of the code. When testing this, my "Hi" message pops up immediately, and then several seconds later the JSON object message displays (it takes several seconds for the data to be retrieved from the database). 

So how do I resolve this? As always, any help would be greatly appreciated!!