Using jQuery range slider with TableSorter

I recently scrapped a project that utilized a few different jQuery technologies. After deciding to use Tablesorter (or any other sorting method), I found that I simply had to use it.

I have a list of data and am in need of finding a method to sort it. There is a catch: it needs to also include the range slider. I have a table with each row having an ID number. The range sorter goes from 1-99 (the range of the IDs). I want it to be able to cut out those rows that have IDs outside of the current range in the slider. This worked really well when I used the slider with the drag-and-drop sorting method of a table, but with the actual table sorter like this, it's rather difficult.

The demo is here, as well as all of the linked files.

Here is the source code:

<html>
<head>
 <TITLE>jQuery plugin: Tablesorter 2.0</TITLE>
 <LINK rel="stylesheet" href="./tablesorter.css" type="text/css" media="print, projection, screen">
 <link type="text/css" href="jquery/css/custom-theme/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
 <script type="text/javascript" src="jquery/js/jquery-1.3.2.min.js"></script>
 <SCRIPT type="text/javascript" src="./jquery.tablesorter.js"></SCRIPT>
 <script type="text/javascript" src="jquery/js/jquery-ui-1.7.2.custom.min.js"></script>

 <SCRIPT type="text/javascript">
 $(function() {
  $("#tablesorter").tablesorter({sortList:[[0,0]], widgets: ['zebra']});
  $("#range").slider({
   range: true,
   min: 1,
   max: 99,
   values: [1, 99],
   slide: function(event, ui) {
    if (ui.values[0] == ui.values[1]) {
     value = ui.values[0];
    } else {
     value = ui.values[0] + ' - ' + ui.values[1];
    }
    $("#amount").val('Show ID numbers ' + value);
   }
  });
  $("#amount").val('Show ID numbers ' + $("#range").slider("values", 0) + ' - ' + $("#range").slider("values", 1));
 });

 var items = new Array (
  [1, 10, "Item 1", 67, 0],
  [12, 70, "Item 2", 1406, 0],
  [20, 100, "Item 3", 15000, 0]
 );

 function createTable() {
  var slide1 = $('#range').slider('values', 0);
  var slide2 = $('#range').slider('values', 1);

  var table = '';
  for (var i=0;i<items.length;i++) {
      if (i >= slide1 && i <= slide2) {
   table += "<tr>";
       table += "<td>" + items[i][0] + "</td>";
       table += "<td>" + items[i][2] + "</td>";
       table += "<td>" + items[i][1] + "</td>";
       table += "<td>1,000</td>";
       table += "<td>" + items[i][3] + "</td>";
       table += "<td>1,000</td>";
       table += "<td>100</td>";
   table += "</tr>";
      }
  }
  return table;
 }
 </SCRIPT>
</head>
<body>
 <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold; background-color:#ffffff; width:200px" disabled />
 <div style='width: 795px' id="range"></div>

 <table id='tablesorter' class='tablesorter' border='0' cellpadding='0' cellspacing='1'>
  <thead>
   <tr>
    <th class='header' width='5%'>ID</th>
    <th class='header' width='30%'>Item</th>
    <th class='header' width='5%'>%</th>
    <th class='header' width='25%'>Amount</th>
    <th class='header' width='10%'>Price Per</th>
    <th class='header' width='15%'>Net Income</th>
    <th class='header' width='10%'>Trips</th>
   </tr>
  </thead>
  <tbody id='tablesorter'>
   <script type='text/javascript'>
    document.write(createTable());
   </script>
  </tbody>
 </table>
 <div id='slider1'></div>
</body>

ansaurus

tags:

views:

answers:

Using jQuery range slider with TableSorter

related questions