Tablesorter demo

All options included, as well as the uitheme widget

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">
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.dark.css">
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.default.css">
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.dropbox.css">
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.green.css">
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.grey.css">
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.ice.css">
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/css/theme.black-ice.css">
<link rel="stylesheet" href="http://mottie.github.com/tablesorter/addons/pager/jquery.tablesorter.pager.css">
<script src="http://mottie.github.com/tablesorter/addons/pager/jquery.tablesorter.pager.js"></script>
Filter array: <span id="array"></span>
<br>Current Ajax url: <span id="url"></span>
<br>
<br>
    <label><input name="filter" class="neither" type="radio" checked="checked" /> Filter contains</label><br> 
    <label><input name="filter" class="startsWith" type="radio"/> Filter Starts with</label><br> 
    <label><input name="filter" class="endsWith" type="radio"/> Filter Ends with</label>
<br>    

<table class="tablesorter">
  <thead>
    <tr>
      <th>Name</th>
      <th>Location</th>
    </tr>
  </thead>
  <tbody>

  </tbody>
</table>

CSS

.results {
    color: #F00;
}

JavaScript

$(function () {
    var endsWith = false;
    
	$("table")
		.tablesorter({
			theme: 'blue',
            widgets: ['filter'],
            widgetOptions: {
                filter_startsWith: false,
                filter_hideEmpty: false
            }
		})
		.tablesorterPager({
			// leave off {filterList:fcol} from ajaxUrl
			ajaxUrl: "data?page={page}&size={size}&{sortList:col}",
			ajaxProcessing: function (ajax) {
				// do something with the ajax
				return ['', 0];
			},
			// modify the url after all processing has been applied
			customAjaxUrl: function (table, url) {
                
				var c = table.config,
				wo = c.widgetOptions,
                    sql = {filter:[]},
				filters = $(table).data('lastSearch') || [];
				$.each(filters, function (i, v) {
                    v = v || '';
					sql.filter[i] = wo.filter_startsWith ? v + '%' :
                        endsWith ? '%' + v :
                        v;
				});
				// **************** show url in DEMO ****************
                $('#array').html( sql.filter.join(', ') );
                $('#url').html(url + '&' + $.param(sql));
                // **************************************************
                
                // send the server the current page
				return url + '&' + $.param(sql);
			}
		});

	/* DEMO STUFF */
    $('input[type=radio]').on('change', function(){
        var c = $('table')[0].config;
        c.widgetOptions.filter_startsWith = $('.startsWith').prop('checked');
        endsWith = $('.endsWith').prop('checked');
        // remove the next line if you don't want the radio button to automatically
        // update the ajax url
        c.pager.last.page = c.pager.page + 1;
        
        c.$table.trigger('update');
    });

});