Datatables嵌入Boostrap使用笔记

时间：2022-09-09 07:27:51

参考地址Datatables中文网 http://www.datatables.club

DataTables使用Bootstrap

<!--css -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/datatables/1.10.5/css/jquery.dataTables.min.css" rel="stylesheet">

<!--js-->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/datatables/1.10.5/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="http://cdn.datatables.net/plug-ins/28e7751dbec/integration/bootstrap/3/dataTables.bootstrap.js"></script>

注意版本的问题，不同尤其是dataTables的版本问题，比较新的dataTable支持的是bootstrap4，dataTables.bootstrap.js这个js也很重要

数据源类型

AJAX数据源

$('#example').dataTable( {
"ajax": '../ajax/data/arrays.txt'
   } );

谷歌浏览器引入本地文件是不行的，报错，火狐可用
Datatables嵌入Boostrap使用笔记

服务器处理

Datatables有许多方法来获取你的数据，如果你的数据量比较大，这个时候你需要使用服务器模式来处理你的数据。 在服务器模式下，所有的分页，搜索，排序等操作，Datatables都会交给服务器去处理。所以每次绘制Datatables， 都会请求一次服务器获取需要的数据。

 "serverSide": true
$(document).ready(function() {
       $('#example').dataTable( {
"processing": true,
"serverSide": true,
"ajax": "http://dt.thxopen.com/example/resources/server_processing_customCUrl.php"
       } );
   } );

数组

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/datatables/1.10.5/css/jquery.dataTables.min.css" rel="stylesheet">
</head>
<body style="margin: 40px">

<table width="100%" class="table table-striped " border="0"
cellpadding="0" cellpadding="0" id="khListPage">
<thead>
<tr>
<th>一</th>
<th>二</th>
<th>三</th>
<th>四</th>
<th>五</th>
<th>六</th>
</tr>
</thead>
<tbody>

</tbody>
</table>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/datatables/1.10.5/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="http://cdn.datatables.net/plug-ins/28e7751dbec/integration/bootstrap/3/dataTables.bootstrap.js"></script>
<script type="text/javascript">
var data = [
 [
"Tiger Nixon",
"System Architect",
"Edinburgh",
"5421",
"2011/04/25",
"$3,120"
 ],
 [
"Garrett Winters",
"Director",
"Edinburgh",
"8422",
"2011/07/25",
"$5,300"
 ]
 ];

 $(document).ready(function(){
 $('#khListPage').DataTable({
 data:data
 });
 });
</script>
</html>

对象

<body style="margin: 40px">

<table width="100%" class="table table-striped " border="0"
cellpadding="0" cellpadding="0" id="khListPage">
<thead>
<tr>
<th>name</th>
<th>position</th>
<th>salary</th>
<th>start_date</th>
<th>office</th>
<th>六</th>
</tr>
</thead>
<tbody>

</tbody>
</table>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/datatables/1.10.16/js/jquery.dataTables.js"></script>
<script type="text/javascript">
var data = [
 {
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$3,120",
"start_date": "2011/04/25",
"office": "Edinburgh",
"extn": "5421"
 },
 {
"name": "Garrett Winters",
"position": "Director",
"salary": "$5,300",
"start_date": "2011/07/25",
"office": "Edinburgh",
"extn": "8422"
 }
 ];

 $(document).ready(function(){
 $('#khListPage').DataTable({
 data:data,
//使用对象数组，一定要配置columns，告诉 DataTables 每列对应的属性
//data 这里是固定不变的，name，position，salary，office 为你数据里对应的属性
 columns: [
 { data: 'name' },
 { data: 'position' },
 { data: 'salary' },
 { data: 'office' }
 ]
 });
 });
</script>

实例

Datatables嵌入Boostrap使用笔记

<body style="margin: 40px">

<table width="100%" class="table table-striped " border="0"
cellpadding="0" cellpadding="0" id="khListPage">
<thead>
<tr>
<th>name</th>
<th>position</th>
<th>salary</th>
<th>start_date</th>
<th>office</th>
</tr>
</thead>
<tbody>

</tbody>
</table>
</body>
<script type="text/javascript">
function Employee ( name, position, salary, office ) {
this.name = name;
this.position = position;
this.salary = salary;
this._office = office;

this.office = function () {
return this._office;
 }
 };

 $(document).ready(function(){
 $('#khListPage').DataTable({
 data:[
new Employee( "Tiger Nixon", "System Architect", "$3,120", "Edinburgh" ),
new Employee( "Garrett Winters", "Director", "$5,300", "Edinburgh" )
 ],
//使用对象数组，一定要配置columns，告诉 DataTables 每列对应的属性
//data 这里是固定不变的，name，position，salary，office 为你数据里对应的属性
 columns: [
 { data: 'name' },//第一行
 { data: 'position' },
 { data: 'salary' },
 { data: 'office' }
 ]
 });
 });
</script>

Data sources

DataTables 支持三种数据源显示：

DOM
JavaScript
Ajax

DOM

DataTables 初始化后，它会自动检查表格中的数据，如果存在即作为表显示的数据 （注意，如果你这时使用data或者ajax传递数据将不会显示），这是使用 DataTables 最简单的方法，渲染已经存在的table

注意,当使用DOM显示表,DataTables 将会把数据当做数组作为数据源(见上)。

  <button id="table_id_example_button">获取选中的行</button>
<table id="table_id_example" class="display">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
</tr>
</tbody>
</table>

JavaScript

<body style="margin: 40px">
<table id="example" class="display" width="100%"></table>
</body>

<script type="text/javascript">
    var dataSet = [
        [ "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800" ],
        [ "Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750" ],
        [ "Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12", "$86,000" ],
        [ "Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "6224", "2012/03/29", "$433,060" ],
        [ "Airi Satou", "Accountant", "Tokyo", "5407", "2008/11/28", "$162,700" ],
        [ "Brielle Williamson", "Integration Specialist", "New York", "4804", "2012/12/02", "$372,000" ],
        [ "Herrod Chandler", "Sales Assistant", "San Francisco", "9608", "2012/08/06", "$137,500" ],
        [ "Rhona Davidson", "Integration Specialist", "Tokyo", "6200", "2010/10/14", "$327,900" ],
        [ "Colleen Hurst", "Javascript Developer", "San Francisco", "2360", "2009/09/15", "$205,500" ],
        [ "Sonya Frost", "Software Engineer", "Edinburgh", "1667", "2008/12/13", "$103,600" ],
        [ "Jena Gaines", "Office Manager", "London", "3814", "2008/12/19", "$90,560" ],
        [ "Quinn Flynn", "Support Lead", "Edinburgh", "9497", "2013/03/03", "$342,000" ],
        [ "Charde Marshall", "Regional Director", "San Francisco", "6741", "2008/10/16", "$470,600" ],
        [ "Haley Kennedy", "Senior Marketing Designer", "London", "3597", "2012/12/18", "$313,500" ],
        [ "Tatyana Fitzpatrick", "Regional Director", "London", "1965", "2010/03/17", "$385,750" ],
        [ "Michael Silva", "Marketing Designer", "London", "1581", "2012/11/27", "$198,500" ],
        [ "Paul Byrd", "Chief Financial Officer (CFO)", "New York", "3059", "2010/06/09", "$725,000" ],
        [ "Gloria Little", "Systems Administrator", "New York", "1721", "2009/04/10", "$237,500" ],
        [ "Bradley Greer", "Software Engineer", "London", "2558", "2012/10/13", "$132,000" ],
        [ "Dai Rios", "Personnel Lead", "Edinburgh", "2290", "2012/09/26", "$217,500" ],
        [ "Jenette Caldwell", "Development Lead", "New York", "1937", "2011/09/03", "$345,000" ],
        [ "Yuri Berry", "Chief Marketing Officer (CMO)", "New York", "6154", "2009/06/25", "$675,000" ],
        [ "Caesar Vance", "Pre-Sales Support", "New York", "8330", "2011/12/12", "$106,450" ],
        [ "Doris Wilder", "Sales Assistant", "Sidney", "3023", "2010/09/20", "$85,600" ],
        [ "Angelica Ramos", "Chief Executive Officer (CEO)", "London", "5797", "2009/10/09", "$1,200,000" ],
        [ "Gavin Joyce", "Developer", "Edinburgh", "8822", "2010/12/22", "$92,575" ],
        [ "Jennifer Chang", "Regional Director", "Singapore", "9239", "2010/11/14", "$357,650" ],
        [ "Brenden Wagner", "Software Engineer", "San Francisco", "1314", "2011/06/07", "$206,850" ],
        [ "Fiona Green", "Chief Operating Officer (COO)", "San Francisco", "2947", "2010/03/11", "$850,000" ],
        [ "Shou Itou", "Regional Marketing", "Tokyo", "8899", "2011/08/14", "$163,000" ],
        [ "Michelle House", "Integration Specialist", "Sidney", "2769", "2011/06/02", "$95,400" ],
        [ "Suki Burks", "Developer", "London", "6832", "2009/10/22", "$114,500" ],
        [ "Prescott Bartlett", "Technical Author", "London", "3606", "2011/05/07", "$145,000" ],
        [ "Gavin Cortez", "Team Leader", "San Francisco", "2860", "2008/10/26", "$235,500" ],
        [ "Martena Mccray", "Post-Sales support", "Edinburgh", "8240", "2011/03/09", "$324,050" ],
        [ "Unity Butler", "Marketing Designer", "San Francisco", "5384", "2009/12/09", "$85,675" ]
    ];

    $(document).ready(function() {
        $('#example').DataTable( {
            data: dataSet,
            columns: [
                { title: "Name" },
                { title: "Position" },
                { title: "Office" },
                { title: "Extn." },
                { title: "Start date" },
                { title: "Salary" }
            ]
        } );
    } );
</script>
</html>

Datatables样式

保存状态

Datatables设置 stateSave选项后，可以保存最后一次分页信息、排序信息，当页面刷新，或者重新进入这个页面，恢复上次的状态。
这个状态的保存用了html5的本地储存和session储存，这样更加有效率。如果你的数据是异步获取的，你可以使用 stateSaveCallback和 stateLoadCallback选项.
需要注意的是，这个特性不支持ie6、ie7
默认情况下，这个状态会保存2小时，如果你希望设置的时间更长，通过设置参数 stateDuration来初始化表格
这个参数值也可以控制是本地储存(0~更大)还是session储存(-1) 

<body style="margin: 40px">

<table id="example" class="display" cellspacing="0" width="100%">

<thead>

<tr>

<th>Name</th>

<th>Position</th>

<th>Office</th>

<th>Age</th>

<th>Start date</th>

<th>Salary</th>

</tr>

</thead>


<tfoot>

<tr>

<th>Name</th>

<th>Position</th>

<th>Office</th>

<th>Age</th>

<th>Start date</th>

<th>Salary</th>

</tr>

</tfoot>


<tbody>

<tr>

<td>Tiger Nixon</td>

<td>System Architect</td>

<td>Edinburgh</td>

<td>61</td>

<td>2011/04/25</td>

<td>$320,800</td>

</tr>

<tr>

<td>Garrett Winters</td>

<td>Accountant</td>

<td>Tokyo</td>

<td>63</td>

<td>2011/07/25</td>

<td>$170,750</td>

</tr>

<tr>

<td>Ashton Cox</td>

<td>Junior Technical Author</td>

<td>San Francisco</td>

<td>66</td>

<td>2009/01/12</td>

<td>$86,000</td>

</tr>

<tr>

<td>Cedric Kelly</td>

<td>Senior Javascript Developer</td>

<td>Edinburgh</td>

<td>22</td>

<td>2012/03/29</td>

<td>$433,060</td>

</tr>

<tr>

<td>Airi Satou</td>

<td>Accountant</td>

<td>Tokyo</td>

<td>33</td>

<td>2008/11/28</td>

<td>$162,700</td>

</tr>

<tr>

<td>Brielle Williamson</td>

<td>Integration Specialist</td>

<td>New York</td>

<td>61</td>

<td>2012/12/02</td>

<td>$372,000</td>

</tr>

<tr>

<td>Herrod Chandler</td>

<td>Sales Assistant</td>

<td>San Francisco</td>

<td>59</td>

<td>2012/08/06</td>

<td>$137,500</td>

</tr>



<tr>

<td>Caesar Vance</td>

<td>Pre-Sales Support</td>

<td>New York</td>

<td>21</td>

<td>2011/12/12</td>

<td>$106,450</td>

</tr>

<tr>

<td>Doris Wilder</td>

<td>Sales Assistant</td>

<td>Sidney</td>

<td>23</td>

<td>2010/09/20</td>

<td>$85,600</td>

</tr>

<tr>

<td>Angelica Ramos</td>

<td>Chief Executive Officer (CEO)</td>

<td>London</td>

<td>47</td>

<td>2009/10/09</td>

<td>$1,200,000</td>

</tr>

<tr>

<td>Gavin Joyce</td>

<td>Developer</td>

<td>Edinburgh</td>

<td>42</td>

<td>2010/12/22</td>

<td>$92,575</td>

</tr>

<tr>

<td>Jennifer Chang</td>

<td>Regional Director</td>

<td>Singapore</td>

<td>28</td>

<td>2010/11/14</td>

<td>$357,650</td>

</tr>

<tr>

<td>Brenden Wagner</td>

<td>Software Engineer</td>

<td>San Francisco</td>

<td>28</td>

<td>2011/06/07</td>

<td>$206,850</td>

</tr>


</tbody>

</table>
</body>

<script type="text/javascript">
 $(document).ready(function () {
 $('#example').DataTable({
 stateSave: true
 });
 });
</script>
</html>

功能启用/禁用

如果你不想使用datatables的某项特性，那么你可以禁用它，下面的例子展示了只启用查找功能(默认是启用的)

<body style="margin: 40px">

<table width="100%" class="table table-striped " border="0"
cellpadding="0" cellpadding="0" id="khListPage">
<thead>
<tr>
<th>name</th>
<th>position</th>
<th>salary</th>
<th>start_date</th>
<th>office</th>
<th>extn</th>
</tr>
</thead>
<tbody>

</tbody>
</table>
</body>
<script type="text/javascript">
var data = [
 {
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$3,120",
"start_date": "2011/04/25",
"office": "Edinburgh",
"extn": "5421"
 },
 {
"name": "Garrett Winters",
"position": "Director",
"salary": "$5,300",
"start_date": "2011/07/25",
"office": "Edinburgh",
"extn": "8422"
 },
 {
"name": "Garrett Winters",
"position": "Director",
"salary": "$5,300",
"start_date": "2011/07/25",
"office": "Edinburgh",
"extn": "8422"
 },
 {
"name": "Garrett Winters",
"position": "Director",
"salary": "$5,300",
"start_date": "2011/07/25",
"office": "Edinburgh",
"extn": "8422"
 }
 ];

 $(document).ready(function(){
 $('#khListPage').DataTable({
 data:data,
//使用对象数组，一定要配置columns，告诉 DataTables 每列对应的属性
//data 这里是固定不变的，name，position，salary，office 为你数据里对应的属性
 columns: [
 { data: 'name' },
 { data: 'position' },
 { data: 'salary' },
 { data: 'start_date' },
 { data: 'office'},
 { data: 'extn'}
 ],
"paging": false,//取消分页
"ordering": false,//取消排序
"info": true //显示信息
 });
 });
</script>

垂直滚动条

如果在一个固定高度的容器里放table，这个时候可能需要用到垂直滚动条，才能展示所有数据。
开启垂直滚动条很简单，只要设置scrollY和scrollCollapse选项即可

<body style="margin: 40px">

<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>

<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>

<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
</table>
</body>
<script type="text/javascript">

 $(document).ready(function(){
 $('#example').DataTable({
"paging": false,//取消分页
"scrollY": "100px",//设置垂直滚动
"scrollCollapse": "true"//当显示更少的记录时，是否允许表格减少高度

 });
 });
</script>

水平和垂直滚动条

同时开启水平和垂直滚动条

$(document).ready(function() {
     $('#example').dataTable( {
"scrollY": 200,
"scrollX": true
     } );
 } );

表格自适应

表格设置了width为100%，表格随着页面的大小变化自动适应。 

width="100%
<table id="example" class="display" cellspacing="0" width="100%">

国际化

$(document).ready(function() {
         $('#example').dataTable( {
"language": {
"sProcessing": "正在加载中......",
"sZeroRecords":"没有匹配结果",
"sLengthMenu":"每页 _MENU_ 项",
"sInfo": "当前显示第 _START_ 至 _END_ 项，共 _TOTAL_ 项。",
"sInfoEmpty": "当前显示第 0 至 0 项，共 0 项",
"sInfoFiltered": "(由 _MAX_ 项结果过滤)",
"sSearch": "搜索:",
"sEmptyTable": "表中数据为空",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "上页",
"sNext": "下页",
"sLast": "末页",
"sJump": "跳转"
            }
         } );
 } );

排序

    $(document).ready(function () {
        $('#example').DataTable({
//跟数组下标一样，第一列从0开始，这里表格初始化时，第四列默认降序
"order":[[3,"desc"]]
        });
    });

Datatables自定义事件

Datatables有几个自定义事件，你可以用代码处理这些，比如当搜索事件触发的时候你要处理什么事情。这个例子演示使用当触发了搜索、排序、分页事件后打印日志

    $(document).ready(function () {
var table =  $('#example').DataTable();

        table.on('order.dt',function () {
            console.info("排序.....")
        }).on('search.dt',function () {
            console.info("搜索.....")
        }).on('page.dt',function () {
            console.info("翻页.....")
        })
    });

Dom/jQuery 事件(DOM / jQuery events)

点击事件

 $(document).ready(function () {
var table =  $('#example').DataTable();

        $('#example tbody').on('click', 'tr', function () {
var data = table.row( this ).data();
            alert( 'You clicked on '+data[0]+'\'s row' );
        } );
    });

列渲染

$(document).ready(function() {
    $('#example').dataTable({
"columnDefs": [{
"render": function(data, type, row) {
return data + ' (' + row[3] + ')';
            },
"targets": 0
        },
        {
"visible": false,
"targets": [3]
        }]
    });
});

Datatables嵌入Boostrap使用笔记

创建行回调

当工资大于94000的时候用高亮显示，columns.createdCell选项也可以实现同样的效果。

Datatables嵌入Boostrap使用笔记

<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>

<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>

<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$137,500</td>
</tr>
</tbody>
</table>
<script type="text/javascript">

 $(document).ready(function(){
 $('#example').DataTable({
"createdRow": function ( row, data, index ) {
//console.info(JSON.stringify("data--> "+JSON.stringify(data))));
 console.info(JSON.stringify("row--> "+JSON.stringify(row)));
if ( data[5].replace(/[\$,]/g, '') * 1 > 94000 ) {
 $('td', row).eq(5).css('font-weight',"bold").css("color","red");
 }
 }
 });
 });
</script>

Datatables嵌入Boostrap使用笔记

Datatables嵌入Boostrap使用笔记

自定义长度菜单的选项

使用lengthMenu选项来初始化选项，此选项支持两种参数方式，一种是一维数组，一种是二维数组，此例子演示的是二维数组的用法。

Datatables嵌入Boostrap使用笔记

    $(document).ready(function(){
        $('#example').DataTable({
"lengthMenu": [[2, 4, 6, -1], [2, 4, 6, "All"]]
        });
    });

显示选项10,25,50,75,100

$('#example').DataTable( {
"lengthMenu": [ 10, 25, 50, 75, 100 ]
} );

显示选项10,25,50,所有

$('#example').DataTable( {
"lengthMenu": [ [10, 25, 50, -1], [10, 25, 50, "所有"] ]
} );

表格foot回调

通过 footerCallback回调函数统计本页工资总数。

Datatables嵌入Boostrap使用笔记

<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
<th>Salary</th>
</tr>
</thead>

<tfoot>
<tr>
<th colspan="4" style="text-align:right">Total:</th>
<th></th>
</tr>
</tfoot>

<tbody>
<tr>
<td>Tiger</td>
<td>Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett</td>
<td>Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton</td>
<td>Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric</td>
<td>Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi</td>
<td>Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle</td>
<td>Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>$372,000</td>
</tr>
<tr>
<td>Tatyana</td>
<td>Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>$385,750</td>
</tr>
<tr>
<td>Jennifer</td>
<td>Chang</td>
<td>Regional Director</td>
<td>Singapore</td>
<td>$357,650</td>
</tr>
<tr>
<td>Brenden</td>
<td>Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>$206,850</td>
</tr>
<tr>
<td>Fiona</td>
<td>Green</td>
<td>Chief Operating Officer (COO)</td>
<td>San Francisco</td>
<td>$850,000</td>
</tr>
<tr>
<td>Bruno</td>
<td>Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>$163,500</td>
</tr>
<tr>
<td>Sakura</td>
<td>Yamamoto</td>
<td>Support Engineer</td>
<td>Tokyo</td>
<td>$139,575</td>
</tr>
<tr>
<td>Jennifer</td>
<td>Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>$75,650</td>
</tr>
<tr>
<td>Cara</td>
<td>Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>$145,600</td>
</tr>
<tr>
<td>Hermione</td>
<td>Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>$356,250</td>
</tr>
<tr>
<td>Lael</td>
<td>Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>$103,500</td>
</tr>
<tr>
<td>Jonas</td>
<td>Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>$86,500</td>
</tr>
<tr>
<td>Shad</td>
<td>Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>$183,000</td>
</tr>
<tr>
<td>Michael</td>
<td>Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>$183,000</td>
</tr>
<tr>
<td>Donna</td>
<td>Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>$112,000</td>
</tr>
</tbody>
</table>
$(document).ready(function() {
    $('#example').dataTable( {
"footerCallback": function ( row, data, start, end, display ) {
var api = this.api(), data;

// Remove the formatting to get integer data for summation
var intVal = function ( i ) {
return typeof i === 'string' ?
                    i.replace(/[\$,]/g, '')*1 :
typeof i === 'number' ?
                        i : 0;
            };

// Total over all pages
            total = api
                .column( 4 )
                .data()
                .reduce( function (a, b) {
return intVal(a) + intVal(b);
                } );

// Total over this page
            pageTotal = api
                .column( 4, { page: 'current'} )
                .data()
                .reduce( function (a, b) {
return intVal(a) + intVal(b);
                }, 0 );

// Update footer
            $( api.column( 4 ).footer() ).html(
'$'+pageTotal +' ( $'+ total +' total)'
            );
        }
    } );
} );

复杂的表头

下面的例子演示了怎么隐藏一列，还可以参考简单初始化例子

 $('#example').dataTable({
"columnDefs": [{
"visible": false,
"targets": -1
        }]
    });

-1 表示隐藏最后一列，0 表示隐藏第一列，0 表示正序，-1 表示倒序

标签：

相关文章