title: Using jquery tablesorter filter to filter by the start of the column's text
body: <p>I'd like to be able to filter a column of last names using the tablesorter filter. The filter should only match starting with the first character of each name. For example, let's say you had the following three names:</p>
  
  <p>Gilbert</p>
  
  <p>Baggins</p>
  
  <p>Godfrey</p>
  
  <p>If the filter text was just "g", I'd only want this result:</p>
  
  <p>Gilbert</p>
  
  <p>Godfrey</p>
  
  <p>And not match the either of the gs in Baggins.</p>
  
  <hr>
  
  <p>After studying the .tablesorterFilter's source code some more, I was able to figure out how to do it. </p>
  
  <p>You need to create a function that is passed 3 parameters. The first parameter is the contents of the HTML element. The second parameter is a string array of the words the user has typed into the filter container. The third parameter is a boolean for case sensitivity. You pass a reference to this function in the .tablesorterFilter filterFunction. I just copied and pasted the .tablesorterFilter's default has_words function and modified it to provide the functionality I'm looking for. I named it filterbyfirstcolumn and passed a reference to it as filterFunction.</p>
  
  <p>Here's the appropriate code snippet from my program:</p>
  
  <pre><code>        function filterbyfirstcolumn(str, words, caseSensitive) {
          var text = caseSensitive ? str : str.toLowerCase();
  
          var allwords = "";
  
          for (var i=0; i &lt; words.length; i++) {
              allwords += words[i];
  
              if (i != words.length - 1)
                  allwords += " ";
          }
  
          if (text.indexOf(allwords) != 0)
              return false;
          return true;
      }
  
      $("#tblSearchContacts")
  .tablesorter({debug: false, widgets: ["zebra"], 
                  headers: { 
                          0: { sorter: false }, 
                          4: { sorter: false }, 
                          5: { sorter: false },
                          6: { sorter: false }, 
                          7: { sorter: false }, 
                          8: { sorter: false } 
                         },
                         sortList: [[1,0]]})
  .tablesorterPager({ container: $("#pagerOne"), positionFixed: false, size : 20 })
  .tablesorterFilter({filterContainer: $("#txtFilter"),
                      filterClearContainer: $("#btnClear"),
                      filterColumns: [3],
                      filterCaseSensitive: false,
                      filterFunction: filterbyfirstcolumn});`
  </code></pre>
  
  <p>Hopefully others may find this useful. Using a similar technique you could do all kinds of neat stuff with the filter.</p>