Tablesorter demo

filltext.com demo

by Mottie

HTML

<script src="http://mottie.github.com/tablesorter/js/jquery.tablesorter.js"></script>
<script src="http://mottie.github.com/tablesorter/js/jquery.tablesorter.widgets.js"></script>
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.blue.css">
<button id="open" type="button">Open Dialog</button>
<div id="dialog">
  <table class="tablesorter-blue">
    <thead>
      <tr>
        <th>#</th>
        <th>ID</th>
        <th>First</th>
        <th>Last</th>
        <th>State</th>
        <th>Info</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>
  <div>

CSS

#dialog {
  display: none;
}

JavaScript

$(function() {

  $("#dialog").dialog({
    autoOpen: false,
    height: 400,
    width: 650,
    modal: true
  });

  $("#open").on("click", function() {
    $("#dialog").dialog("open");
    displayTable();
  });

  var initTable = function(data) {
      var $table = $('#dialog table');
      $table.find('tbody').append(data);
      if ($table[0].config) {
        // tablesorter already initialized; now update the data
        $table.trigger('update');
      } else {
        $table.tablesorter({
          debug: true,
          theme: 'blue',
          widthFixed: true,
          widgets: ['zebra', 'filter', 'columns']
        });
      }
    },

    /* This code is for this demo only, to simulate an ajax request */
    displayTable = function() {
      $.ajax({
        dataType: 'html',
        method: 'POST',
        url: '/echo/html/',
        data: {
          html: "<tr><td>1</td><td>191</td><td>Kasey</td><td>Brouillette</td><td>SD</td><td>malesuada ante porta</td></tr><tr><td>2</td><td>402</td><td>Jackie</td><td>Pfaff</td><td>MN</td><td>orci vel tellus</td></tr><tr><td>3</td><td>936</td><td>Donna</td><td>Bouchard</td><td>DE</td><td>consequat pulvinar sed</td></tr><tr><td>4</td><td>186</td><td>Valoria</td><td>Post</td><td>NY</td><td>massa lectus etiam</td></tr><tr><td>5</td><td>826</td><td>Gilbert</td><td>Suzanne</td><td>SC</td><td>sapien egestas sit</td></tr><tr><td>6</td><td>467</td><td>Adom</td><td>Tabor</td><td>MD</td><td>amet dolor aliquam</td></tr><tr><td>7</td><td>621</td><td>Farzana</td><td>Pomykala</td><td>PA</td><td>placerat pretium sollicitudin</td></tr><tr><td>8</td><td>336</td><td>Tiffany</td><td>Shrestha</td><td>FL</td><td>curabitur ac pharetra</td></tr><tr><td>9</td><td>558</td><td>Dung</td><td>Jackson</td><td>NC</td><td>ante sagittis velit</td></tr><tr><td>10</td><td>603</td><td>Teresa</td><td>Women</td><td>MI</td><td>magna sed sed</td></tr>"
        }
      }).done(function(data) {
        initTable(data);
      });
    };

});