相关文章
更多最近更新
更多jQuery的表格插件datatables学习总结（一）
2019-03-23 11:30|来源: 未知
DataTables是一个jQuery的表格插件。这是一个高度灵活的工具，依据的基础逐步增强，这将增加先进的互动控制，支持任何HTML表格。官方网站及其下载：http:/www.datatables.net
下载的1.6版本里面内容很全面,现在好像是到1.9这个版本了。
DataTables的特点：
自动分页处理
即时表格数据过滤
数据排序以及数据类型自动检测
自动处理列宽度
可通过CSS定制样式
支持隐藏列
易用
可扩展性和灵活性
国际化
动态创建表格
免费的
效果：
使用：
首先。
<title>DataTables example</title> <style type="text/css" title="currentStyle"> @import "../../media/css/demo_page.css"; @import "../../media/css/demo_table.css"; @import "../examples_support/themes/smoothness/jquery-ui-1.7.2.custom.css"; </style> <script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script> <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script> <script type="text/javascript" charset="utf-8">引入js和css文件。可以在demo里复制。注意路径地址。
第二步
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#example').dataTable( {
"oLanguage": {
"sUrl": "/SSS/dataTables/de_DE.txt"
},
"bStateSave": true,
//"bJQueryUI": true, //使用jqueryui 。我用的时候显示的不是很好
"sPaginationType": "full_numbers"//分页
} );
} );
</script>
</head>
<body id="dt_example">//此处为body的id
<div id="container" align="center">//*div 里是 table ，table包括thead等，最好按此格式写*
<h1>物品种类管理</h1>
<div id="demo">
<table cellpadding="5" cellspacing="0" border="1" class="display" id="example" align="center">//id 别忘了
<thead>
<tr>
<th>物品编号</th>
<th>物品名称</th>
<th>物品单位</th>
<th>编辑状态</th>
<th>随便</th>
</tr>
</thead>
<tr class="gradeX">//此处可以是gradeA ,gradeX 等，但是gradeB 隔行换色 效果很好
<td>Trident</td>
<td>Internet
Explorer 4.0</td>
<td>Win 95+</td>
<td class="center">4</td>
<td class="center">X</td>
</tr>
<tr class="gradeC">
<td>Trident</td>
<td>Internet
Explorer 5.0</td>
<td>Win 95+</td>
<td class="center">5</td>
<td class="center">C</td>
</tr>
<tr class="gradeA">
<td>Trident</td>
<td>Internet
Explorer 5.5</td>
<td>Win 95+</td>
<td class="center">5.5</td>
<td class="center">A</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
</div>
</div>
上面就能创建出如图的效果， 分页。排序。等等。
最后讲讲 各各属性（添加的位置知道吧 O(∩_∩)O~）
//$(document).ready(function() {
//$('#example').dataTable( {//加载
//"bPaginate": true,//分页按钮
//"bLengthChange": true,//每行显示记录数
//"bFilter": true,//搜索栏
//"bSort": true,//排序
//"bInfo": true,//Showing 1 to 10 of 23 entries 总记录数没也显示多少等信息
//"bAutoWidth": true } );
//} );
//$(document).ready(function() {
//$('#example').dataTable( {
//"aaSorting": [[ 4, "desc" ]]//给列表排序 ，第一个参数表示数组 。4 就是css grade那列。第二个参数为 desc或是asc
//} );
//} );
//$(document).ready(function() {
//$('#example').dataTable( {
//"aoColumns": [
// /* Engine */ null, //默认
// /* Browser */ null,
// /* Platform */ { "bSearchable": false, //不可参与搜索
// "bVisible": false },//不可见
// /* Version */ { "bVisible": false },//不可见
// /* Grade */ null
//] } );
//} );
//$(document).ready(function() {
//$('#example').dataTable({
//});
//} );
//$(document).ready(function() {
//$('#example').dataTable( {
//"sDom": '<"top"i>rt<"bottom"flp<"clear">'//这段是自定义布局没搞明白挺复杂的。 * l - Length changing * f - Filtering input* t - The table!* i - Information* p - Pagination* r - pRocessing* < and > - div elements* <"class" and > - div with a class * Examples: <"wrapper"flipt>, <lf<t>ip>
//} );
//} );
//$(document).ready(function() {
// $('#example').dataTable( {
// "bStateSave": true //保存状态到cookie *************** 很重要 ， 当搜索的时候页面一刷新会导致搜索的消失。使用这个属性就可避免了
//} );
//} );
//$(document).ready(function() {
//$('#example').dataTable( {
//"sPaginationType": "full_numbers" //分页，一共两种样式 另一种为two_button 是datatables默认
//} );
//} );
//$(document).ready(function() {
//$('#example').dataTable( { //分页信息 不是很难理解。
//"oLanguage": {
//"sLengthMenu": "Display _MENU_ records per page",
//"sZeroRecords": "Nothing found - sorry",
//"sInfo": "Showing _START_ to _END_ of _TOTAL_ records",
//"sInfoEmtpy": "Showing 0 to 0 of 0 records",
//"sInfoFiltered": "(filtered from _MAX_ total records)"
//}
//} );
//} )
$(document).ready(function() {
oTable = $('#example').dataTable({
"bJQueryUI": true, //可以添加 jqury的ui theme 需要添加css
"sPaginationType": "full_numbers"
});
} );
默认的语言是英文的 当然可以国际化：
"sUrl": "/SSS/dataTables/de_DE.txt" 添加个国际化的文件就可以。 名字随便 路径对了就可以。我写的国际化文件内容如下，可以直接复制到txt中使用.
{
"sProcessing": "Bitte warten...",
"sLengthMenu": "显示_MENU_条 ",
"sZeroRecords": "没有您要搜索的内容",
"sInfo": "从_START_ 到 _END_ 条记录——总记录数为 _TOTAL_ 条",
"sInfoEmpty": "记录数为0",
"sInfoFiltered": "(全部记录数 _MAX_ 条)",
"sInfoPostFix": "",
"sSearch": "搜索",
"sUrl": "",
"oPaginate": {
"sFirst": "第一页",
"sPrevious": " 上一页 ",
"sNext": " 下一页 ",
"sLast": " 最后一页 "
}
}
这些是datatables的基础部分。应该够用了吧。试试吧
本文链接：jQuery的表格插件datatables学习总结（一）,转自网络http://hi.baidu.com/xuhaisoft/item/01f14c0d2a75c52da0312dce
相关问答
更多-
jquery插件 Datatables，的 fnDraw方法怎么使用[2023-09-27]
在插件生成表格的时候会调用 oTable.fnDraw(); 这个时候会重新生成表格 要配合oTable.fnDestroy();好像 没应用过，请查看对应api文档 -
点击日期（dd / mm / YYY）下的“显示详情”链接，然后您可以复制并粘贴该处提供的插件代码 更新：我认为你可以切换数组的顺序，如下所示： jQuery.fn.dataTableExt.oSort['us_date-asc'] = function(a,b) { var usDatea = a.split('/'); var usDateb = b.split('/'); var x = (usDatea[2] + usDatea[0] + usDatea[1]) * 1; ...
-
Datatables插件(Datatables plugin)[2022-05-20]
其实你需要用sDom选项来玩一点。 从文档中获取： This initialisation variable allows you to specify exactly where in the DOM you want DataTables to inject the various controls it adds to the page (for example you might want the pagination controls at the top of the table). DIV e ... -
如何使用DataTables jQuery插件和正则表达式过滤短语？(How to phrase filter using DataTables jQuery plugin and regex?)[2021-09-01]
正则表达式方法似乎是明智的。 只需使用单词边界而不是开始/结束锚点： function fnFilterColumn ( i ){ $('#results').dataTable().fnFilter( '\\b' + $("#l"+(i)+"_filter").val() + '\\b', i, true ); } 如果你这样做，你也会匹配多个组。 The regex approach seems to be sensibl ... -
我正在寻找的函数是fnDestroy（），然后你可以根据需要重新初始化表，在我的情况下提交或取消表单 The function I was looking for is fnDestroy(), then you can reinitialize the table when you want, in my case on submit or cancel the form
-
更多的搜索和实验，我能够得到正确的答案。 我阅读了Ruby On Rails资产管道，并开始了解Sprockets实际上在./app/assets和.app / public中搜索您在application.css文件中列出的任何内容。 诀窍是以两种方式之一获取jquery.datatables.css的副本： 1）在RoR应用程序中实现默认的dataTables表; 在浏览器中查看源代码; 单击jquery.datatables.css链接并复制+粘贴到编辑器中; 要么 2）下载DataTables的最新 ...
-
我认为，更改源文件有主要缺点。 例如，如果要更新库，则所有更改都将丢失。 为什么不为DataTables库创建个人插件 。 喜欢： $.fn.myDataTable = function() { $(this).dataTable( { "iDisplayLength": -1 }); }; // call $( ".allTables" ).myDataTable(); Found it. On line 6262 (in my jquery.dataTable.js file ...
-
您的控制台会弹出此错误： Uncaught TypeError: Cannot read property 'asSorting' of undefined 尝试在表格中添加THEAD部分和TBODY部分。
# &n ... 如果您希望主题控制按钮的样式，则注释掉覆盖主题滚动样式的CSS。 如果它们是主题按钮，那么您将不得不删除CSS以使主题生效。 主题易于过度写入，因此您可以添加自定义，只听起来您不再需要自定义。 I found the solution myself: If I add the "ui-widget-content" CSS-class to the toolbar-container div, the styles get applied correctly. To remove the styles wh ...使用Datatables jquery插件对关于组的行进行排序(Ordering rows respecting groups using Datatables jquery plugin)[2022-03-17]
最后我解决了。 起初我看了一下DataTables的分组附加组件 ，但它在排序和过滤方面效果不佳所以我决定以另一种方式做到这一点。 每一行都有数据。 如果它是一个组，那么它将被复制但是它将被隐藏为具体的CSS样式。 像这样，用户会看到“组”，过滤和排序将一如既往地工作。 在搜索过滤的情况下，使用jQuery，我再次显示每个组的第一行（如果搜索返回隐藏的半行） Finally I solved it. At first i took at look at the Grouping Add-on of Data ...