使用jquery dataTable
来源:互联网 发布:linux中的ll是什么意思 编辑:程序博客网 时间:2024/06/05 10:02
jQuery 的插件 dataTables 是一个优秀的表格插件,提供了针对表格的排序、浏览器分页、服务器分页、筛选、格式化等功能。dataTables 的网站上也提供了大量的演示和详细的文档进行说明,为了方便学习使用,这里一步一步进行说明。
首先,需要到 dataTables 的网站 http://www.datatables.net/ 下载这个脚本库,
目前最新的版本是 1.8.2,下载的压缩包中使用的 jQuery 是 1.4.4 。现在 jQuery1.5.1 已经发布,所以,这里使用最新的 jQuery 1.5.1 。
然后,在网页中先加入 jQuery 的引用,然后,加入 dataTables 的引用。
引入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>
--------------------------------------------------------------------------
-----------最简单的方式:
$(document).ready(function() {
$("#example").dataTable();
});
----------也可以自己定义各属性:
<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>
----------------页面:
对于 dataTables 来说,表格必须通过 thead 和 tbody 进行说明,如下所示,
<
table
cellpadding
=
"0"
cellspacing
=
"0"
border
=
"0"
class
=
"display"
id
=
"example"
>
<
thead
>
<
tr
>
<
th
>
Rendering engine
</
th
>
<
th
>
Browser
</
th
>
<
th
>
Platform(s)
</
th
>
<
th
>
Engine version
</
th
>
<
th
>
CSS grade
</
th
>
</
tr
>
</
thead
>
<
tbody
>
<
tr
class
=
"odd gradeX"
>
<
td
>
Trident
</
td
>
<
td
>
Internet Explorer 4.0
</
td
>
<
td
>
Win 95+
</
td
>
<
td
class
=
"center"
>
4
</
td
>
<
td
class
=
"center"
>
X
</
td
>
</
tr
>
如果没有 thead 将会报错。
最为简单的使用方式,就是零配置的方式。
/*
* Example init
*/
$(document).ready(
function
(){
$(
'#example'
).dataTable();
});
以下是在进行dataTable绑定处理时候可以附加的参数:
DataTable支持如下回调函数
回调函数名称参数返回值默认功能fnCookieCallback1.string: Name of the cookie defined by DataTables 2.object: Data to be stored in the cookie 3.string: Cookie expires string 4.string: Path of the cookie to setstring: cookie formatted string (which should be encoded by using encodeURIComponent())null当每次cookies改变时,会触发这个函数调用fnDrawCallback无无无在每次table被draw完后调用,至于做什么就看着办吧fnFooterCallback1.node : "TR" element for the footer 2.array array strings : Full table data (as derived from the original HTML) 3.int : Index for the current display starting point in the display array< 4.int : Index for the current display ending point in the display array 5.array int : Index array to translate the visual position to the full data array无无用于在每次重画的时候修改表格的脚部fnFormatNumber1.int : number to be formattedString : formatted string for DataTables to show the number有默认的用于在大数字上,自动加入一些逗号,分隔开fnHeaderCallback1.node : "TR" element for the header 2.array array strings : Full table data (as derived from the original HTML) 3.int : Index for the current display starting point in the display array 4.int : Index for the current display ending point in the display array 5.array int : Index array to translate the visual position to the full data array无无用于在每次draw发生时,修改table的headerfnInfoCallback1.object: DataTables settings object 2.int: Starting position in data for the draw 3.int: End position in data for the draw 4.int: Total number of rows in the table (regardless of filtering) 5.int: Total number of rows in the data set, after filtering 6.string: The string that DataTables has formatted using it's own rulesstring: The string to be displayed in the information element.无用于传达table信息fnInitComplete1.object:oSettings - DataTables settings object无无表格初始化完成后调用fnPreDrawCallback1.object:oSettings - DataTables settings objectBoolean无用于在开始绘制之前调用,返回false的话,会阻止draw事件发生;返回其它值,draw可以顺利执行fnRowCallback1.node : "TR" element for the current row 2.array strings : Raw data array for this row (as derived from the original HTML) 3.int : The display index for the current table draw 4.int : The index of the data in the full list of rows (after filtering)node : "TR" element for the current row无当创建了行,但还未绘制到屏幕上的时候调用,通常用于改变行的class风格fnServerData1.string: HTTP source to obtain the data from (i.e. sAjaxSource) 2.array objects: A key/value pair object containing the data to send to the server 3.function: Function to be called on completion of the data get process that will draw the data on the page.void$.getJSON用于替换默认发到服务端的请求操作fnStateLoadCallback1.object:oSettings - DataTables settings object 2.object:oData - Object containing information retrieved from the state saving cookie which should be restored. For the exact properties please refer to the DataTables code.Boolean - false if the state should not be loaded, true otherwise无在cookies中的数据被加载前执行,可以方便地修改这些数据fnStateSaveCallback1.object:oSettings - DataTables settings object 2.String:sValue - a JSON string (without the final closing brace) which should be stored in the state saving cookie.String - the full string that should be used to save the state无在状态数据被存储到cookies前执行,可以方便地做一些预操作
表格的效果
注意,红框表示了四个默认的设置效果,分别用来选择每页的行数,表格的过滤器,表格的信息和换页。
此时,使用了几个默认的参数设置。在 dataTables 中,参数名称的前缀用来说明参数的数据类型,很明显,b 表示布尔类型,i 表示整数类型,s 表示字符串类型。
- bPaginate: 是否分页,默认为 true,分页
- iDisplayLength : 每页的行数,每页默认数量:10
- sPaginationType: 分页样式,支持两种内置方式,two_button 和 full_numbers, 默认使用 two_button。
- bLengthChange : 是否允许用户通过一个下拉列表来选择分页后每页的行数。行数为 10,25,50,100。这个设置需要 bPaginate 支持。默认为 true。
- bFilter: 启用或禁止数据过滤,默认为 true。 注意,如果使用过滤功能,但是希望关闭默认的过滤输入框,应使用 sDom
- bInfo: 允许或者禁止表信息的显示,默认为 true,显示信息。
我们也可以通过传递一个初始化参数对象来改变这些设置。例如,下面的例子将每页的行数设置为 20 行。
$(
function
() {
$(
"#example"
).dataTable(
{
iDisplayLength: 20
}
);
});
- 使用jquery dataTable
- 使用jquery dataTable
- 使用jquery dataTable
- jquery datatable使用
- jQuery dataTable使用
- jQuery dataTable使用详解
- 使用jquery dataTable
- Jquery datatable使用示例
- Jquery.DataTable使用
- JQuery DataTable 使用教程
- jquery.datatable.js库使用
- jQuery dataTable使用详解 141105
- jquery datatable插件使用分享
- Jquery datatable的详细使用
- Jquery.DataTable的基本使用
- java中jquery datatable表格的使用
- [总结] jQuery的datatable插件 使用 问题
- Jquery DataTable插件使用(1)
- Eclipse中的快捷键功能
- 敏捷开发测试
- adb server is out of date. kill.....解决办法
- VNC Server in Virtual Mode does not start correctly on Ubuntu 12.04
- 我的儒家修身
- 使用jquery dataTable
- 错装信封问题
- svn出现svn: PROPFIND request failed。。。
- JavaScript[对象.属性]集锦
- 基于CloudStack云管理平台的关键技术研究与应用
- 【§热门电脑主题下载之蝴蝶引路win7主题§】
- 一段比较实用的JS导航条显隐例子 .
- centos5.8-64bit tomcat+mysql生产环境可能会遇到的问题
- 一个电力svg图形浏览程序