dataTable用了很久，今天在此总结一下使用方法以及常用属性的解释。
要试用dataTable，首先你得有个table，html代码如下：
<html> <head> <head lang="zh-CN"> <meta charset="UTF-8"> <link href="static/css/main.css" rel="stylesheet" type="text/css"/> <script type="text/javascript" src="static/js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="static/js/jquery.dataTables.min.js"></script> <script type="text/javascript" src="static/js/jquery.dataTable.custom.js"></script> </head> <body> <div style="padding: 10px;"> <table id="mainTable" class="table"></table> </div> </body> <script type="text/javascript" src="static/js/main.js"></script> </html>
下面是dataTable配置方式以及参数详解：
/*
* 通过jquery ID筛选器绑定dataTable插件
*/
$("#mainTable").dataTable({
/*
* sErrMode
* 错误信息显示方式
* 分别为alert和throw，默认为alert
*/
"sErrMode" : "throw",
/*
* sDom
* 布局方式，可以自定义，布局项，也可以调换布局顺序
* 详解：
* <> 表示一个闭合的div 例如：<> = <div></div>
* <"类名称"> 表示一个class="类名称"的闭合的div 例如： <"rad"> = <div class="rad"></div>
* l 每行显示的记录数
* f 搜索框
* r 加载时的进度条
* t 表格，即实际的<table></table>
* p 分页条
* i 数据信息， 每页显示x条数据、第x条-第x条、供x条数据，默认是英文
*/
"sDom" : '<lf>rt<lpi><"clear">',
/*
* sServerMethod
* 数据获取方式
* POST/GET，默认是GET
*/
"sServerMethod" : "POST",
/*
* bDeferRender
* 是否启用延迟加载：当你使用AJAX数据源时，可以提升速度。
* 默认为false
*/
"bDeferRender" : true,
/*
* sScrollXInner
* 表格宽度
*/
"sScrollXInner" : "100%",
/*
* bScrollCollapse
* 当显示的数据不足以支撑表格的默认的高度时，依然显示纵向的滚动条。(默认是false)
*/
"bScrollCollapse" : false,
/*
* bPaginate
* 是否开启分页,默认是true
*/
"bPaginate" : true,
/*
* bLengthChange
* 是否允许用户，在下拉列表自定义选择分页大小(10, 25, 50 and 100),需要分页支持
* 默认为true
*/
"bLengthChange" : false,
/*
* bFilter
* 是否启用内置搜索功能：可以跨列搜索。
* 默认为true
*/
"bFilter" : true,
/*
* bSort
* 是否开启列排序功能，如果想禁用某一列排序，可以在每列设置使用bSortable参数
*/
"bSort" : true,
/*
* bInfo
* 是否显示表格相关信息：例如翻页信息等。
* 默认值：True
*/
"bInfo" : true,
/*
* bAutoWidth
* 是否启用自动适应列宽
* 默认值：True
*/
"bAutoWidth" : false,
/*
* bStateSave
* 是否开启cookies保存当前状态信息
* 默认值：false
*/
"bStateSave" : false,
/*
* sPaginationType
* 分页方式
* dataTable提供full_numbers和two_button，默认是two_button
* 这里采用的是自定义分页myPagination，详细参见jquery.dataTable.custom.js
*/
"sPaginationType" : "myPagination",
/*
* bProcessing
* 是否显示加载时进度条，默认为false
*/
"bProcessing" : true,
/*
* iDisplayLength
* 默认每页显示多少条记录
*/
"iDisplayLength" : 10,
/*
* aLengthMenu
* 允许用户选择每页显示多少条记录
*/
"aLengthMenu" : [ [ 50, 100, -1 ], [ "50", "100", "所有" ] ],
/*
* oLanguage
* 语言设置，dataTable默认为英文，可再此设置中文显示
* 注意：_MENU_、_START_、_END_、_TOTAL_、_MAX_等通配
*/
"oLanguage" : {
"sLengthMenu" : "每页显示 _MENU_ 条记录",
"sZeroRecords" : "对不起，没有匹配的数据",
"sInfo" : "第 _START_ - _END_ 条 / 共 _TOTAL_ 条数据",
"sInfoEmpty" : "没有匹配的数据",
"sInfoFiltered" : "(数据表中共 _MAX_ 条记录)",
"sProcessing" : "正在加载中...",
"sSearch" : "全文搜索：",
"oPaginate" : {
"sFirst" : "第一页",
"sPrevious" : " 上一页 ",
"sNext" : " 下一页 ",
"sLast" : " 最后一页 "
}
},
/*
* aoColumns
* 数据列
* mData 数据源属性
* sTitle 列头
* bSortable 是否参与排序
* mRender 自定义显示内容，可返回html、字符串
*/
"aoColumns" : [{
"mData" : 'id',
"sTitle" : "ID",
"bSortable" : true
},{
"mData" : 'name',
"sTitle" : "Name",
"bSortable" : true
},{
"mData" : 'age',
"sTitle" : "Age",
"bSortable" : true,
"mRender" : function(data, type, row) {
return data;
}
},{
"mData" : 'work',
"sTitle" : "Work",
"bSortable" : true
}],
/*
* fnInitComplete
* 表格初始化完成后的回调
*/
"fnInitComplete" : function(){
},
/*
* fnDrawCallback
* 表格绘制完成后的回调
*/
"fnDrawCallback" : function(){
},
/*
* 数据源url，ajax请求路径
*/
"sAjaxSource" : "xx/xx/xxx/xxx/xxx"
});
dataTable是靠ajax请求获取数据的，数据格式为json，json数据必须归属与aaData属性：
{
"aaData": [
{
"id": 1,
"name": "rozer",
"age": "20",
"work": "java"
},
{
"id": 2,
"name": "bick",
"age": "20",
"work": "python"
}
]
}
具体的配置已经在上述代码里面描述过，dataTable还有其他试用技巧、自定义样式、api等，将在后续文章中写到。
最后，诚心诚意，附上代码一套，另含dataTable自定义样式一份，以作参考。
注：代码要运行在nginx或apatch上，测试时，将以下属性值修改为你的ajax请求url，其他配置修改，请参见代码注释。
例如： "sAjaxSource" : "static/js/test-data.js"
相关推荐
**jQuery DataTables 知识点详解** `jQuery DataTables` 是一个强大且功能丰富的JavaScript库，用于将HTML表格转化为交互式的数据展示工具。这个库基于jQuery框架，提供了数据排序、搜索、分页以及多种自定义功能，...
首先，要使用DataTable，需要确保你的项目包含了jQuery库以及DataTable的核心JavaScript文件`jquery.dataTables.min.js`。jQuery是DataTable的基础，它提供了DOM操作和事件处理等核心功能。在HTML页面中，你需要引入...
《jQuery DataTables插件详解与应用》 jQuery DataTables 是一款功能强大的JavaScript表格插件，它基于jQuery库，能够将HTML表格转化为具有高级特性的数据展示工具，如排序、搜索、分页等。"jquery.dataTables包....
jQuery DataTables是一个功能强大的jQuery插件，它用于对HTML表格进行增强，使之支持排序、搜索、分页和自定义显示等功能。使用jQuery DataTables可以极大提升表格数据的交互性和用户体验。下面我们将详细介绍jQuery...
《jQuery DataTables及相关CSS详解》 在Web开发中，数据展示和管理是一项常见的任务，而jQuery DataTables插件为此提供了一种高效且功能丰富的解决方案。本文将深入探讨jQuery DataTables及其相关的CSS，以及如何...
在HTML中，首先需要一个基础的`<table>`元素，然后通过引用jQuery库和DataTable插件的JavaScript及CSS文件来初始化表格。初始化通常通过JavaScript代码完成，例如： ```javascript $(document).ready(function() ...
**jQuery表格插件DataTables详解** DataTables是jQuery的一个强大插件，专为HTML表格提供高级功能和交互性。这个插件的核心理念是基于渐进增强的原理，即在基本HTML表格的基础上添加丰富的功能和控制，使得数据展示...
《自适应PC手机端的jQuery可编辑表格代码详解》 在现代网页开发中，交互性和灵活性是提升用户体验的关键因素。jQuery作为一个强大的JavaScript库，为开发者提供了丰富的功能和简便的API，使得网页动态效果的实现变...
### 一、jQuery DataTables基础 1. **安装与引入**：首先，你需要在项目中引入jQuery库和DataTables的相关CSS及JS文件。这些资源可以从官方网站（https://datatables.net/download/）获取，或者通过CDN链接直接引入...
通常，基础使用仅需引入jQuery库、DataTables核心JS文件和CSS文件。如果需要特定样式，记得也引入对应的样式资源。 ### 数据绑定 DataTables支持三种数据绑定方法，使你可以根据项目需求灵活地加载和显示数据： 1...
- 默认配置：只需在文档准备就绪时调用 `.dataTable()` 方法，如 `$(document).ready(function() { $('#example').dataTable(); })` - 基础属性配置：通过传递参数对象设置各种功能，例如 `bPaginate`, `...
**DataTables高级初始化详解** DataTables是一款强大的JavaScript库，它为HTML表格提供了丰富的功能和定制化选项，包括排序、搜索、分页等。在基础初始化之上，DataTables提供了高级初始化功能，让开发者能够更深入...
通常包括CSS样式文件和JavaScript脚本，如`jquery.dataTables.js`和`jquery.dataTables.editable.js`。同时，为了实现编辑功能，可能还需要依赖其他库，例如Ajax处理库如jQuery的`$.ajax()`方法，或者是用于编辑验证...
**Yahoo JavaScript库 YUI源码详解** Yahoo User Interface (YUI) 是Yahoo公司推出的一款强大的JavaScript库，旨在帮助开发者构建高性能、可维护的Web应用程序。作为一款免费且开源的工具，YUI为开发者提供了丰富的...
了解如何使用DataSet、DataTable、DataAdapter等对象进行数据操作。 5. 用户界面设计：使用HTML、CSS和JavaScript构建用户友好的界面。可能涉及到Bootstrap、jQuery等前端库。 6. 页面生命周期和事件处理：在ASP...
2. 数据持久化：使用ADO.NET的DataSet、DataTable或Entity Framework等工具，将留言数据存储在数据库中，确保数据安全。 3. 数据检索与展示：后台查询数据库，获取留言信息，并通过ASP.NET控件如GridView或Repeater...