现在位置首页 / 前端开发 /正文

jquery table 排序插件Tablesorter使用说明

作者: IT小兵 | 2016年1月22日| 热度:℃ | 评论: |参与:

本站分享了很多关于jquery datatable的文章,本身jquery datatable是带排序功能的。如果我们是直接写的table如何对他排序那?

今天分享一个关于jquery table 排序插件Tablesorter使用demo说明。

先看一下预览图:

官方下载地址:

http://tablesorter.com/docs/#Download

在线预览demo地址:

tablesorter 2.0

http://www.suchso.com/code/tablesorter/ 

支持的浏览器:

  • Firefox 2+

  • Internet Explorer 6+

  • Safari 2+

  • Opera 9+

  • Konqueror

运行环境要求:

前提:

支持的插件:

皮肤:


使用步骤:

1、引用jquery和tablesorter

	<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
	<script type="text/javascript" src="http://apps.bdimg.com/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
	<script type="text/javascript" src="jquery.tablesorter.js"></script>

这里使用了百度静态资源公共库 参考:[推荐网站前端使用的js库CDN]

2、引用样式:使用了boostrapt。

	<link rel="stylesheet" rev="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap-theme.css" type="text/css" media="screen"/>
<link rel="stylesheet" rev="stylesheet" href="themes/blue/style.css" type="text/css" media="screen"/>

3、本demo写了一个随机数据的函数:

	var lastStudent = 23;
	var limit = 500;
	function appendData() {
		debugger
		var tdTagStart = '<td>';
		var tdTagEnd = '</td>';
		var sex = ['男','女'];
		var major = ['数学','语言'];
		for(var i = 0; i < limit; i++) { 
			var rnd = i % 2;
			var row = '<tr>';	
			row += tdTagStart + '学生' + (lastStudent++) + tdTagEnd;
			row += tdTagStart + major[rnd] + tdTagEnd;
			row += tdTagStart + sex[rnd] + tdTagEnd;
			row += tdTagStart +  randomNumber() + tdTagEnd;
			row += tdTagStart +  randomNumber() + tdTagEnd;
			row += tdTagStart +  randomNumber() + tdTagEnd;
			row += tdTagStart +  randomNumber() + tdTagEnd;
			row += '</tr>';
			$("#large tbody:first").append(row);
		};
		$("table").trigger('update');
		return false;
	}
	function randomNumber() {
		return Math.floor(Math.random()*101)
	}

4、调用随机函数产生数据,并调用tablesorter进行排序:

$(function() {
	appendData();
		$("table").tablesorter({debug: true})
		$("a.append").click(appendData);
	});


是不是很简单?获取更多关于jquery table的相关文章,请点击更多。。。

点击阅读本文所属分类的更多文章: 前端开发 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

抢天猫双11红包
推荐使用阿里云服务器
echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询