JQuery插件Datatables，使用例子

最新推荐文章于 2023-10-13 11:16:05 发布

xtf__moji

最新推荐文章于 2023-10-13 11:16:05 发布

阅读量218

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/GoOnDrift/article/details/102741747

版权

js 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

一、简单介绍
Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。
特点有:
    ◆分页，即时搜索和排序
    ◆几乎支持任何数据源：DOM， javascript， Ajax 和服务器处理
    ◆支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation
    ◆各式各样的扩展: Editor, TableTools, FixedColumns ……
    ◆丰富多样的option和强大的API
    ◆支持国际化
    ◆超过2900+个单元测试
    ◆免费开源
    ◆更多特性请到官网查看

官网:https://www.datatables.net/

中文网:http://datatables.club/

这是官网提供的一个demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
 
 
    <link rel="stylesheet" type="text/css" href="css/jquery.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="css/demo.css">
 
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="js/demo.js"></script>
</head>
<body>
    <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>Paul Byrd</td>
                <td>Chief Financial Officer (CFO)</td>
                <td>New York</td>
                <td>64</td>
                <td>2010/06/09</td>
                <td>$725,000</td>
            </tr>
            <tr>
                <td>Gloria Little</td>
                <td>Systems Administrator</td>
                <td>New York</td>
                <td>59</td>
                <td>2009/04/10</td>
                <td>$237,500</td>
            </tr>
 
        </tbody>
    </table>
 
<script type="text/javascript">
    
    $(document).ready(function() {
     $('#example').dataTable();
});
</script>
 
</body>
</html>

运行效果为这样:

使用json数组加载

$(document).ready(function() {
    $('#example').DataTable( {
        "ajax": "data/objects.txt",
        "columns": [
            { "data": "name" },
            { "data": "position" },
            { "data": "office" },
            { "data": "extn" },
            { "data": "start_date" },
            { "data": "salary" }
        ]
    } );
} );

参考资料：

JQuery插件之-----Datatables(一)一个简单的例子

https://blog.csdn.net/u011781521/article/details/52987400

Datatables也可以直接接受一个js数组来初始化表格

http://www.datatables.club/example/data_sources/js_array.html

Datatables支持json数组

https://datatables.net/examples/ajax/objects.html

xtf__moji

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery插件Datatables，使用例子

一、简单介绍Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。特点有: ◆分页，即时搜索和排序 ◆几乎支持任何数据源：DOM， javascript， Ajax 和服务器处理 ◆支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation ◆各式各样的扩展:...
复制链接

扫一扫

专栏目录