tablesorter-jQuery插件用法

Posted 2021-02-26

I found the tablesorter - jQuery plugin cool and easy to-be implemented. Plugin is written by Christian Bach and my snippet uses tablesorter version 2.0.3. Images are stored on my server as well as inlcuded .js files in example directory. Project's site: http://tablesorter.com/

<style>
	table {
		table-layout:auto;
		border-collapse:collapse;
		border-color:grey;
	}
 
	th {
		background-repeat: no-repeat;
		background-position: center left;
		margin-left: -1px;
		padding-left: 20px;
	}
 
	th.header {
		background-image: url(http://www.polet.cz/images/examples/small.gif);
		cursor: pointer;
		font-weight: bold;
		background-position: center left;
		padding-left: 20px;
	}
 
	th.header:hover {
		cursor: pointer;
		font-weight: bold;
		background-repeat: no-repeat;
		background-position: center left;
		padding-left: 20px;
	}
 
	th.headerSortUp {
		background-image: url(http://www.polet.cz/images/examples/asc.gif);
	}
 
	th.headerSortDown {
		background-image: url(http://www.polet.cz/images/examples/desc.gif);
	}
</style>
 
<script type="text/javascript" src="http://www.polet.cz/examples/jquery-1.3.1.js"></script>
<script type="text/javascript" src="http://www.polet.cz/examples/jquery.tablesorter.js"></script>
<script type="text/javascript">
 
  $(document).ready(function()
   {
		$("#table1").tablesorter(
		{
                        /* Initial sort by first [[column],[asc]] */
			sortList: [[0,0]],
 
			/* Turns off sorting ability for 3rd column */
			headers: {
					2: {
						sorter: false
					},
				}
		});
   });
</script>
 
<table id="table1" border="1" cellpadding="5px">
	<thead>
		<tr>
			<th>Letter</th>
			<th>Digit</th>
			<th>Not sortable column</td>
			<th>URL</td>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>a</td>
			<td>9</td>
			<td>1</td>
			<td><a href=''>http://example/a9</a></td>
		</tr>
		<tr>
			<td>b</td>
			<td>1</td>
			<td>2</td>
			<td><a href=''>http://example/b1</a></td>
		</tr>
		<tr>
			<td>c</td>
			<td>2</td>
			<td>3</td>
			<td><a href=''>http://example/c2</a></td>
		</tr>
		<tr>
			<td>d</td>
			<td>8</td>
			<td>4</td>
			<td><a href=''>http://example/d8</a></td>
		</tr>
		<tr>
			<td>e</td>
			<td>6</td>
			<td>5</td>
			<td><a href=''>http://example/e6</a></td>
		</tr>
		<tr>
			<td>f</td>
			<td>5</td>
			<td>6</td>
			<td><a href=''>http://example/f5</a></td>
		</tr>
	</tbody>
</table>