title: How do you combine jquery UI selectable and sorting by header on the same table?
body: <p>I'm trying to make a table that has both selectable rows and the ability to sort columns by header. So far I've succeeded in making the rows selectable. However, when I try to combine that with a table sorting plugin (I've tried half a dozen of them), the table sort never works. Either that, or the sorting plugin uses a id that conflicts with the selectable id. Does anyone have a method for table sorting by header that works with jquery UI selectable? Here is my code:</p>
  
  <pre><code>&lt;html&gt;
  &lt;body style="background: Lavender;"&gt;
  
    &lt;link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"&gt;
    &lt;script src="//code.jquery.com/jquery-1.10.2.js"&gt;&lt;/script&gt;
    &lt;script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" href="/resources/demos/style.css"&gt;
  
    &lt;style&gt;
    #feedback { font-size: 1.4em; }
    #selectable .ui-selecting { background: AliceBlue!important; }
    #selectable .ui-selected { background: Snow!important; }
    #selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
    #selectable tr { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
    th, td {
      text-align: left; border: 1px solid black; border-collapse: collapse;
    }
    &lt;/style&gt;
  
    &lt;script&gt;
    $(function() {
      $( "#selectable" ).selectable({filter: 'tr:not(.disabled)'});
    });
    &lt;/script&gt;
  
  &lt;table id="selectable" style="width:100%; border: 1px solid black; border-collapse: collapse;"&gt;
   &lt;thead&gt;
    &lt;tr class='disabled' style="background: Gainsboro;"&gt;
      &lt;th&gt;Cat&lt;/th&gt;
      &lt;th&gt;Dog&lt;/th&gt;
      &lt;th&gt;Bird&lt;/th&gt;
    &lt;/tr&gt;
   &lt;/thead&gt;
   &lt;tbody&gt;
    &lt;tr style="background: skyblue;"&gt;
      &lt;td&gt;Russian Blue&lt;/td&gt;
      &lt;td&gt;Beagle&lt;/td&gt;
      &lt;td&gt;Hawk&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr style="background: skyblue;"&gt;
      &lt;td&gt;British Shorthair&lt;/td&gt;
      &lt;td&gt;Black Lab&lt;/td&gt;
      &lt;td&gt;Blue Jay&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr style="background: skyblue;"&gt;
      &lt;td&gt;Persian&lt;/td&gt;
      &lt;td&gt;Pitbull&lt;/td&gt;
      &lt;td&gt;Cardinal&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr style="background: SkyBlue;"&gt;
      &lt;td&gt;Sphynx&lt;/td&gt;
      &lt;td&gt;Poodle&lt;/td&gt;
      &lt;td&gt;Crow&lt;/td&gt;
    &lt;/tr&gt;
   &lt;/tbody&gt;
  &lt;/table&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Please note that I'm not interested in jquery UI sorting, I need traditional sorting by clicking on the header for each column. Any ideas?</p>