DataTables:初阶 | 配置选项
直接看代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 |
<!-- 使用本地的地址引入 --> <link rel="stylesheet" type="text/css" href="DataTables_jquery/DataTables-1.10.18/css/dataTables.jqueryui.css"/> <link rel="stylesheet" type="text/css" href="DataTables_jquery/Editor-1.8.1/css/editor.jqueryui.css"/> <link rel="stylesheet" type="text/css" href="DataTables_jquery/AutoFill-2.3.2/css/autoFill.jqueryui.min.css"/> <link rel="stylesheet" type="text/css" href="DataTables_jquery/Buttons-1.5.4/css/buttons.jqueryui.css"/> <link rel="stylesheet" type="text/css" href="DataTables_jquery/ColReorder-1.5.0/css/colReorder.jqueryui.css"/> <link rel="stylesheet" type="text/css" href="DataTables_jquery/FixedColumns-3.2.5/css/fixedColumns.jqueryui.css"/> <link rel="stylesheet" type="text/css" href="DataTables_jquery/FixedHeader-3.1.4/css/fixedHeader.jqueryui.css"/> <link rel="stylesheet" type="text/css" href="DataTables_jquery/KeyTable-2.5.0/css/keyTable.jqueryui.css"/> <link rel="stylesheet" type="text/css" href="DataTables_jquery/Responsive-2.2.2/css/responsive.jqueryui.css"/> <link rel="stylesheet" type="text/css" href="DataTables_jquery/RowGroup-1.1.0/css/rowGroup.jqueryui.css"/> <link rel="stylesheet" type="text/css" href="DataTables_jquery/RowReorder-1.2.4/css/rowReorder.jqueryui.css"/> <link rel="stylesheet" type="text/css" href="DataTables_jquery/Scroller-1.5.0/css/scroller.jqueryui.css"/> <link rel="stylesheet" type="text/css" href="DataTables_jquery/Select-1.2.6/css/select.jqueryui.css"/> <script type="text/javascript" src="DataTables_jquery/jQuery-3.3.1/jquery-3.3.1.js"></script> <script type="text/javascript" src="DataTables_jquery/JSZip-2.5.0/jszip.js"></script> <script type="text/javascript" src="DataTables_jquery/pdfmake-0.1.36/pdfmake.js"></script> <script type="text/javascript" src="DataTables_jquery/pdfmake-0.1.36/vfs_fonts.js"></script> <script type="text/javascript" src="DataTables_jquery/DataTables-1.10.18/js/jquery.dataTables.js"></script> <script type="text/javascript" src="DataTables_jquery/DataTables-1.10.18/js/dataTables.jqueryui.js"></script> <script type="text/javascript" src="DataTables_jquery/Editor-1.8.1/js/dataTables.editor.js"></script> <script type="text/javascript" src="DataTables_jquery/Editor-1.8.1/js/editor.jqueryui.js"></script> <script type="text/javascript" src="DataTables_jquery/AutoFill-2.3.2/js/dataTables.autoFill.js"></script> <script type="text/javascript" src="DataTables_jquery/AutoFill-2.3.2/js/autoFill.jqueryui.js"></script> <script type="text/javascript" src="DataTables_jquery/Buttons-1.5.4/js/dataTables.buttons.js"></script> <script type="text/javascript" src="DataTables_jquery/Buttons-1.5.4/js/buttons.jqueryui.js"></script> <script type="text/javascript" src="DataTables_jquery/Buttons-1.5.4/js/buttons.colVis.js"></script> <script type="text/javascript" src="DataTables_jquery/Buttons-1.5.4/js/buttons.flash.js"></script> <script type="text/javascript" src="DataTables_jquery/Buttons-1.5.4/js/buttons.html5.js"></script> <script type="text/javascript" src="DataTables_jquery/Buttons-1.5.4/js/buttons.print.js"></script> <script type="text/javascript" src="DataTables_jquery/ColReorder-1.5.0/js/dataTables.colReorder.js"></script> <script type="text/javascript" src="DataTables_jquery/FixedColumns-3.2.5/js/dataTables.fixedColumns.js"></script> <script type="text/javascript" src="DataTables_jquery/FixedHeader-3.1.4/js/dataTables.fixedHeader.js"></script> <script type="text/javascript" src="DataTables_jquery/KeyTable-2.5.0/js/dataTables.keyTable.js"></script> <script type="text/javascript" src="DataTables_jquery/Responsive-2.2.2/js/dataTables.responsive.js"></script> <script type="text/javascript" src="DataTables_jquery/RowGroup-1.1.0/js/dataTables.rowGroup.js"></script> <script type="text/javascript" src="DataTables_jquery/RowReorder-1.2.4/js/dataTables.rowReorder.js"></script> <script type="text/javascript" src="DataTables_jquery/Scroller-1.5.0/js/dataTables.scroller.js"></script> <script type="text/javascript" src="DataTables_jquery/Select-1.2.6/js/dataTables.select.js"></script> <!-- 添加如下 HTML 代码--> <table id="Hello_World" class="display" style="width:100%"> <thead> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Extn.</th> <th>Start date</th> <th>Salary</th> </tr> </thead> <tfoot> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Extn.</th> <th>Start date</th> <th>Salary</th> </tr> </tfoot> </table> <!-- 初始化Datatables--> <script> //然后 DataTables 这样初始化: // 配置默认选项 // 默认禁用搜索和排序 $.extend( $.fn.dataTable.defaults, { searching: false, ordering: false, paging: false } ); //有限以初始化的时候的配置为主 //$(document).ready(function() { $('#Hello_World').DataTable( { "ajax": "the_data", scrollY: 400, ordering: true, paging: true } ); //}); </script> |
看看效果:
从图中可以看到,红框高亮的部分本来应该有的搜索框,已经没有了。
因为上面的代码的默认配置中已经禁用了:【searching: false】
上面的配置遵循JavaScript的语法,每[……]