• jquery中datatables插件学习笔记（转载）

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

    自动分页处理
    即时表格数据过滤
    数据排序以及数据类型自动检测
    自动处理列宽度
    可通过CSS定制样式
    支持隐藏列
    易用
    可扩展性和灵活性
    国际化
    动态创建表格
    免费的
    使用：
    首先。

    1. <title>DataTables example</title>
    2. <style type="text/css" title="currentStyle">
    3. @import "http://www.cnblogs.com/media/css/demo_page.css";
    4. @import "http://www.cnblogs.com/media/css/demo_table.css";
    5. @import "../examples_support/themes/smoothness/jquery-ui-1.7.2.custom.css";
    6. </style>
    7. <script type="text/javascript" language="javascript" src="http://www.cnblogs.com/media/js/jquery.js"></script>
    8. <script type="text/javascript" language="javascript" src="http://www.cnblogs.com/media/js/jquery.dataTables.js"></script>
    9. <script type="text/javascript" charset="utf-8">
    复制代码

    引入js和css文件。可以在demo里复制。注意路径地址。


    第二步

    1. <script type="text/javascript" charset="utf-8">
    2. $(document).ready(function() {
    3. $('#example').dataTable( {
    4. "oLanguage": {
    5. "sUrl": "/SSS/dataTables/de_DE.txt"
    6. },
    7. "bStateSave": true,
    8. //"bJQueryUI": true,   //使用jqueryui 。我用的时候显示的不是很好
    9. "sPaginationType": "full_numbers"//分页
    10. } );
    11. } );
    12. </script>
    15. </head>
    16. <body id="dt_example">//此处为body的id
    18. <div id="container" align="center">//*div 里是 table ，table包括thead等，最好按此格式写*
    19. <h1>物品种类管理</h1>
    20. <div id="demo">
    21. <table cellpadding="5" cellspacing="0" border="1" class="display" id="example" align="center">//id 别忘了
    22. <thead>
    23. <tr>
    24. <th>物品编号</th>
    25. <th>物品名称</th>
    26. <th>物品单位</th>
    27. <th>编辑状态</th>
    28. <th>随便</th>
    29. </tr>
    30. </thead>
    33. <tr class="gradeX">//此处可以是gradeA ,gradeX 等，但是gradeB 隔行换色 效果很好
    34. <td>Trident</td>
    35. <td>Internet
    36. Explorer 4.0</td>
    37. <td>Win 95+</td>
    38. <td class="center">4</td>
    39. <td class="center">X</td>
    40. </tr>
    41. <tr class="gradeC">
    42. <td>Trident</td>
    43. <td>Internet
    44. Explorer 5.0</td>
    45. <td>Win 95+</td>
    46. <td class="center">5</td>
    47. <td class="center">C</td>
    48. </tr>
    49. <tr class="gradeA">
    50. <td>Trident</td>
    51. <td>Internet
    52. Explorer 5.5</td>
    53. <td>Win 95+</td>
    54. <td class="center">5.5</td>
    55. <td class="center">A</td>
    56. </tr>
    57. </tbody>
    58. <tfoot>
    59. </tfoot>   
    60. </table>
    61. </div>        
    62. </div>
    复制代码

    上面就能创建出如图的效果， 分页。排序。等等。


    最后讲讲 各各属性（添加的位置知道吧 O(∩_∩)O~）

    1. //$(document).ready(function() {
    2.     //$('#example').dataTable( {//加载
    3.         //"bPaginate": true,//分页按钮
    4.         //"bLengthChange": true,//每行显示记录数
    5.         //"bFilter": true,//搜索栏
    6.         //"bSort": true,//排序
    7.         //"bInfo": true,//Showing 1 to 10 of 23 entries  总记录数没也显示多少等信息
    8.         //"bAutoWidth": true } );
    9. //} );
    12. //$(document).ready(function() {
    13.     //$('#example').dataTable( {
    14.         //"aaSorting": [[ 4, "desc" ]]//
    复制代码

    给列表排序 ，第一个参数表示数组 。4 就是css grade那列。第二个参数为 desc或是asc

    1.   //} );
    2. //} );
    5. //$(document).ready(function() {
    6.     //$('#example').dataTable( {
    7.         //"aoColumns": [
    8.         //    /* Engine */   null,  //默认
    9.         //    /* Browser */  null,
    10.         //    /* Platform */ { "bSearchable": false, //不可参与搜索
    11.         //                     "bVisible":    false },//不可见
    12.         //    /* Version */  { "bVisible":    false },//不可见
    13.         //    /* Grade */    null
    14.         //] } );
    15. //} );
    19. //$(document).ready(function() {
    20.     //$('#example').dataTable({
    21.     //});
    22. //} );
    26. //$(document).ready(function() {
    27.     //$('#example').dataTable( {
    28.         //"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>
    30.     //} );
    31. //} );
    35. //$(document).ready(function() {
    36. //    $('#example').dataTable( {
    37.     //    "bStateSave": true //保存状态到cookie *************** 很重要 ， 当搜索的时候页面一刷新会 导致搜索的消失。使用这个属性就可避免了
    38.     //} );
    39. //} );
    41. //$(document).ready(function() {
    42.     //$('#example').dataTable( {
    43.         //"sPaginationType": "full_numbers" //分页，一共两种样式 另一种为two_button  是datatables默认
    44.     //} );
    45. //} );
    47. //$(document).ready(function() {
    48.     //$('#example').dataTable( {  //分页信息 不是很难理解。
    49.         //"oLanguage": {
    50.             //"sLengthMenu": "Display _MENU_ records per page",
    51.             //"sZeroRecords": "Nothing found - sorry",
    52.             //"sInfo": "Showing _START_ to _END_ of _TOTAL_ records",
    53.             //"sInfoEmtpy": "Showing 0 to 0 of 0 records",
    54.             //"sInfoFiltered": "(filtered from _MAX_ total records)"
    55.         //}
    56.     //} );
    57. //} )
    59. $(document).ready(function() {
    60.     oTable = $('#example').dataTable({
    61.         "bJQueryUI": true, //可以添加 jqury的ui theme  需要添加css
    62.         "sPaginationType": "full_numbers"
    63.     });
    64. } );
    复制代码

    默认的语言是英文的 当然可以国际化：
    "sUrl": "/SSS/dataTables/de_DE.txt" 添加个国际化的文件就可以。 名字随便 路径对了就可以。我写的国际化文件内容如下，可以直接复制到txt中使用.

    1. {
    2. "sProcessing": "Bitte warten...",
    3. "sLengthMenu": "显示_MENU_条 ",
    4. "sZeroRecords": "没有您要搜索的内容",
    5. "sInfo": "从_START_ 到 _END_ 条记录——总记录数为 _TOTAL_ 条",
    6. "sInfoEmpty": "记录数为0",
    7. "sInfoFiltered": "(全部记录数 _MAX_  条)",
    8. "sInfoPostFix": "",
    9. "sSearch": "搜索",
    10. "sUrl": "",
    11. "oPaginate": {
    12. "sFirst":    "第一页",
    13. "sPrevious": " 上一页 ",
    14. "sNext":     " 下一页 ",
    15. "sLast":     " 最后一页 "
    16. }
    17. }
  • 相关阅读:
    C#开发模式——单例模式
    C#开发模式——单例模式
    Memcached的基础梳理
    Memcached的基础梳理
    Memcached的基础梳理
    Memcached的基础梳理
    13条只有程序员才能懂的内涵段子
    13条只有程序员才能懂的内涵段子
    网页性能优化
    webpack中使用ECharts
  • 原文地址：https://www.cnblogs.com/zpc870921/p/2698117.html
Copyright © 2020-2023  润新知