JQuery插件之-----Datatables(二)jQuery-UI风格的垂直滚动条

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

码农致富

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

阅读量5.8k

点赞数

分类专栏： JQuery 文章标签： jquery插件 DataTables

本文链接：https://blog.csdn.net/u011781521/article/details/52988188

版权

JQuery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

这个例子展示了Datatables使用jQuery-ui主题。

引入jqueryui的样式

http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css
http://cdn.datatables.net/plug-ins/be7019ee387/integration/jqueryui/dataTables.jqueryui.css

源码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>datatables_2</title>

<link rel="stylesheet" type="text/css" href="css/jquery-ui.css">

<link rel="stylesheet" type="text/css" href="css/dataTables.jqueryui.min.css">


<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/jquery.dataTables.min.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>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>

        </tbody>
    </table>

<script type="text/javascript">
    
$(document).ready(function() {
    $('#example').dataTable( {
        "scrollY":        200,
        "scrollCollapse": true,
        "jQueryUI":       true
    } );
} );
</script>

</body>
</html>

效果为:

完整demo下载地址:http://download.csdn.net/detail/u011781521/9669511

码农致富

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JQuery插件之-----Datatables(二)jQuery-UI风格的垂直滚动条

这个例子展示了Datatables使用jQuery-ui主题。引入jqueryui的样式http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.csshttp://cdn.datatables.net/plug-ins/be7019ee387/integration/jqueryui/dataTables.
复制链接

扫一扫

专栏目录