title: How to pass a reference to a Javascript function?
body: <p>I am building a table using DataTables, and it uses AJAX for it's data source. However, I can't seem to pass a function into the AJAX parameters; the $.post() function (from regular JQuery) always sends whatever my variable evaluates to when the page is loaded. I am pretty bad with understanding the inner workings of JS, so I'm not sure what I'm doing wrong. Here is my code:</p>
  
  <pre><code>function init_datatable() {
  
    var url = null;
    var datasource = null;
  
    // Set AJAX url and data based on which page we're on
    if (window.location.pathname.indexOf("bookmarks") &gt; -1) {
      url = "/bookmarks";
      datasource = bookmarks;
    } else {
      url = "/search";
      datasource = $('#form').serialize();
    }
  
    var table = $('#table').DataTable({
      "ajax" : function (data, callback, settings) {
        $.post(url, datasource, function (data) {
          callback(data);
        });
      }
    });
  }
  </code></pre>
  
  <p>If I write <code>$.post(url, $("#form").serialize())</code> directly, without passing in the <code>serialize()</code> function inside the variable datasource, I get the expected result; every time the form changes, the updated data is included in the POST request. However, if I do it as written above, datasource is a static object of what the form contained at page load. I have also tried doing</p>
  
  <pre><code>datasource = function() {
    $("#form").serialize()
  }
  </code></pre>
  
  <p>but this does not seem to work. How can I use datasource as both as a static global object and as a function that needs to be run every time <code>$.post()</code> is called, depending on the current page?</p>