【转】 jQuery的表格插件datatables学习总结（一）

最新推荐文章于 2023-10-13 11:16:05 发布

风中叶

最新推荐文章于 2023-10-13 11:16:05 发布

阅读量3.3k

点赞数

分类专栏： jQuery 文章标签： datatables jquery function class numbers javascript

本文链接：https://blog.csdn.net/xue_feitian/article/details/6314680

版权

jQuery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

DataTables是一个jQuery的表格插件。这是一个高度灵活的工具，依据的基础逐步增强，这将增加先进的互动控制，支持任何HTML表格。官方网站及其下载： http:/www.datatables.net
下载的1.6版本里面内容很全面。

自动分页处理
即时表格数据过滤
数据排序以及数据类型自动检测
自动处理列宽度
可通过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的基础部分。应该够用了吧。试试吧

风中叶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【转】 jQuery的表格插件datatables学习总结（一）

DataTables是一个jQuery的表格插件。这是一个高度灵活的工具，依据的基础逐步增强，这将增加先进的互动控制，支持任何HTML表格。官方网站及其下载：http:/www.datatables.net <br />下载的1.6版本里面内容很全面。<br />自动分页处理即时表格数据过滤数据排序以及数据类型自动检测自动处理列宽度可通过CSS定制样式支持隐藏列易用可扩展性和灵活性国际化动态创建表格免费的使用：<br />首先。<br /><title>DataTables exa
复制链接

扫一扫