javascript sorter 插件使用

今天看到同事完成了公司网站上的table表格排序分页功能。试用了一下,感觉效果很好。

于是就想学习学习。

开始自以为他会用ajax的。一看代码发现只有很简单的几行。用到得就是sorter插件。

在官网上很容易下载,很小的东西。

http://sandbox.leigeber.com/sorter/sorter.zip

网上找了招资料来看。发现这东西用起来真的很简单。

自己试验先随便搞了个表格

<script type="text/javascript" src="script.js"></script>
	<table cellpadding="0" cellspacing="0" border="0"  id="testSort">
		<tr>
			<th class="nosort">ID</th>
			<th>Name</th>
			<th>Phone</th>
			<th>Email</th>
			<th>City</th>
			<th>State</th>
			<th>Zip Code</th>
		</tr>
		<tr>
			<td>1</td>
			<td>Kaseem Huber</td>
			<td>(587) 117-5521</td>
			<td>[email protected]</td>
			<td>Burlington</td>
			<td>DE</td>
			<td>81070</td>
		</tr>
	</table>

 引入sorter包。

<script type="text/javascript" src="script.js"></script>

在页面上加入几行javascript代码便可。

 

 <script type="text/javascript">
  var testSort=new table.sorter("testSort");
  testSort.init("testSort",1);
 </script>

 

红色的变量是 前面html 表格的ID值。

这样简单一搞。效果便出来了

 

此插件还有很多有用的功能。比如分页。还自带有效果不错的CSS样式,有空可以多多深入的研究研究。

 

你可能感兴趣的:(JavaScript,html,Ajax,css)