DataTables高级初始化

最新推荐文章于 2024-03-28 09:19:43 发布

夜飞鼠

最新推荐文章于 2024-03-28 09:19:43 发布

阅读量902

点赞数

分类专栏： DataTables 前端文章标签： jquery 前端 javascript Powered by 金山文档

本文链接：https://blog.csdn.net/nmmking/article/details/129039161

版权

前端同时被 2 个专栏收录

13 篇文章 1 订阅

订阅专栏

DataTables

6 篇文章 0 订阅

订阅专栏

1.说明

DataTables高级初始化比基本初始化提供更多扩展选项设置，你可以通过选项的组合和回调展现表格所需的内容。

1.1 DOM/jQuery事件

本示例是通过jQuery的方法使用委托事件，当用户点击某一行，弹出该行首列字段内容。

脚本：

    <script>
        $(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");
            });
        });
    </script>

效果图：

1.2 DataTables 事件

DataTables提供很多自定义事件，你可以通过jQuery方式绑定这些事件，需要注意的是必须使用dt这个命名空间。

本示例通过页面的显示调用的时间，从而确认顺序、搜索和页面事件已被使用。

脚本：

$(document).ready(function () {
    var eventFired = function (type) {
        var n = $('#demo_info')[0];
        n.innerHTML += '<div>' + type + ' event - ' + new Date().getTime() + '</div>';
        n.scrollTop = n.scrollHeight;
    };
 
    $('#example')
        .on('order.dt', function () {
            eventFired('Order');
        })
        .on('search.dt', function () {
            eventFired('Search');
        })
        .on('page.dt', function () {
            eventFired('Page');
        })
        .DataTable();
});

效果图：

1.3 DataTables列渲染

每一列都有可选呈现空间columns.render，可以用于添加链接、根据内容规则分配颜色以及其他形式的文本操作。

本示例在第一列显示了年龄以及姓名，隐藏年龄列。

脚本：

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

效果图：

1.4 输入要搜索的关键字

Datatables提供的搜索框是响应式的，输入每一个字符便搜索一次。当表格有大量数据时，多次搜索会增加处理时间。

本示例通过使用search.return，以便仅在按下Enter键时触发搜索。

脚本：

    <script>
    $(document).ready(function () {
        $('#example').DataTable({
            search: {
                return: true,
            },
        });
    });
    </script>

效果图：

1.5 页面长度选项

使用lengthMenu Option初始化选项，可以自定义长度菜单中显示的选项。

第一个数组用于定义值选项，第二个数组用于显示选项。

脚本：

    <script>
    $(document).ready(function () {
        $('#example').DataTable({
            lengthMenu: [
                [10, 25, 50, -1],     // 定义值选项
                [10, 25, 50, 'All'],// 用于显示选项
            ],
        });
    });
    </script>

效果图：

1.6 多个表控制元素

Datatables可以使用dom创建表控件的多个实例，这些控件可以全部同步。

脚本：

    <script>
    $(document).ready(function () {
        $('#example').DataTable({
            dom: '<"top"iflp<"clear">>rt<"bottom"iflp<"clear">>',
        });
    });
    </script>

样式：

    <style type="text/css">
        div.dataTables_length {
            padding-left: 2em;
        }
        div.dataTables_length,
        div.dataTables_filter {
            padding-top: 0.55em;
        }
    </style>

效果图：

红框的4个内置的表控制元素一一对应。

1.7 列设置可见性的复杂标题

本示例显示了一个在联系人信息上跨多个单元格的标题，其中一列是隐藏的。

脚本：

    <script>
    $(document).ready(function () {
        $('#example').DataTable({
            columnDefs: [
                {
                    visible: false,
                    targets: -1,
                },
            ],
        });
    });
    </script>

HTML：

效果图：

1.8 将HTML读取到数据对象

当DataTables从HTML表读取表内容时，默认情况下，它会将表中的信息读取到DataTables内部存储的数组中。每个数组元素表示一列。

脚本：

$(document).ready(function () {
    $('#example').DataTable({
        columns: [
            { data: 'name' },
            { data: 'position' },
            { data: 'office' },
            { data: 'age' },
            { data: 'start_date' },
            { data: 'salary' },
        ],
    });
});

1.9 HTML5数据属性-单元格数据

本示例显示数据排序data-sort和数据过滤data-filter属性的使用。

脚本：

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

HTML:

效果图：

1.10 HTML5数据属性-表选项

从DataTables1.10.5开始，可以用数据属性定义初始化选项。

脚本：

    <script>
    $(document).ready(function () {
        $('#example').DataTable();
    });
    </script>

HTML：

    <table id="example" class="display" width="100%" data-page-length="5" data-order="[[ 1, &quot;asc&quot; ]]">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th data-orderable="false">Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>T. Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>Mon 25th Apr 11</td>
                <td>$320,800/y</td>
            </tr>
            <tr>
                <td>G. Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>Mon 25th Jul 11</td>
                <td>$170,750/y</td>
            </tr>
            <tr>
                <td>A. Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>Mon 12th Jan 09</td>
                <td>$86,000/y</td>
            </tr>
            <tr>
                <td>C. Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>Thu 29th Mar 12</td>
                <td>$433,060/y</td>
            </tr>
            <tr>
                <td>Quinn Flynn</td>
                <td>Support Lead</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2013/03/03</td>
                <td>$342,000</td>
            </tr>
            <tr>
                <td>Charde Marshall</td>
                <td>Regional Director</td>
                <td>San Francisco</td>
                <td>36</td>
                <td>2008/10/16</td>
                <td>$470,600</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
    </table>

1.11 设置默认值

使用$.fn.dataTable.defaults对象将初始化默认值设置为公共值，该对象可以保存DataTables初始化对象的所有参数。

本示例在初始化时禁用DataTables的搜索和排序功能。

脚本：

    <script>
    $.extend(true, $.fn.dataTable.defaults, {
        searching: false,
        ordering: false,
    });
     
    $(document).ready(function () {
        $('#example').DataTable();
    });
    </script>

1.12 行创建回调

脚本：

$(document).ready(function () {
    $('#example').DataTable({
        createdRow: function (row, data, index) {
            if (data[5].replace(/[\$,]/g, '') * 1 > 150000) {
                $('td', row).eq(5).addClass('highlight');
            }
        },
    });
});

样式：

    <style type="text/css">
        td.highlight {
        font-weight: bold;
        color: red;
    }
    </style>

效果图：

1.13行分组

DataTables提供一个对行分组的API。

脚本：

    <script>
    $(document).ready(function () {
        var groupColumn = 2;
        var table = $('#example').DataTable({
            columnDefs: [{ visible: false, targets: groupColumn }],
            order: [[groupColumn, 'asc']],
            displayLength: 25,
            drawCallback: function (settings) {
                var api = this.api();
                var rows = api.rows({ page: 'current' }).nodes();
                var last = null;
     
                api.column(groupColumn, { page: 'current' })
                    .data()
                    .each(function (group, i) {
                        if (last !== group) {
                            $(rows).eq(i).before('<tr class="group"><td colspan="5">' + group + '</td></tr>');
     
                            last = group;
                        }
                    });
            },
        });
     
        
        $('#example tbody').on('click', 'tr.group', function () {
            var currentOrder = table.order()[0];
            if (currentOrder[0] === groupColumn && currentOrder[1] === 'asc') {
                table.order([groupColumn, 'desc']).draw();
            } else {
                table.order([groupColumn, 'asc']).draw();
            }
        });
    });
    </script>

样式：

    <style type="text/css">
    tr.group,
    tr.group:hover {
        background-color: #ddd !important;
    }
    </style>

效果图：

1.14页脚回调

页脚：

    <script>
    $(document).ready(function () {
        $('#example').DataTable({
            footerCallback: function (row, data, start, end, display) {
                var api = this.api();
     
                // 删除格式以获取用于求和的整数数据
                var intVal = function (i) {
                    return typeof i === 'string' ? i.replace(/[\$,]/g, '') * 1 : typeof i === 'number' ? i : 0;
                };
     
                // 所有页面总计
                total = api
                    .column(4)
                    .data()
                    .reduce(function (a, b) {
                        return intVal(a) + intVal(b);
                    }, 0);
     
                // 本页总计
                pageTotal = api
                    .column(4, { page: 'current' })
                    .data()
                    .reduce(function (a, b) {
                        return intVal(a) + intVal(b);
                    }, 0);
     
                // 更新页脚
                $(api.column(4).footer()).html('$' + pageTotal + ' ( $' + total + ' total)');
            },
        });
    });
    </script>

样式：

    <style type="text/css">
    th { white-space: nowrap; }
    </style>

效果图：

例子下载

夜飞鼠

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
DataTables高级初始化

当DataTables从HTML表读取表内容时，默认情况下，它会将表中的信息读取到DataTables内部存储的数组中。每个数组元素表示一列。DataTables提供很多自定义事件，你可以通过jQuery方式绑定这些事件，需要注意的是必须使用dt这个命名空间。DataTables高级初始化比基本初始化提供更多扩展选项设置，你可以通过选项的组合和回调展现表格所需的内容。本示例通过页面的显示调用的时间，从而确认顺序、搜索和页面事件已被使用。本示例显示了一个在联系人信息上跨多个单元格的标题，其中一列是隐藏的。
复制链接

扫一扫