推荐一个jquery排序分页插件

87281248 2011-08-11

DATATABLES

致力于使用简单的页面客户端排序,分页jquery插件。推荐这个是因为自己用的时候相当容易。最简单使用如下:

1.把你的table加个ID

2.确保你的table有thead和tbody分别放th和td

3.添加javascriptlab

=javascript_include_tag "http://www.datatables.net/release-datatables/media/js/jquery.dataTables.js"
=stylesheet_link_tag "http://www.datatables.net/release-datatables/media/css/demo_table.css"
=stylesheet_link_tag "http://www.datatables.net/release-datatables/media/css/demo_page.css"

4.添加jquery处理

$(document).ready(function() {
	$('#example').dataTable();
} );

5.如果,你的字段里有数字的话,因为有数字的时候,默认js是安装string排的

需要修改如下:

注明,两种写法只用一个就可以,都是表明对应的字段类型的。

详细参考:

http://datatables.net/usage/columns#sType

/* Using aoColumnDefs */
$(document).ready(function() {
	$('#example').dataTable( {
		"aoColumnDefs": [ 
			{ "sType": "html", "aTargets": [ 0 ] }
		]
	} );
} );

/* Using aoColumns */
$(document).ready(function() {
	$('#example').dataTable( {
		"aoColumns": [ 
			{ "sType": "html" },
			null,
			null,
			null,
			null
		]
	} );
} );

效果演示demo

功能列表:

引用

Variablelengthpagination

On-the-flyfiltering

Sortingwithdatatypedetection

Smarthandlingofcolumnwidths

ThemeablebyCSS

Hiddencolumns

Extremelycustomisableandflexible

Fullyinternationalisable

Dynamiccreationoftables

Multi-columnsorting

CustomDOMpositioning

Singlecolumnfiltering

Alternativepaginationtypes

Non-destructiveDOMinteraction

Ajaxautoloadingofdata

Typedetectionfordynamicdata(andpluginsupport)

Statesaving

APIplug-inmechanism

It'sfree!

相关推荐

Web全栈笔记 / 0评论 2020-06-15