title: jQuery load table from ajax and auto update
body: <p>I've been searching for a solution to this problem on Google for a while, but
  I'm either looking for the wrong thing, or I can't find something that
  accomplishes my needs.</p>
  
  <p>I need a jQuery table plugin or the respective functionality that can accomplish
  the following:</p>
  
  <ul>
  <li>Load table contents via AJAX</li>
  <li>Automatic pagination</li>
  <li>Column sorting</li>
  <li>Auto-update timeout (every so often, talk to AJAX and update ONLY the rows that have changed or need to be added) <strong>&lt;-- This is the most important.</strong></li>
  </ul>
  
  <p>I assume the implementation of it would be something similar to:</p>
  
  <pre><code>&lt;table class="autoTable"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;Custom Row Name 1&lt;/th&gt;
              &lt;th&gt;Custom Row Name 2&lt;/th&gt;
              &lt;th&gt;Custom Row Name 3&lt;/th&gt;
              &lt;th&gt;Custom Row Name 4&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>And something similar to:</p>
  
  <pre><code>$('.autoTable').each(function() {
      $(this).autoTable({
          timeout: 500
          url:     "ajax/test.json"
      });
  });
  </code></pre>
  
  <p>That uses an JSON value like:</p>
  
  <pre><code>[
      {
          "row1": "Lorem",
          "row2": "Ipsum",
          "row3": "Dolor",
          "row4": "Sit"
      },
      {
          "row1": "Lorem",
          "row2": "Ipsum",
          "row3": "Dolor",
          "row4": "Sit"
      },
      {
          "row1": "Lorem",
          "row2": "Ipsum",
          "row3": "Dolor",
          "row4": "Sit"
      },
      {
          "row1": "Lorem",
          "row2": "Ipsum",
          "row3": "Dolor",
          "row4": "Sit"
      },
      {
          "row1": "Lorem",
          "row2": "Ipsum",
          "row3": "Dolor",
          "row4": "Sit"
      },
      {
          "row1": "Lorem",
          "row2": "Ipsum",
          "row3": "Dolor",
          "row4": "Sit"
      },
      {
          "row1": "Lorem",
          "row2": "Ipsum",
          "row3": "Dolor",
          "row4": "Sit"
      }
  
  ]
  </code></pre>
  
  <p>Hopefully you know of something.</p>