jquery datatables各参数详细说明及简单应用

深碍√TFBOYSˉ_ 2021-06-26 16:06 556阅读 0赞

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

1.  datatables简单示例  
    [http://www.datatables.net/release-datatables/examples/basic\_init/zero\_config.html][http_www.datatables.net_release-datatables_examples_basic_init_zero_config.html]

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

1.  进行基本参数配置  
    [http://www.datatables.net/release-datatables/examples/basic\_init/filter\_only.html][http_www.datatables.net_release-datatables_examples_basic_init_filter_only.html]

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

说明：以上参数配置实现的显示效果和第一个是一样的。

1.  默认排序设置，`aaSorting`  
    [http://www.datatables.net/release-datatables/examples/basic\_init/table\_sorting.html][http_www.datatables.net_release-datatables_examples_basic_init_table_sorting.html]

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

1.  多个`datatable`  
    [http://www.datatables.net/release-datatables/examples/basic\_init/multiple\_tables.html][http_www.datatables.net_release-datatables_examples_basic_init_multiple_tables.html]

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

$('.example').dataTable(

即可。

1.  隐藏部分列的内容，`aoColumnDefs`  
    [http://www.datatables.net/release-datatables/examples/basic\_init/hidden\_columns.html][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 ] }//
    ]

1.  修改表单各元素显示位置  
    [http://www.datatables.net/release-datatables/examples/basic\_init/dom.html][http_www.datatables.net_release-datatables_examples_basic_init_dom.html]

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

表示的html为：

<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名称

1.  保存当前页面信息为`cookie`，默认关闭  
    [http://www.datatables.net/release-datatables/examples/basic\_init/state\_save.html][http_www.datatables.net_release-datatables_examples_basic_init_state_save.html]

"bStateSave": true

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

1.  修改默认分页显示样式  
    [http://www.datatables.net/release-datatables/examples/basic\_init/alt\_pagination.html][http_www.datatables.net_release-datatables_examples_basic_init_alt_pagination.html]

"sPaginationType": "full_numbers"

1.  x轴宽度限制  
    [http://www.datatables.net/release-datatables/examples/basic\_init/scroll\_x.html][http_www.datatables.net_release-datatables_examples_basic_init_scroll_x.html]

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

用的很少

1.  y轴高度限制  
    [http://www.datatables.net/release-datatables/examples/basic\_init/scroll\_y.html][http_www.datatables.net_release-datatables_examples_basic_init_scroll_y.html]

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

1.  x轴、y轴均限制  
    [http://www.datatables.net/release-datatables/examples/basic\_init/scroll\_xy.html][http_www.datatables.net_release-datatables_examples_basic_init_scroll_xy.html]

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

1.  应用主题  
    [http://www.datatables.net/release-datatables/examples/basic\_init/themes.html][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";

主题一：  
引入

@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`好看，这里就不截图了！

1.  语言设置  
    [http://www.datatables.net/release-datatables/examples/basic\_init/language.html][http_www.datatables.net_release-datatables_examples_basic_init_language.html]

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

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

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

1.  各列数据`input`过滤  
    [http://www.datatables.net/release-datatables/examples/api/multi\_filter.html][http_www.datatables.net_release-datatables_examples_api_multi_filter.html]

最前面加入：

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`里面加入：

1.  每一行点击详情效果  
    [http://www.datatables.net/release-datatables/examples/api/row\_details.html][http_www.datatables.net_release-datatables_examples_api_row_details.html]

在最前面引入函数：

/* 构造每一行详情的函数 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)`里面开头加入：

/*显示每一行详情用_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)`里面末尾加入：

/*加入展开，收缩每一行详情按钮用*/
    $('#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`的简单示例，很多寒风都做了详细的注释说明：

<?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>
    <?php
    while($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>

实现了上面绝大部分功能！以上`php+datatables`示例仅适用于数据量少时的情况.

[http_www.datatables.net_release-datatables_examples_basic_init_zero_config.html]: http://www.datatables.net/release-datatables/examples/basic_init/zero_config.html
[http_www.datatables.net_release-datatables_examples_basic_init_filter_only.html]: http://www.datatables.net/release-datatables/examples/basic_init/filter_only.html
[http_www.datatables.net_release-datatables_examples_basic_init_table_sorting.html]: http://www.datatables.net/release-datatables/examples/basic_init/table_sorting.html
[http_www.datatables.net_release-datatables_examples_basic_init_multiple_tables.html]: http://www.datatables.net/release-datatables/examples/basic_init/multiple_tables.html
[http_www.datatables.net_release-datatables_examples_basic_init_hidden_columns.html]: http://www.datatables.net/release-datatables/examples/basic_init/hidden_columns.html
[http_www.datatables.net_release-datatables_examples_basic_init_dom.html]: http://www.datatables.net/release-datatables/examples/basic_init/dom.html
[http_www.datatables.net_release-datatables_examples_basic_init_state_save.html]: http://www.datatables.net/release-datatables/examples/basic_init/state_save.html
[http_www.datatables.net_release-datatables_examples_basic_init_alt_pagination.html]: http://www.datatables.net/release-datatables/examples/basic_init/alt_pagination.html
[http_www.datatables.net_release-datatables_examples_basic_init_scroll_x.html]: http://www.datatables.net/release-datatables/examples/basic_init/scroll_x.html
[http_www.datatables.net_release-datatables_examples_basic_init_scroll_y.html]: http://www.datatables.net/release-datatables/examples/basic_init/scroll_y.html
[http_www.datatables.net_release-datatables_examples_basic_init_scroll_xy.html]: http://www.datatables.net/release-datatables/examples/basic_init/scroll_xy.html
[http_www.datatables.net_release-datatables_examples_basic_init_themes.html]: http://www.datatables.net/release-datatables/examples/basic_init/themes.html
[http_www.datatables.net_release-datatables_examples_basic_init_language.html]: http://www.datatables.net/release-datatables/examples/basic_init/language.html
[http_www.datatables.net_release-datatables_examples_api_multi_filter.html]: http://www.datatables.net/release-datatables/examples/api/multi_filter.html
[http_www.datatables.net_release-datatables_examples_api_row_details.html]: http://www.datatables.net/release-datatables/examples/api/row_details.html