本文共 1587 字，大约阅读时间需要 5 分钟。

DATATABLES 致力于使用简单的页面客户端排序，分页jquery插件。推荐这个是因为自己用的时候相当容易。最简单使用如下： 1. 把你的table加个ID 2. 确保你的table有thead和tbody分别放th和td 3. 添加javascript lab

=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排的 需要修改如下： 注明，两种写法只用一个就可以，都是表明对应的字段类型的。 详细参考： [url]http://datatables.net/usage/columns#sType[/url]

/* 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 		] 	} ); } );

[url=http://datatables.net/release-datatables/examples/basic_init/zero_config.html]效果演示demo[/url] 功能列表： [quote] Variable length pagination On-the-fly filtering Sorting with data type detection Smart handling of column widths Themeable by CSS Hidden columns Extremely customisable and flexible Fully internationalisable Dynamic creation of tables Multi-column sorting Custom DOM positioning Single column filtering Alternative pagination types Non-destructive DOM interaction Ajax auto loading of data Type detection for dynamic data (and plugin support) State saving API plug-in mechanism It's free! [/quote]

转载地址：https://blog.csdn.net/horace_lee/article/details/83984928 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！