jquery插件dataTables（dataTables在显示表格的时候，果然是个好东西,支持排序/搜索/分页/...）

jquery插件dataTables

dataTables在显示表格的时候，支持排序/搜索/分页/...

官网：http://www.datatables.net/

demo：

[javascript] view plain copy print ?
<script src=".../jquery-1.4.4.min.js" type="text/javascript"></script>
<script src=".../jquery.dataTables.min.js" type="text/javascript"></script>
<link type="text/css" href=".../datatable.css" rev="stylesheet" rel="stylesheet"></script>
<link type="text/css" href=".../datatable_jui.css" rev="stylesheet" rel="stylesheet"></script>
<link type="text/css" href=".../jquery-ui-1.8.7.custom.css" rev="stylesheet" rel="stylesheet">
<script type="text/javascript">

</script>
<style>

</style>
<div style="width:500px;">
<table id="table_id">
<thead><tr><th>A</th><th>B</th><th>C</th><th>D</th><th>E</th></tr></thead>
<tbody>
<tr><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><td>Trident</td><td>Internet Explorer 3.0</td><td>Win 96+</td><td class="center"> 4</td><td class="center">X</td></tr>
<tr><td>Gecko</td><td>Firefox 1.0</td><td>Win 98+ / OSX.2+</td><td class="center">1.7</td><td class="center">A</td></tr>
<tr><td>Trident</td><td>Internet Explorer 5.0</td><td>Win 98+</td><td class="center"> 4</td><td class="center">X</td></tr>
<tr><td>Gecko</td><td>Firefox 1.0</td><td>Win 98+ / OSX.2+</td><td class="center">1.7</td><td class="center">A</td></tr>
<tr><td>Gecko</td><td>Firefox 1.0</td><td>Win 98+ / OSX.2+</td><td class="center">1.7</td><td class="center">A</td></tr>
<tr><td>Gecko</td><td>Camino 1.0</td><td>OSX.2+</td><td class="center">1.8</td><td class="center">A</td></tr>
<tfoot><tr><th>A</th><th>B</th><th>C</th><th>D</th><th>E</th></tr></tfoot>
</table>
</div>

<script src=".../jquery-1.4.4.min.js" type="text/javascript"></script>  <script src=".../jquery.dataTables.min.js" type="text/javascript"></script>  <link type="text/css" href=".../datatable.css" rev="stylesheet" rel="stylesheet"></script>  <link type="text/css" href=".../datatable_jui.css" rev="stylesheet" rel="stylesheet"></script>  <link type="text/css" href=".../jquery-ui-1.8.7.custom.css" rev="stylesheet" rel="stylesheet">  <script type="text/javascript">  <!--  function initTable(){   $('#table_id').dataTable({      "bJQueryUI" : true,      "aaSorting" : [ [0, 'asc' ], [ 3, 'asc' ] ],/*默认排序*/      "aLengthMenu" : [ [ 10, 20, 50, -1 ], [ 10, 20, 50, "All" ] ],      "iDisplayLength": 20,/*默认显示长度*/   });  }  $("document").ready(initTable);  //-->  </script>  <style>  <!--  table{  width:100%;  }  -->  </style>  <div style="width:500px;">  <table id="table_id">  <thead><tr><th>A</th><th>B</th><th>C</th><th>D</th><th>E</th></tr></thead>  <tbody>  <tr><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><td>Trident</td><td>Internet Explorer 3.0</td><td>Win 96+</td><td class="center"> 4</td><td class="center">X</td></tr>  <tr><td>Gecko</td><td>Firefox 1.0</td><td>Win 98+ / OSX.2+</td><td class="center">1.7</td><td class="center">A</td></tr>  <tr><td>Trident</td><td>Internet Explorer 5.0</td><td>Win 98+</td><td class="center"> 4</td><td class="center">X</td></tr>  <tr><td>Gecko</td><td>Firefox 1.0</td><td>Win 98+ / OSX.2+</td><td class="center">1.7</td><td class="center">A</td></tr>  <tr><td>Gecko</td><td>Firefox 1.0</td><td>Win 98+ / OSX.2+</td><td class="center">1.7</td><td class="center">A</td></tr>  <tr><td>Gecko</td><td>Camino 1.0</td><td>OSX.2+</td><td class="center">1.8</td><td class="center">A</td></tr>  <tfoot><tr><th>A</th><th>B</th><th>C</th><th>D</th><th>E</th></tr></tfoot>  </table>  </div>

难度升级：

[javascript] view plain copy print ?
var sDom = '<"fg-toolbar ui-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"<"table_title"><"title_select">l<"right"><"clear">>rt<"fg-toolbar ui-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix"ip>';
function initTable(){
$('#table_id').dataTable({
"bJQueryUI" : true,
"bFilter": false,/*不用搜索栏*/
"iDisplayLength": 6,/*默认显示长度*/
"aaSorting" : [ [ 3, 'asc' ] ],/*默认排序*/
"aLengthMenu" : [ [ 6, -1 ], [ 6, "All" ] ],/*可选长度*/
"bStateSave": true,/*记录cookie(记的东西太多了，不太建议用)*/
"oLanguage": {/*汉化*/
"sLengthMenu": "每页显示 _MENU_ 行",
"sZeroRecords": "没有记录",
"sInfo": "当前显示 _START_ ～ _END_ 条，共 _TOTAL_ 条记录",
"sInfoEmpty": "当前显示 0 ～ 0 条，共 0 条记录",
"sInfoFiltered": "(从 _MAX_ 条记录中搜索)"
},
"sDom": sDom,/*tool工具条设置http://datatables.net/release-datatables/examples/basic_init/dom.html（不要被吓倒，很简单的）*/
"bAutoWidth": false,/*取消自动设置表格宽度(这个说来话长，吃了不少苦才挖出来的宝)*/
"aoColumnDefs": [{ "bVisible": false, "aTargets": [ 2 ] }],/*隐藏第三列*/
});
$('#table_id_wrapper .table_title').html('我的表格');
}
$("document").ready(initTable);

var sDom = '<"fg-toolbar ui-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"<"table_title"><"title_select">l<"right"><"clear">>rt<"fg-toolbar ui-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix"ip>';  function initTable(){   $('#table_id').dataTable({          "bJQueryUI" : true,          "bFilter": false,/*不用搜索栏*/          "iDisplayLength": 6,/*默认显示长度*/          "aaSorting" : [ [ 3, 'asc' ] ],/*默认排序*/          "aLengthMenu" : [ [ 6, -1 ], [ 6, "All" ] ],/*可选长度*/          "bStateSave": true,/*记录cookie(记的东西太多了，不太建议用)*/          "oLanguage": {/*汉化*/              "sLengthMenu": "每页显示 _MENU_ 行",              "sZeroRecords": "没有记录",              "sInfo": "当前显示 _START_ ～ _END_ 条，共 _TOTAL_ 条记录",              "sInfoEmpty": "当前显示 0 ～ 0 条，共 0 条记录",              "sInfoFiltered": "(从 _MAX_ 条记录中搜索)"                  },          "sDom": sDom,/*tool工具条设置http://datatables.net/release-datatables/examples/basic_init/dom.html（不要被吓倒，很简单的）*/          "bAutoWidth": false,/*取消自动设置表格宽度(这个说来话长，吃了不少苦才挖出来的宝)*/          "aoColumnDefs": [{ "bVisible": false, "aTargets": [ 2 ] }],/*隐藏第三列*/   });   $('#table_id_wrapper .table_title').html('我的表格');  }  $("document").ready(initTable);

此外

在html页的table上进行渲染，会有一个渲染表的动作,解决办法：

1、hidden渲染好了再出来show出来；

2、datatables可以通过js/ajax等传数据进来（但是这样的话，没法直接对tr / td设置css属性等）

jquery插件dataTables（dataTables在显示表格的时候，果然是个好东西,支持排序/搜索/分页/...）相关推荐

基于Jquery插件Uploadify实现实时显示进度条上传图片
网址:http://www.jb51.net/article/83811.htm 这篇文章主要介绍了基于Jquery插件Uploadify实现实时显示进度条上传图片的相关资料,感兴趣的小伙伴们可以参考 ...
JQuery插件之-----Datatables(三)Datatables实现多选框与AJAX返回数据
通过Eclipse创建一个简单的Spring MVC项目,使用其内置的JSON转换在index.jsp文件中添加如下内容: <%@ page language="java" ...
1000个jquery插件
1.导航类 (1)Horizontal accordion: jQuery 基于jQuery开发,非常简单的水平方向折叠控件.二手图书二手书特价书旧书网 (2)jQuery-Horizontal ...
1000个JQuery插件（转载）
超强1000个jquery极品插件!(转) 花N长时间积累的Jquery插件,希望大家喜欢.大家还有什么新的插件,请留言,我们一并收录. 感谢大家的支持. ++++++++++++++++++++++ ...
网站开发中很实用的 HTML5 jQuery 插件
这篇文章挑选了15款在网站开发中很实用的 HTML5 & jQuery 插件,如果你正在寻找能优化网站,使其更具创造力和视觉冲击,那么本文正是你需要的.这些优秀的 jQuery 插件能为你的网 ...
100个优秀jQuery插件精选
100个优秀jQuery插件精选在2012年里出现了很多很棒的jQuery插件,如结合CSS3的jQuery动画.强大的支持多设备浏览的响应性布局设计.使用视频作为网页设计背景.jQuery图像幻灯 ...
提升你网站水平的 jQuery 插件推荐
jQuery是一个优秀JavaScript库,它简化了HTML文档遍历,事件处理,动画和Ajax交互. jQuery的确改变了很多人写JavaScript的方式.如今,有很多现成的jQuery插件可供 ...
jquery插件chosen多选时排序问题
jquery插件chosen多选时排序问题项目前端用到 bootstrap 框架,很多功能都是依赖 jquery 插件实现的.今天遇到一个需求:一个 input 中需要支持多选,并且选中的内容要按照 ...
DataTables TreeGrid 插件可以快速实现树形表格
dataTables.treeGrid 插件介绍更新日志真实系统展现效果 DEMO参考使用方法 DataTable 渲染JSON数据格式 HTML数据格式(以DEMO截图代码为例) 插件介绍针 ...

jquery插件dataTables（dataTables在显示表格的时候，果然是个好东西,支持排序/搜索/分页/...）

jquery插件dataTables

jquery插件dataTables（dataTables在显示表格的时候，果然是个好东西,支持排序/搜索/分页/...）相关推荐

最新文章

热门文章