DataTables是一个jQuery的表格插件。这是一个高度灵活的工具,依据的基础逐步增强,这将增加先进的互动控制,支持任何HTML表格。主要特点:
- 自动分页处理
- 即时表格数据过滤
- 数据排序以及数据类型自动检测
- 自动处理列宽度
- 可通过CSS定制样式
- 支持隐藏列
- 易用
- 可扩展性和灵活性
- 国际化
- 动态创建表格
- 免费的
学习Datatable准备:
下载插件包http://www.datatables.net/download/
开始
引入CSS文件和JS文件
--------------------------------------------------------------------------
<style type="text/css" title="currentStyle">
@import "DataTables-1.8.1/media/css/demo_page.css";
@import "DataTables-1.8.1/media/css/demo_table.css";
@import "DataTables-1.8.1/media/css/demo_table_jui.css";
</style>
<script type="text/javascript" language="javascript" src="DataTables-1.8.1/media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="DataTables-1.8.1/media/js/jquery.dataTables.js"></script>
--------------------------------------------------------------------------
其中的文件路径根据自己的项目而改变
下面就是正题了(个人的源码)
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Datatables</title>
<style type="text/css" title="currentStyle">
@import "DataTables-1.8.1/media/css/demo_page.css";
@import "DataTables-1.8.1/media/css/demo_table.css";
@import "DataTables-1.8.1/media/css/demo_table_jui.css";
</style>
<script type="text/javascript" language="javascript" src="DataTables-1.8.1/media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="DataTables-1.8.1/media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#example").dataTable({
// "bPaginate": true, //开关,是否显示分页器
// "bInfo": true, //开关,是否显示表格的一些信息
// "bFilter": true, //开关,是否启用客户端过滤器
// "sDom": "<>lfrtip<>",
// "bAutoWith": false,
// "bDeferRender": false,
// "bJQueryUI": false, //开关,是否启用JQueryUI风格
// "bLengthChange": true, //开关,是否显示每页大小的下拉框
// "bProcessing": true,
// "bScrollInfinite": false,
// "sScrollY": "800px", //是否开启垂直滚动,以及指定滚动区域大小,可设值:'disabled','2000px'
// "bSort": true, //开关,是否启用各列具有按列排序的功能
// "bSortClasses": true,
// "bStateSave": false, //开关,是否打开客户端状态记录功能。这个数据是记录在cookies中的,打开了这个记录后,即使刷新一次页面,或重新打开浏览器,之前的状态都是保存下来的-------当值为true时aoColumnDefs不能隐藏列
// "sScrollX": "50%", //是否开启水平滚动,以及指定滚动区域大小,可设值:'disabled','2000%'
// "aaSorting": [[0, "asc"]],
// "aoColumnDefs": [{ "bVisible": false, "aTargets": [0]}]//隐藏列
// "sDom": '<"H"if>t<"F"if>',
"bAutoWidth": false, //自适应宽度
"aaSorting": [[1, "asc"]],
"sPaginationType": "full_numbers",
"oLanguage": {
"sProcessing": "正在加载中......",
"sLengthMenu": "每页显示 _MENU_ 条记录",
"sZeroRecords": "对不起,查询不到相关数据!",
"sEmptyTable": "表中无数据存在!",
"sInfo": "当前显示 _START_ 到 _END_ 条,共 _TOTAL_ 条记录",
"sInfoFiltered": "数据表中共为 _MAX_ 条记录",
"sSearch": "搜索",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "上一页",
"sNext": "下一页",
"sLast": "末页"
}
} //多语言配置
});
});
</script>
</head>
<body>
<div id="dt_example">
<div id="container" align="center">
<div id="demo">
<table cellpadding="0" border="2" cellspacing="0" border="0" id="example" class="display">
<thead>
<tr>
<th>产品编号</th>
<th>产品名称</th>
<th>产品价格</th>
<th>产品状态</th>
</tr>
</thead>
<tbody>
<tr class="gradeX">
<td>1</td>
<td>产品1</td>
<td class="center">100</td>
<td class="center">正常</td>
</tr>
<tr class="gradeA">
<td>2</td>
<td>产品2</td>
<td class="center">2000</td>
<td class="center">不正常</td>
</tr>
<tr class="gradeC">
<td>3</td>
<td>产品3</td>
<td class="center">3890</td>
<td class="center">正常</td>
</tr>
<tr class="gradeX">
<td>1</td>
<td>产品1</td>
<td class="center">100</td>
<td class="center">正常</td>
</tr>
<tr class="gradeA">
<td>2</td>
<td>产品2</td>
<td class="center">2000</td>
<td class="center">不正常</td>
</tr>
<tr class="gradeC">
<td>3</td>
<td>产品3</td>
<td class="center">3890</td>
<td class="center">正常</td>
</tr>
<tr class="gradeX">
<td>1</td>
<td>产品1</td>
<td class="center">100</td>
<td class="center">正常</td>
</tr>
<tr class="gradeA">
<td>2</td>
<td>产品2</td>
<td class="center">2000</td>
<td class="center">不正常</td>
</tr>
<tr class="gradeC">
<td>3</td>
<td>产品3</td>
<td class="center">3890</td>
<td class="center">正常</td>
</tr>
<tr class="gradeX">
<td>1</td>
<td>产品1</td>
<td class="center">100</td>
<td class="center">正常</td>
</tr>
<tr class="gradeA">
<td>2</td>
<td>产品2</td>
<td class="center">2000</td>
<td class="center">不正常</td>
</tr>
<tr class="gradeC">
<td>3</td>
<td>产品3</td>
<td class="center">3890</td>
<td class="center">正常</td>
</tr>
<tr class="gradeX">
<td>1</td>
<td>产品1</td>
<td class="center">100</td>
<td class="center">正常</td>
</tr>
<tr class="gradeA">
<td>2</td>
<td>产品2</td>
<td class="center">2000</td>
<td class="center">不正常</td>
</tr>
<tr class="gradeC">
<td>3</td>
<td>产品3</td>
<td class="center">3890</td>
<td class="center">正常</td>
</tr>
<tr class="gradeX">
<td>1</td>
<td>产品1</td>
<td class="center">100</td>
<td class="center">正常</td>
</tr>
<tr class="gradeA">
<td>2</td>
<td>产品2</td>
<td class="center">2000</td>
<td class="center">不正常</td>
</tr>
<tr class="gradeC">
<td>3</td>
<td>产品3</td>
<td class="center">3890</td>
<td class="center">正常</td>
</tr>
<tr class="gradeA">
<td>2</td>
<td>产品2</td>
<td class="center">2000</td>
<td class="center">不正常</td>
</tr>
<tr class="gradeC">
<td>3</td>
<td>产品3</td>
<td class="center">3890</td>
<td class="center">正常</td>
</tr>
<tr class="gradeX">
<td>1</td>
<td>产品1</td>
<td class="center">100</td>
<td class="center">正常</td>
</tr>
<tr class="gradeA">
<td>2</td>
<td>产品2</td>
<td class="center">2000</td>
<td class="center">不正常</td>
</tr>
<tr class="gradeC">
<td>3</td>
<td>产品3</td>
<td class="center">3890</td>
<td class="center">正常</td>
</tr>
<tr class="gradeX">
<td>1</td>
<td>产品1</td>
<td class="center">100</td>
<td class="center">正常</td>
</tr>
<tr class="gradeA">
<td>2</td>
<td>产品2</td>
<td class="center">2000</td>
<td class="center">不正常</td>
</tr>
<tr class="gradeC">
<td>3</td>
<td>产品3</td>
<td class="center">3890</td>
<td class="center">正常</td>
</tr>
<tr class="gradeX">
<td>1</td>
<td>产品1</td>
<td class="center">100</td>
<td class="center">正常</td>
</tr>
<tr class="gradeA">
<td>2</td>
<td>产品2</td>
<td class="center">2000</td>
<td class="center">不正常</td>
</tr>
<tr class="gradeC">
<td>3</td>
<td>产品3</td>
<td class="center">3890</td>
<td class="center">正常</td>
</tr>
<tr class="gradeX">
<td>1</td>
<td>产品1</td>
<td class="center">100</td>
<td class="center">正常</td>
</tr>
<tr class="gradeA">
<td>2</td>
<td>产品2</td>
<td class="center">2000</td>
<td class="center">不正常</td>
</tr>
<tr class="gradeC">
<td>3</td>
<td>产品3</td>
<td class="center">3890</td>
<td class="center">正常</td>
</tr>
<tr class="gradeX">
<td>1</td>
<td>产品1</td>
<td class="center">100</td>
<td class="center">正常</td>
</tr>
<tr class="gradeA">
<td>2</td>
<td>产品2</td>
<td class="center">2000</td>
<td class="center">不正常</td>
</tr>
<tr class="gradeC">
<td>3</td>
<td>产品3</td>
<td class="center">3890</td>
<td class="center">正常</td>
</tr>
<tr class="gradeA">
<td>2</td>
<td>产品2</td>
<td class="center">2000</td>
<td class="center">不正常</td>
</tr>
<tr class="gradeC">
<td>3</td>
<td>产品3</td>
<td class="center">3890</td>
<td class="center">正常</td>
</tr>
<tr class="gradeX">
<td>1</td>
<td>产品1</td>
<td class="center">100</td>
<td class="center">正常</td>
</tr>
<tr class="gradeA">
<td>2</td>
<td>产品2</td>
<td class="center">2000</td>
<td class="center">不正常</td>
</tr>
<tr class="gradeC">
<td>3</td>
<td>产品3</td>
<td class="center">3890</td>
<td class="center">正常</td>
</tr>
<tr class="gradeX">
<td>1</td>
<td>产品1</td>
<td class="center">100</td>
<td class="center">正常</td>
</tr>
<tr class="gradeA">
<td>2</td>
<td>产品2</td>
<td class="center">2000</td>
<td class="center">不正常</td>
</tr>
<tr class="gradeC">
<td>3</td>
<td>产品3</td>
<td class="center">3890</td>
<td class="center">正常</td>
</tr>
<tr class="gradeX">
<td>1</td>
<td>产品1</td>
<td class="center">100</td>
<td class="center">正常</td>
</tr>
<tr class="gradeA">
<td>2</td>
<td>产品2</td>
<td class="center">2000</td>
<td class="center">不正常</td>
</tr>
<tr class="gradeC">
<td>3</td>
<td>产品3</td>
<td class="center">3890</td>
<td class="center">正常</td>
</tr>
<tr class="gradeX">
<td>1</td>
<td>产品1</td>
<td class="center">100</td>
<td class="center">正常</td>
</tr>
<tr class="gradeA">
<td>2</td>
<td>产品2</td>
<td class="center">2000</td>
<td class="center">不正常</td>
</tr>
<tr class="gradeC">
<td>3</td>
<td>产品3</td>
<td class="center">3890</td>
<td class="center">正常</td>
</tr>
<tr class="gradeX">
<td>1</td>
<td>产品1</td>
<td class="center">100</td>
<td class="center">正常</td>
</tr>
<tr class="gradeA">
<td>2</td>
<td>产品2</td>
<td class="center">2000</td>
<td class="center">不正常</td>
</tr>
<tr class="gradeC">
<td>3</td>
<td>产品3</td>
<td class="center">3890</td>
<td class="center">正常</td>
</tr>
<tr class="gradeX">
<td>1</td>
<td>产品1</td>
<td class="center">100</td>
<td class="center">正常</td>
</tr>
<tr class="gradeA">
<td>2</td>
<td>产品2</td>
<td class="center">2000</td>
<td class="center">不正常</td>
</tr>
<tr class="gradeC">
<td>3</td>
<td>产品3</td>
<td class="center">3890</td>
<td class="center">正常</td>
</tr>
<tr class="gradeX">
<td>1</td>
<td>产品1</td>
<td class="center">100</td>
<td class="center">正常</td>
</tr>
<tr class="gradeA">
<td>2</td>
<td>产品2</td>
<td class="center">2000</td>
<td class="center">不正常</td>
</tr>
<tr class="gradeC">
<td>3</td>
<td>产品3</td>
<td class="center">3890</td>
<td class="center">正常</td>
</tr>
<tr class="gradeX">
<td>1</td>
<td>产品1</td>
<td class="center">100</td>
<td class="center">正常</td>
</tr>
<tr class="gradeA">
<td>2</td>
<td>产品2</td>
<td class="center">2000</td>
<td class="center">不正常</td>
</tr>
<tr class="gradeC">
<td>3</td>
<td>产品3</td>
<td class="center">3890</td>
<td class="center">正常</td>
</tr>
<tr class="gradeX">
<td>1</td>
<td>产品1</td>
<td class="center">100</td>
<td class="center">正常</td>
</tr>
<tr class="gradeA">
<td>2</td>
<td>产品2</td>
<td class="center">2000</td>
<td class="center">不正常</td>
</tr>
<tr class="gradeC">
<td>3</td>
<td>产品3</td>
<td class="center">3890</td>
<td class="center">正常</td>
</tr>
<tr class="gradeX">
<td>1</td>
<td>产品1</td>
<td class="center">100</td>
<td class="center">正常</td>
</tr>
<tr class="gradeA">
<td>2</td>
<td>产品2</td>
<td class="center">2000</td>
<td class="center">不正常</td>
</tr>
<tr class="gradeC">
<td>3</td>
<td>产品3</td>
<td class="center">3890</td>
<td class="center">正常</td>
</tr>
<tr class="gradeX">
<td>1</td>
<td>产品1</td>
<td class="center">100</td>
<td class="center">正常</td>
</tr>
<tr class="gradeA">
<td>2</td>
<td>产品2</td>
<td class="center">2000</td>
<td class="center">不正常</td>
</tr>
<tr class="gradeC">
<td>3</td>
<td>产品3</td>
<td class="center">3890</td>
<td class="center">正常</td>
</tr>
<tr class="gradeX">
<td>1</td>
<td>产品1</td>
<td class="center">100</td>
<td class="center">正常</td>
</tr>
<tr class="gradeA">
<td>2</td>
<td>产品2</td>
<td class="center">2000</td>
<td class="center">不正常</td>
</tr>
<tr class="gradeC">
<td>3</td>
<td>产品3</td>
<td class="center">3890</td>
<td class="center">正常</td>
</tr>
<tr class="gradeX">
<td>1</td>
<td>产品1</td>
<td class="center">100</td>
<td class="center">正常</td>
</tr>
<tr class="gradeA">
<td>2</td>
<td>产品2</td>
<td class="center">2000</td>
<td class="center">不正常</td>
</tr>
<tr class="gradeC">
<td>3</td>
<td>产品3</td>
<td class="center">3890</td>
<td class="center">正常</td>
</tr>
<tr class="gradeX">
<td>1</td>
<td>产品1</td>
<td class="center">100</td>
<td class="center">正常</td>
</tr>
<tr class="gradeA">
<td>2</td>
<td>产品2</td>
<td class="center">2000</td>
<td class="center">不正常</td>
</tr>
<tr class="gradeC">
<td>3</td>
<td>产品3</td>
<td class="center">3890</td>
<td class="center">正常</td>
</tr>
<tr class="gradeX">
<td>1</td>
<td>产品1</td>
<td class="center">100</td>
<td class="center">正常</td>
</tr>
<tr class="gradeA">
<td>2</td>
<td>产品2</td>
<td class="center">2000</td>
<td class="center">不正常</td>
</tr>
<tr class="gradeC">
<td>3</td>
<td>产品3</td>
<td class="center">3890</td>
<td class="center">正常</td>
</tr>
<tr class="gradeX">
<td>1</td>
<td>产品1</td>
<td class="center">100</td>
<td class="center">正常</td>
</tr>
<tr class="gradeA">
<td>2</td>
<td>产品2</td>
<td class="center">2000</td>
<td class="center">不正常</td>
</tr>
<tr class="gradeC">
<td>3</td>
<td>产品3</td>
<td class="center">3890</td>
<td class="center">正常</td>
</tr>
<tr class="gradeX">
<td>1</td>
<td>产品1</td>
<td class="center">100</td>
<td class="center">正常</td>
</tr>
<tr class="gradeA">
<td>2</td>
<td>产品2</td>
<td class="center">2000</td>
<td class="center">不正常</td>
</tr>
<tr class="gradeC">
<td>3</td>
<td>产品3</td>
<td class="center">3890</td>
<td class="center">正常</td>
</tr>
<tr class="gradeX">
<td>1</td>
<td>产品1</td>
<td class="center">100</td>
<td class="center">正常</td>
</tr>
<tr class="gradeA">
<td>2</td>
<td>产品2</td>
<td class="center">2000</td>
<td class="center">不正常</td>
</tr>
<tr class="gradeC">
<td>3</td>
<td>产品3</td>
<td class="center">3890</td>
<td class="center">正常</td>
</tr>
<tr class="gradeX">
<td>1</td>
<td>产品1</td>
<td class="center">100</td>
<td class="center">正常</td>
</tr>
<tr class="gradeA">
<td>2</td>
<td>产品2</td>
<td class="center">2000</td>
<td class="center">不正常</td>
</tr>
<tr class="gradeC">
<td>3</td>
<td>产品3</td>
<td class="center">3890</td>
<td class="center">正常</td>
</tr>
<tr class="gradeX">
<td>1</td>
<td>产品1</td>
<td class="center">100</td>
<td class="center">正常</td>
</tr>
<tr class="gradeA">
<td>2</td>
<td>产品2</td>
<td class="center">2000</td>
<td class="center">不正常</td>
</tr>
<tr class="gradeC">
<td>3</td>
<td>产品3</td>
<td class="center">3890</td>
<td class="center">正常</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
相关推荐
Datatables是一款jquery表格插件。它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能,包括排序、分页、扩展、主题、国际化等
DataTables - jQuery表格插件
DataTables是提供了大量特性的强大jQuery表格插件。例如:你可以自动轻松筛选、Ajax预读取数据、分页、列排序、高亮排序列、扩展插件支持、使用CSS或jQuery UI ThemeRoller 定制主题和完整文档。
DataTables是一个jQuery的表格插件。这是一个高度灵活的工具,依据的基础逐步增强,这将增加先进的互动控制,支持任何HTML表格。
主要介绍了jQuery表格插件datatables用法,包括分页、排序等功能,是jQuery表格插件datatables比较基础的部分知识,需要的朋友可以参考下
主要介绍了jQuery表格插件datatables用法汇总,DataTables是一个非常强大的表格插件,感兴趣的小伙伴们可以参考一下
主要介绍了jQuery表格插件datatables用法,包括分页、排序等功能,是jQuery表格插件datatables比较基础的部分知识,需要的朋友可以参考下
DataTables是一个jQuery插件,能够让HTML表格很方便地实现分页、过滤和多栏排序等功能。DataTables可以使用本身自带的CSS样式,但还可以按自己的需要自定义CSS样式。它具有以下特征: •自适应栏宽 •可保存表格...
DataTables-1.7.6.zipDataTables-1.7.6.zipDataTables-1.7.6.zipDataTables-1.7.6.zipDataTables-1.7.6.zipDataTables-1.7.6.zipDataTables-1.7.6.zipDataTables-1.7.6.zipDataTables-1.7.6.zipDataTables-1.7.6.zip
Spring Boot+MybatisPlus使用JQuery DataTables表格插件展示数据、实现分页和模糊查询等功能
jquery 插件 DataTables-1.8.2 flexigrid-1.1 个人比较喜欢datatables
jquery1.6 datatables插件1.8 附带例子 API等 WEB页面显示列表,课排序 列过滤 隐藏列等功能
大多数前端er都把网页中的table标签替换为div,主要就是因为div要...DataTables是提供了大量特性的强大jQuery表格插件。例如:你可以自动轻松筛选、Ajax预读取数据、分页、列排序、高亮排序列、扩展插件支持、使用CSS或
JQuery DataTables 插件是一个出色的客户端插件,它增强了客户端 HTML 表格并添加了各种功能,例如分页、过滤、排序等。它还具有良好的 API,允许您自定义插件,例如在标题中添加单独的列过滤或页脚。 您可能需要的...
漂亮的基于jQuery的表格插件,支持过滤,分页,可以定制样式。
主要介绍了jQuery+datatables插件实现ajax加载数据与增删改查功能,涉及jQuery结合datatables插件针对页面表格实现数据加载及增删改查等相关操作技巧,需要的朋友可以参考下
Datatables是一款jQuery表格插件,可以表头排序,内容过滤查询,功能很强大!