`
comeonbabye
  • 浏览: 441987 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jQuery的表格插件datatables学习总结

    博客分类：
  • JS
jquery 
阅读更多
2010-04-21 14:33

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的基础部分。应该够用了吧。试试吧

分享到：
| jQuery dataTables
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jQuery表格插件DataTables

    **jQuery表格插件DataTables详解** DataTables是jQuery的一个强大插件，专为HTML表格提供高级功能和交互性。这个插件的核心理念是基于渐进增强的原理，即在基本HTML表格的基础上添加丰富的功能和控制，使得数据展示...

    Datatables jquery表格插件

    Datatables是一款基于jQuery的开源表格插件，广泛应用于网页数据展示和管理。它以其丰富的功能、高度的灵活性和良好的社区支持而备受青睐。这个插件的主要目标是将静态或者动态生成的HTML表格转变为具有强大交互性的...

    DataTables - jQuery表格插件

    DataTables是一款基于jQuery库的强大的表格插件，它极大地增强了HTML表格的功能，提供了丰富的排序、搜索、分页、列操作等交互性功能。这个插件的设计目标是为开发者提供一个高度可定制、易于使用的工具，使得网页上...

    jquery 分页插件 dataTables

    jQuery分页插件dataTables是一款强大的、灵活的、功能丰富的表格增强工具，它能够将普通的HTML表格转化为具有排序、搜索、分页、过滤等高级功能的数据展示平台。dataTables插件充分利用了jQuery的简洁和高效，使得在...

    jQuery表格插件datatables用法总结

    jQuery表格插件DataTables是一个基于jQuery的JavaScript库，它扩展了HTML表格的功能，增加了排序、搜索和分页等互动功能。DataTables能够处理大量数据，同时保持高性能，因此非常适合用于Web应用程序中管理表格数据...

    jquery 表格分页处理插件 DataTables

    DataTables是提供了大量特性的强大jQuery表格插件。例如:你可以自动轻松筛选、Ajax预读取数据、分页、列排序、高亮排序列、扩展插件支持、使用CSS或jQuery UI ThemeRoller 定制主题和完整文档。

    jQuery表格插件datatables用法汇总

    jQuery表格插件DataTables是一个用于增强HTML表格功能的插件，它提供了高级的交互控制，能够将任何HTML表格转化为具有数据搜索、排序、分页等丰富功能的表格。DataTables的目的是扩展基本的HTML表格功能，使之更加...

    jQuery表格插件datatables用法详解

    Datatables 是一个强大的 jQuery 表格插件，它提供了丰富的功能，如分页、排序、过滤、自定义样式等，使HTML表格具有更高级的交互性。以下是对 Datatables 插件用法的详细说明： 1. **Datatables 简介**： ...

    强大的jQuery表格插件

    - **DataTables**：DataTables是最受欢迎的jQuery表格插件之一，支持排序、过滤、分页、列选择等多种功能，并且有多种语言和主题可供选择。 - **Handsontable**：Handsontable是一个强大的交互式表格，适合数据编辑...

    jQuery表格插件仿Excel表格排序修改效果

    通过对这些文件的分析和学习，你可以更深入地理解如何将jQuery表格插件与Excel的排序功能相结合，以满足不同场景的需求。 总之，通过使用jQuery表格插件和适当的配置，我们可以轻松实现仿Excel的表格排序功能，提升...

    37款开源jQuery表格插件

    jQuery表格插件 DataTables **简介** DataTables是一款基于jQuery的表格插件，具有高度灵活性和强大的功能，支持对任何HTML表格进行增强处理。 **主要特点** - **自动分页**：自动处理表格的分页。 - **即时...

    DONET的JQuery.Datatables集成插件(Mvc.JQuery.Datatables)

    通过学习和使用`Mvc.JQuery.Datatables`，开发者不仅可以快速地在.NET MVC应用中实现复杂的数据表格功能，还能借此机会深入理解前端和后端交互的工作原理，提升Web开发技能。在实际开发中，可以根据项目需求自定义...

    jquery datatables 所需文件 官方下载的

    通过查看这些例子，你可以学习如何初始化表格、配置参数、添加自定义功能等。 6. **Documentation**: 官方文档是掌握DataTables的关键资源，它详细解释了每个方法、属性和选项的用法，帮助开发者深入理解并灵活运用...

    jquery表格插件带分页动态数据表格代码

    常见的jQuery表格插件有DataTables、jqGrid、Flexigrid等。在本项目中，可能使用的是某一特定的表格插件，通过定制或配置实现所需功能。 二、分页 在大数据量的展示场景下，分页是一种常用的技术手段，可以避免一...

    Jquery可编辑表格插件DataTables-1.7.6.zip

    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

    jQuery datatables插件

    总结来说，jQuery DataTables插件为HTML表格提供了强大的功能和灵活性，无论是基础的排序和过滤，还是更复杂的自定义需求，都能满足。配合合理的配置和API使用，可以极大地提升网页数据管理的用户体验。

Magicbox
Global site tag (gtag.js) - Google Analytics