working jqGrid Example

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css">
<script src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
<script src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script>
<table id="html_output_result_table" cellspacing="0" cellpadding="0" border="0" >
	<tr>
		<th width="12%">Surname</th>
		<th  width="13%">Name</th>
		<th  width="6%">Title</th>
		<th  width="12%" align="right">DoB</th>
		<th  width="7%" align="right">Sex</th>
		<th  width="6%" align="center">Age</th>
		<th  width="10%" align="center">Vehicle</th>
		<th  width="8%" align="right">City 1</th>
		<th  width="6%" align="center">City 2</th>
		<th  width="13%" align="right">Today</th>
		<th  width="10%" align="center">SSN</th>
	</tr>
	<tr >
		<td>John Appleseed McLovin</td>
		<td>Doe</td>
		<td>Mr</td>
		<td align="right">01-Jan-1900</td>
		<td align="right">M</td>
		<td align="center">113</td>
		<td align="center">
			<a href="" target="_blank">161</a>
		</td>
		<td align="right">NYC</td>
		<td align="right">SLC</td>
		<td align="right">2-Jul-2013</td>
		<td align="right">
			<a href="">ABC123XYZ</a>
		</td>
	</tr>
</table>

JavaScript

tableToGrid('#html_output_result_table', {rownumbers: true, width: '960', shrinkToFit: true, forceFit: true, height: 'auto', rowNum: 10000});

$('#html_output_result_table').filterToolbar({autosearch: true, searchOnEnter: false});

// remove this line and it works fine
$('#html_output_result_table').css('display', 'block');