Datatables嵌入Boostrap使用笔记

其他 2018-05-17 05:12:10 阅读次数: 2

参考地址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有许多方法来获取你的数据，如果你的数据量比较大，这个时候你需要使用服务器模式来处理你的数据。 在服务器模式下，所有的分页，搜索，排序等操作，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>

实例

这里写图片描述

<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]
        }]
    });
});

这里写图片描述

创建行回调

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

这里写图片描述

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

这里写图片描述

这里写图片描述

自定义长度菜单的选项

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

这里写图片描述

    $(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回调函数统计本页工资总数。

这里写图片描述

<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 表示倒序

猜你喜欢

转载自blog.csdn.net/peng_hong_fu/article/details/78115444
今日推荐
周排行
Leetcode简单题61~80
解决zookeeper磁盘IO高的问题
多线程相关方法详解
Maven-setting.xml文件详解
Maven 项目的 classpath 理解
渊亭科技大数据笔试题
配置JVM内存分配
计算机网络个人学习笔记 （三）网络层 ：第三部分 连载
js中两个等号(==)和三个等号(===)的区别
用C程序自动打开电脑上的程序
每日归档
更多
2024-09-18(0)
2024-09-17(0)
2024-09-16(0)
2024-09-15(0)
2024-09-14(0)
2024-09-13(0)
2024-09-12(0)
2024-09-11(0)
2024-09-10(0)
2024-09-09(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022