Datatables是一款jquery表格插件

最新推荐文章于 2025-04-03 12:11:09 发布

王竹根

最新推荐文章于 2025-04-03 12:11:09 发布

阅读量4.3k

点赞数

分类专栏：前端文章标签： Datatables

本文链接：https://blog.youkuaiyun.com/dianziagen/article/details/79818311

版权

前端专栏收录该内容

21 篇文章

订阅专栏

本文介绍Datatables这款jQuery表格插件的使用方法，包括其特点、数据处理模式、数据源类型等，并提供了具体示例，展示了如何使用不同数据类型初始化表格及如何给表格行绑定选中事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Datatables

是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。

特点：
分页，即时搜索和排序
几乎支持任何数据源：DOM， javascript， Ajax 和服务器处理
支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation

Data

处理模式(Processing modes)

DataTables 中有两种不同的方式处理数据(排序、搜索、分页等):
客户端处理（Client）—— 所有的数据集预先加载（一次获取所有数据），数据处理都是在浏览器中完成的【逻辑分页】。
服务器端处理（ServerSide）—— 数据处理是在服务器上执行（页面只处理当前页的数据）【物理分页】。

每种模式都有自己的优点和缺点,选择哪种模式是由你的数据量决定的。根据经验来看,数据少于 10,000 行你可以选择客户端模式,超过 10,000 行的使用服务器端处理。

数据源类型(Data source types)

DataTables 使用的数据源必须是一个数组，数组里的每一项将显示在你定义的行上面，DataTables 可以使用三种基本的 JavaScript 数据类型来作为数据源：

数组(Arrays [])

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <meta charset="utf-8">
    <!--第一步：引入Javascript / CSS （CDN）-->
    <!-- DataTables CSS -->
    <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.css">

    <!-- jQuery -->
    <script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

    <!-- DataTables -->
    <script type="text/javascript" charset="utf8"
            src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                var data = [
                    [
                        "Tiger Nixon",
                        "System Architect",
                        "Edinburgh",
                        "5421",
                        "2011/04/25",
                        "$3,120"
                    ],
                    [
                        "Garrett Winters",
                        "Director",
                        "Edinburgh",
                        "8422",
                        "2011/07/25",
                        "$5,300"
                    ]
                ];
                //$('#table_id_example').DataTable();
                //然后 DataTables 这样初始化：
                $('#table_id_example').DataTable({
                    data: data
                });
            });
        });
    </script>
</head>
<body>

<button type="button">修改内容</button>
<!--第二步：添加如下 HTML 代码-->
<table id="table_id_example" class="display">
    <thead>
    <tr>
        <th>Nmae</th>
        <th>Position</th>
        <th>Office</th>
        <th>Extn.</th>
        <th>Start date</th>
        <th>Salary</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Row 1 Data 1</td>

    </tr>
    <tr>
        <td>Row 2 Data 1</td>

    </tr>
    </tbody>
</table>
</body>
</html>

对象(objects {})

对象看起来很直观，使用起来和数组略有不同。如果你已经参考了 API ，你可以知道通过对象获得特定的数据非常简单，你只需要使用一个属性的名字，而不是记住这个数组的索引，比如data.name，而不是data[0]

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"
        }
    ];
        //object可以如下初始化表格
    $('#example').DataTable( {
        data: data,
        //使用对象数组，一定要配置columns，告诉 DataTables 每列对应的属性
        //data 这里是固定不变的，name，position，salary，office 为你数据里对应的属性
        columns: [
            { data: 'name' },
            { data: 'position' },
            { data: 'salary' },
            { data: 'office' }
        ]
    } );

实例(new myclass())

DataTables 从实例中获取数据显示是非常有用的，这些实例可以定义成抽象的方法来更新数据。
注意,name,salary,position 是属性而office是一个方法，DataTables 允许这样使用，他会自动识别，详细见手册 columns.dataOption

以上为实例作为数据源的实例，效果如下：

function Employee ( name, position, salary, office ) {
        this.name = name;
        this.position = position;
        this.salary = salary;
        this._office = office;
 
        this.office = function () {
            return this._office;
        }
    };
 
    $('#example').DataTable( {
        data: [
            new Employee( "Tiger Nixon", "System Architect", "$3,120", "Edinburgh" ),
            new Employee( "Garrett Winters", "Director", "$5,300", "Edinburgh" )
        ],
        columns: [
            { data: 'name' },
            { data: 'salary' },
            { data: 'office()' },
            { data: 'position' }
        ]
    } );

给行绑定选中事件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <meta charset="utf-8">
    <!--第一步：引入Javascript / CSS （CDN）-->
    <!-- DataTables CSS -->
    <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.css">

    <!-- jQuery -->
    <script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

    <!-- DataTables -->
    <script type="text/javascript" charset="utf8"
            src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>
    <script>
        $(document).ready(function () {
            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"
                }
            ];
            var table = $('#table_id_example').DataTable({
                data: data,
                //这样配置后，即可用DT的API来访问表格数据
                columns: [
                    {data: "name"},
                    {data: "position"}
                ]
            });
            //给行绑定选中事件
            $('#table_id_example tbody').on( 'click', 'tr', function () {
                console.log("给行绑定选中事件");
                if ($(this).hasClass('selected')) {
                    $(this).removeClass('selected');
                }
                else {
                    table.$('tr.selected').removeClass('selected');
                    $(this).addClass('selected');
                }
            } );
            //给按钮绑定点击事件
            $("#table_id_example_button").click(function () {
                console.log("给按钮绑定点击事件");
                var column1 = table.row('.selected').data().name;
                var column2 = table.row('.selected').data().position;
                alert("第一列内容："+column1 + "；第二列内容： " + column2);
            });
            $("#button2").click(function () {
                console.log("button2");

            });
        });
    </script>
</head>
<body>

<button type="button" id="button2">修改内容</button>
<button type="button" id="table_id_example_button">给按钮绑定点击事件</button>
<!--第二步：添加如下 HTML 代码-->
<table id="table_id_example" class="display">
    <thead>
    <tr>
        <th>Nmae</th>
        <th>Position</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Row 1 Data 1</td>
    </tr>
    <tr>
        <td>Row 2 Data 1</td>
    </tr>
    </tbody>
</table>
</body>
</html>

。。。