dataTables 用法荟萃

来源：互联网发布：大数据毕业摄影编辑：程序博客网时间：2024/06/18 04:44

此文为本人所写，但是引用了相当多的博客。尽量列出出处，如有遗漏，请多指正。

直接上第一篇：

出自 http://www.cnblogs.com/pinnasky/archive/2012/08/10/2631917.html

简介：Datatables是一款强大的jquery分页插件，不但具备分页功能，还可进行数据搜索过滤、排序等功能。
当前最新版本：v1.9.0
下载地址：
http://www.datatables.net/download/
http://115.com/file/dp5u9szo

寒风提醒：下载后，将media文件夹里面的css，images，js文件夹拷贝到你的网站即可。接下来引入以下内容：

1234567891011

<style type="text/css" title="currentStyle">@import "./style/datatable/css/demo_page.css";@import "./style/datatable/css/demo_table.css";</style><script type="text/javascript" src="./style/datatable/js/jquery.js"></script><script type="text/javascript" src="./style/datatable/js/jquery.dataTables.min.js"></script><script type="text/javascript">$(document).ready(function() {    $('#example').dataTable();//其中example为table的id，table中必须有thead！} );</script>

1. datatables简单示例

http://www.datatables.net/release-datatables/examples/basic_init/zero_config.html

$(document).ready(function() {$('#example').dataTable();} );

这个是不进行参数配置，效果如下图：

2. 进行基本参数配置

http://www.datatables.net/release-datatables/examples/basic_init/filter_only.html

"bPaginate": true, //翻页功能"bLengthChange": true, //改变每页显示数据数量"bFilter": true, //过滤功能"bSort": true, //排序功能"bInfo": true,//页脚信息"bAutoWidth": true,//自动宽度

寒风说明：以上参数配置实现的显示效果和第一个是一样的。
3. 默认排序设置，aaSorting

http://www.datatables.net/release-datatables/examples/basic_init/table_sorting.html

"aaSorting": [[ 4, "desc" ]],//设置第5个元素为默认排序

4. 多个datatable

http://www.datatables.net/release-datatables/examples/basic_init/multiple_tables.html

寒风说明：
将表单id改为class：
初始化：

$('.example').dataTable(

即可。
5. 隐藏部分列的内容，aoColumnDefs

http://www.datatables.net/release-datatables/examples/basic_init/hidden_columns.html

"aoColumnDefs": [{ "bSearchable": false, "bVisible": false, "aTargets": [ 2 ] },//bSearchable：是否可搜索；bVisible：是否可见；aTargets：哪一列{ "bVisible": false, "aTargets": [ 3 ] }//]

6. 修改表单各元素显示位置

http://www.datatables.net/release-datatables/examples/basic_init/dom.html

"sDom": '<"top"i>rt<"bottom"flp><"clear">'

表示的html为：

12345678910111213

<div class="top">这里显示 当前条数，总共条数</div>这里显示 请求中的提示信息，表单内容<div class="bottom">这里显示 搜索框，每页数量选择，翻页按钮</div><div class="clear"></div> //l - 每页数量选择select//f – 搜索框search//t – 表单内容table//i – 当前条数，总共条数information//p – 翻页按钮pagination//r – 请求中的提示信息//< 和 > – 一个div的开始与结束//<"class"> – class为div的class名称

7. 保存当前页面信息为cookie，默认关闭

http://www.datatables.net/release-datatables/examples/basic_init/state_save.html

"bStateSave": true

如果用户关闭页面后重新打开该页面，该列表会和关闭前的状态完全一样（长度，过滤，分页和排序）

8. 修改默认分页显示样式

http://www.datatables.net/release-datatables/examples/basic_init/alt_pagination.html

"sPaginationType": "full_numbers"

9. x轴宽度限制

http://www.datatables.net/release-datatables/examples/basic_init/scroll_x.html

"sScrollX": "100%","sScrollXInner": "110%","bScrollCollapse": true

用的很少

10. y轴高度限制

http://www.datatables.net/release-datatables/examples/basic_init/scroll_y.html

"sScrollY": "200px","bPaginate": false //该参数为是否显示分页，如果设置为true貌似就没什么意义了

11. x轴、y轴均限制

http://www.datatables.net/release-datatables/examples/basic_init/scroll_xy.html

"sScrollY": 200,"sScrollX": "100%","sScrollXInner": "110%"

12. 应用主题

http://www.datatables.net/release-datatables/examples/basic_init/themes.html

需要拷贝examples/examples_support/themes文件夹到style/datatable里面

@import "./style/datatable/css/demo_table.css";

替换为：

@import "./style/datatable/css/demo_table_jui.css";主题一：引入<pre lang="html" line="1">@import "./style/datatable/themes/smoothness/jquery-ui-1.8.4.custom.css";

主题二：
引入

@import "./style/datatable/themes/ui-lightness/jquery-ui-1.8.4.custom.css";

主题二是橘色系的，木有第一个smoothness好看，这里就不截图了！

13. 语言设置

http://www.datatables.net/release-datatables/examples/basic_init/language.html

123456789101112131415

"oLanguage": {"sLengthMenu": "每页显示 _MENU_条","sZeroRecords": "没有找到符合条件的数据","sProcessing": "&lt;img src=’./loading.gif’ /&gt;","sInfo": "当前第 _START_ - _END_ 条　共计 _TOTAL_ 条","sInfoEmpty": "木有记录","sInfoFiltered": "(从 _MAX_ 条记录中过滤)","sSearch": "搜索：","oPaginate": {"sFirst": "首页","sPrevious": "前一页","sNext": "后一页","sLast": "尾页"}}

也可以直接指定语言包，txt文件：

"sUrl": "media/language/de_DE.txt" //文件格式和上面一样

14. 各列数据input过滤

http://www.datatables.net/release-datatables/examples/api/multi_filter.html

最前面加入：

123456789101112131415161718192021222324

var asInitVals = new Array();$('#example').dataTable 修改为：var oTable =$('#example').dataTable加入：/*过滤代码开始*/$("tfoot input").keyup( function () {oTable.fnFilter( this.value, $("tfoot input").index(this) );} );$("tfoot input").each( function (i) {asInitVals[i] = this.value;} );$("tfoot input").focus( function () {if ( this.className == "search_init" ){this.className = "";this.value = "";}} );$("tfoot input").blur( function (i) {if ( this.value == "" ){this.className = "search_init";this.value = asInitVals[$("tfoot input").index(this)];}} );

tfoot里面加入：

<tr>    <th><input type="text" name="search_engine" value="Search engines" class="search_init" /></th>    <th><input type="text" name="search_browser" value="Search browsers" class="search_init" /></th>    <th><input type="text" name="search_platform" value="Search platforms" class="search_init" /></th>    <th><input type="text" name="search_version" value="Search versions" class="search_init" /></th>    <th><input type="text" name="search_grade" value="Search grades" class="search_init" /></th></tr>

15. 每一行点击详情效果

http://www.datatables.net/release-datatables/examples/api/row_details.html

在最前面引入函数：

12345678910

/* 构造每一行详情的函数 fnFormatDetails*/function fnFormatDetails ( oTable, nTr ){    var aData = oTable.fnGetData( nTr );    var sOut = '<table cellpadding="6" cellspacing="0" border="0" style="padding-left:50px;">'; //在这里定义要返回的内容    sOut += '<tr><td>Rendering engine:</td><td>'+aData[1]+' '+aData[4]+'</td></tr>';    sOut += '<tr><td>Link to source:</td><td>Could provide a link here</td></tr>';    sOut += '<tr><td>Extra info:</td><td>And any further details here (images etc)</td></tr>';    sOut += '</table>';    return sOut;}

ready(function)里面开头加入：

123456789101112

/*显示每一行详情用_start*/var nCloneTh = document.createElement( 'th' );var nCloneTd = document.createElement( 'td' );nCloneTd.innerHTML = '<img src="./style/datatable/images/details_open.png">';nCloneTd.className = "center";$('#example thead tr').each( function () {    this.insertBefore( nCloneTh, this.childNodes[0] );} );$('#example tbody tr').each( function () {    this.insertBefore(  nCloneTd.cloneNode( true ), this.childNodes[0] );} );/*显示每一行详情用_end*/

ready(function)里面末尾加入：

1234567891011121314

/*加入展开，收缩每一行详情按钮用*/$('#example tbody td img').live('click', function () {    var nTr = $(this).parents('tr')[0];    if ( oTable.fnIsOpen(nTr) )    {        this.src = "./style/datatable/images/details_open.png";        oTable.fnClose( nTr );    }    else    {        this.src = "./style/datatable/images/details_close.png";        oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );    }} );

值得注意的是，如果加入了tfoot，必须手动在里面加入多一行th！

最后，是寒风写的简单的php+mysql+datatables的简单示例，很多寒风都做了详细的注释说明：

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184

<?php $mysqli=new mysqli("localhost","root","","database");$mysqli->query("SET NAMES utf8"); $result=$mysqli->query("SELECT * FROM `table` limit 500");if(!$result){echo "查询出错！";exit;}?><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css" title="currentStyle">@import "./style/datatable/css/demo_page.css";@import "./style/datatable/css/demo_table_jui.css";@import "./style/datatable/themes/smoothness/jquery-ui-1.8.4.custom.css";body{ font-size:12px;}table{ font-size:12px;}</style><script type="text/javascript" src="./style/datatable/js/jquery.js"></script><script type="text/javascript" src="./style/datatable/js/jquery.dataTables.min.js"></script> <script type="text/javascript">/* 构造每一行详情的函数 fnFormatDetails*/function fnFormatDetails ( oTable, nTr ){var aData = oTable.fnGetData( nTr );var sOut = '<table cellpadding="6" cellspacing="0" border="0" style="padding-left:50px;">'; //在这里定义要返回的内容sOut += '<tr><td>Rendering engine:</td><td>'+aData[1]+' '+aData[4]+'</td></tr>';sOut += '<tr><td>Link to source:</td><td>Could provide a link here</td></tr>';sOut += '<tr><td>Extra info:</td><td>And any further details here (images etc)</td></tr>';sOut += '</table>';return sOut;} /*页面元素加载完成后开始执行*/$(document).ready(function() {/*显示每一行详情用_start*/var nCloneTh = document.createElement( 'th' );var nCloneTd = document.createElement( 'td' );nCloneTd.innerHTML = '<img src="./style/datatable/images/details_open.png">';nCloneTd.className = "center";$('#example thead tr').each( function () {this.insertBefore( nCloneTh, this.childNodes[0] );} );$('#example tbody tr').each( function () {this.insertBefore(  nCloneTd.cloneNode( true ), this.childNodes[0] );} );/*显示每一行详情用_end*/ var asInitVals = new Array(); //用于每一列搜索过滤    var oTable =$('#example').dataTable( //var oTable用于每一列搜索过滤    {/*基本参数设置，以下参数设置和默认效果一致*/    "bPaginate": true, //翻页功能    "bLengthChange": true, //改变每页显示数据数量    "bFilter": true, //过滤功能    "bSort": true, //排序功能    "bInfo": true,//页脚信息    "bAutoWidth": true,//自动宽度    /*默认排序设置*/    "aaSorting": [[ 4, "desc" ]],//设置第5个元素为默认排序                /*默认翻页样式设置*/    "sPaginationType": "full_numbers",    /*是否开启主题*/    "bJQueryUI": true,/*语言设置*/            "oLanguage": {                "sLengthMenu": "每页显示 _MENU_条",                "sZeroRecords": "没有找到符合条件的数据",                "sProcessing": "<img src=’./loading.gif’ />",                "sInfo": "当前第 _START_ - _END_ 条　共计 _TOTAL_ 条",                "sInfoEmpty": "木有记录",                "sInfoFiltered": "(从 _MAX_ 条记录中过滤)",                "sSearch": "搜索：",                "oPaginate": {                "sFirst": "首页",                "sPrevious": "前一页",                "sNext": "后一页",                "sLast": "尾页"            }            }}    ); /*每一列搜索过滤代码开始*/    $("tfoot input").keyup( function () {        oTable.fnFilter( this.value, $("tfoot input").index(this) );    } );    $("tfoot input").each( function (i) {        asInitVals[i] = this.value;    } );    $("tfoot input").focus( function () {        if ( this.className == "search_init" )        {            this.className = "";            this.value = "";        }    } );    $("tfoot input").blur( function (i) {        if ( this.value == "" )        {            this.className = "search_init";            this.value = asInitVals[$("tfoot input").index(this)];        }    } ); /*加入展开，收缩每一行详情按钮用*/$('#example tbody td img').live('click', function () {var nTr = $(this).parents('tr')[0];if ( oTable.fnIsOpen(nTr) ){this.src = "./style/datatable/images/details_open.png";oTable.fnClose( nTr );}else{this.src = "./style/datatable/images/details_close.png";oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );}} );} );</script></head> <body><div style=" width:800px; margin:0 auto;"><table cellpadding="0" cellspacing="0" class="display" border="0" id="example"><thead>  <tr>    <th>ID</th>    <th>时间</th>    <th>数量</th>    <th>次数</th>    <th>消耗</th>  </tr></thead><tbody><?phpwhile($rows=$result->fetch_assoc()){$rows['time']=date("Y-m-d H:i:s",$rows['time']);echo "<tr>  <td>{$rows['ID']}</td>  <td>{$rows['time']}</td>  <td>{$rows['r_num']}</td>  <td>{$rows['r_times']}</td>  <td>{$rows['money']}</td></tr>";}?></tbody><tfoot>  <tr>    <th></th>    <th>ID</th>    <th>时间</th>    <th>数量</th>    <th>次数</th>    <th>消耗</th>  </tr><tr><th></th><th><input type="text" name="search_engine" value="Search engines" class="search_init" /></th><th><input type="text" name="search_browser" value="Search browsers" class="search_init" /></th><th><input type="text" name="search_platform" value="Search platforms" class="search_init" /></th><th><input type="text" name="search_version" value="Search versions" class="search_init" /></th><th><input type="text" name="search_grade" value="Search grades" class="search_init" /></th></tr></tfoot></table><style>#example tr.even:hover {background-color: #ECFFB3;}#example tr.even:hover td.sorting_1 {background-color: #DDFF75;}#example tr.even:hover td.sorting_2 {background-color: #E7FF9E;}#example tr.even:hove3 {background-color: #E2FF89;}#example tr.odd:hover {background-color: #E6FF99;}#example tr.odd:hover td.sorting_1 {background-color: #D6FF5C;}#example tr.odd:hover td.sorting_2 {background-color: #E0FF84;}#example tr.odd:hover td.sorting_3 {background-color: #DBFF70;}</style></div></body></html>

第二篇ajax请求数据：

出自 http://www.w2bc.com/Article/13221

<script type="text/javascript">        $(function () {            var tablePrefix = "#table_server_";            $("#table_server").dataTable({              serverSide: true,//分页，取数据等等的都放到服务端去                processing: true,//载入数据的时候是否显示“载入中”                pageLength: 10,//首次加载的数据条数                ordering: false,//排序操作在服务端进行，所以可以关了。                ajax: {//类似jquery的ajax参数，基本都可以用。                    type: "post",//后台指定了方式，默认get，外加datatable默认构造的参数很长，有可能超过get的最大长度。                    url: "@Url.Action("GetPeoples")",                  dataSrc: "data",//默认data，也可以写其他的，格式化table的时候取里面的数据                    data: function (d) {//d 是原始的发送给服务器的数据，默认很长。                        var param = {};//因为服务端排序，可以新建一个参数对象                        param.start = d.start;//开始的序号                        param.length = d.length;//要取的数据的                        var formData = $("#filter_form").serializeArray();//把form里面的数据序列化成数组                        formData.forEach(function (e) {                            param[e.name] = e.value;                        });                        return param;//自定义需要传递的参数。                    },                },                columns: [//对应上面thead里面的序列                    { data: "id", },//字段名字和返回的json序列的key对应                    { data: "name", },                    {                        //Student 没有hireDate                        data: function (e) {                            if (e.hireDate) {//默认是/Date(794851200000)/格式，需要显示成年月日方式                                return new Date(Number(e.hireDate.replace(/\D/g, ''))).toLocaleDateString();                            }                            return "空";                        }                    },                    { data: "discriminator", },                    {                        data: function (e) {//这里给最后一列返回一个操作列表                            //e是得到的json数组中的一个item ，可以用于控制标签的属性。                            return '<a class="btn btn-default btn-xs show-detail-json"><i class="icon-edit"></i>显示详细</a>';                        }                    }                ],                initComplete: function (setting, json) {                    //初始化完成之后替换原先的搜索框。                    //本来想把form标签放到hidden_filter 里面，因为事件绑定的缘故，还是拿出来。                    $(tablePrefix + "filter").html("<form id='filter_form'>" + $("#hidden_filter").html() + "</form>");                },                language: {                  lengthMenu: '<select class="form-control input-xsmall">' + '<option value="5">5</option>' + '<option value="10">10</option>' + '<option value="20">20</option>' + '<option value="30">30</option>' + '<option value="40">40</option>' + '<option value="50">50</option>' + '</select>条记录',//左上角的分页大小显示。                    processing: "载入中",//处理页面数据的时候的显示                    paginate: {//分页的样式文本内容。                        previous: "上一页",                     next: "下一页",                     first: "第一页",                     last: "最后一页"                    },                    zeroRecords: "没有内容",//table tbody内容为空时，tbody的内容。                    //下面三者构成了总体的左下角的内容。                    info: "总共_PAGES_ 页，显示第_START_ 到第 _END_ ，筛选之后得到 _TOTAL_ 条，初始_MAX_ 条 ",//左下角的信息显示，大写的词为关键字。                    infoEmpty: "0条记录",//筛选为空时左下角的显示。                    infoFiltered: ""//筛选之后的左下角筛选提示(另一个是分页信息显示，在上面的info中已经设置，所以可以不显示)，                }            });            //$("#table_server_filter input[type=search]").css({ width: "auto" });//右上角的默认搜索文本框，不写这个就超出去了。        });        $(document).on("submit", "#filter_form", function () {            return false;        });        $(document).on("click", "#go_search", function () {            $("#table_server").DataTable().draw();//点搜索重新绘制table。        });        $(document).on("click", ".show-detail-json", function () {//取出当前行的数据

            alert(JSON.stringify($("#table_server").DataTable().row($(this).parents("tr")).data()));        });    </script>

第三篇：

第四篇：

更多应用，请见官网。

http://dt.thxopen.com/example/api/select_row.html

0 0