jQuery表格排序插件代码

来源:https://www.sucaihuo.com/js/2047.html 2017-05-27 18:54浏览(457) 收藏

简单的jQuery表格排序插件代码,table表格按数字大小排序,按英文字母排序网页特效。
jQuery表格排序插件代码
分类:其它特效 > table表格 难易:初级
查看演示 下载资源 下载积分: 20 积分

js代码

<script type="text/javascript" src="js/jquery-1.9.0.min.js" ></script>
<script type="text/javascript" src="js/jquery.tablesort.js" ></script>
<script type="text/javascript">
$(function() {

	var table = $('<table class="ex-2"></table>');
	table.append('<thead><tr><th class="number">Number</th></tr></thead>');
	var tbody = $('<tbody></tbody>');
	for (var i = 0; i < 20; i++) {
		tbody.append('<tr><td>' + Math.floor(Math.random() * 100) + '</td></tr>');
	}
	table.append(tbody);
	
	$('.example.ex-2').append(table);

	$('table').tablesort().data('tablesort');
	
	$('thead th.number').data('sortBy', function(th, td, sorter) {
		return parseInt(td.text(), 10);
	});
	//Sorting indicator example
	$('table.ex-2').on('tablesort:start', function(event, tablesort) {
		$('table.ex-2 tbody').addClass("disabled");
		$('.ex-2 th.number').removeClass("sorted").text('Sorting..');
	});
	$('table.ex-2').on('tablesort:complete', function(event, tablesort) {
		$('table.ex-2 tbody').removeClass("disabled");
		$('.ex-2 th.number').text('Number');
	});
			
});
	
</script>
标签: 表格排序
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2