Bootstrap之Datatables实践总结

最新推荐文章于 2024-04-20 11:59:15 发布

海阳之新

最新推荐文章于 2024-04-20 11:59:15 发布

阅读量1.7k

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/vsiryxm/article/details/75353873

版权

HTML5 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

下载

https://www.datatables.net/download/download

页面排版

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>Datatables测试</title>
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="./media/js/jquery.dataTables.js"></script>
<link rel="stylesheet" type="text/css" href="./media/css/jquery.dataTables.css">
</head>

<body>
    <table cellpadding="0" cellspacing="0" width="100%" border="0" class="display" id="user-list">
        <!--表头开始-->
        <thead>
        <!--栏目头部 加一行划分-->
        <tr>
            <th colspan="3">基本信息</th><!--也可试试rowspan-->
            <th colspan="6">统计信息</th>
            <th colspan="1">操作</th>
        </tr>
        <!--栏目头部 加一行划分结束-->
        <!--表头开始-->
        <tr>
            <th>头像</th>
            <th>手机号码</th>
            <th>真实姓名</th>
            <th>活动报名次数</th>
            <th>签到次数</th>
            <th>VC贷投资价值（万元/月）</th>
            <th>固定基金投资价值（万元/月）</th>
            <th>私募股权投资价值（万元/月）</th>
            <th>积分（点）</th>
            <th>操作</th>
        </tr>
        </thead>
        <!--表头结束-->
        <!--表格正文开始 如果是ajax加载json数据形式，此处可以省去-->
        <tbody>
            <tr><td>11</td><td>22</td><td>33</td><td>44</td><td>55</td><td>66</td><td>77</td><td>88</td><td>99</td><td>100</td></tr>
        </tbody>
        <!--表格正文结束-->
    </table>
</body>
</html>

常用配置与数据加载

<script type="text/javascript">
        $(function() {
            $('#user-list').dataTable({
                "processing":true, //加载数据时显示进度状态
                "serverSide": true,
                "paging":   true, //显示分页功能
                "ordering": true, //在栏目列上显示排序功能
                "info":     true, //显示左下角记录总计信息
                "order": [[ 1, "desc"]], //默认按第2列降序排序
                "stateSave": true, //保存表的状态（其页面位置，排序状态等）内置的状态保存方法使用HTML5 localStorage和sessionStorageAPI来高效地存储数据。
                "pagingType": "full_numbers", //替代分页，显示所有分页数字
                /*"columnDefs": [
                    {
                        "targets": [ 2 ],
                        "visible": false, //第三列不可见
                        "searchable": false //第三列不参与内容搜索
                    },
                    {
                        "targets": [ 3 ],
                        "visible": false
                    }
                ],*/

                /* 如果想一页显示全部数据，可以显示滚动条，可以规定可视区域的高度
                "scrollY":        "400px",//也可以使用vh单位来根据浏览器窗口高度自动调整表格高度，50vh相当于浏览器屏幕的50%
                "scrollCollapse": true,
                "paging":         false,
                */
                /*
                "scrollX": true, //当表格外的容器宽度小于表格宽度时，可启用水平滚动条
                */
                /* 显示水平垂直滚动条
                "scrollY": 200,
                "scrollX": true,
                */
                "deferRender": true, //延迟渲染速度
                "ajax": {
                    'url':'/admin/user/getUserData',
                    'type':'post',
                    'data':function(d) {
                        d.y='阳新民';
                        d.x=222;    
                    }
                }, 
                "columns": [
                    { "data": "avatar" },
                    { "data": "mobile" },
                    { "data": "uname" },
                    { "data": "admin_id" },
                    //支持关联数组的子项读取 { "data": "hr.position" },
                    //支持索引数组的子项读取 { "data": "contact.0" }, 
                    { "data": "admin_id" },
                    { "data": "admin_id" },
                    { "data": "admin_id" },
                    { "data": "admin_id" },
                    { "data": "y" },
                    { "data": "x" }
                ]
            });
</script>

表格样式

<table cellpadding="0" cellspacing="0" width="100%" border="0" class="样式占位" id="user-list">

表格样式有以下几种：
空，则为最简风格
display，则为基本风格
cell-border，则为有表格边框，包括左右两边纵向线
compact，则为紧凑风格
hover，则为悬停，有光棒效果
order-column，则为当前排序列灰底显示
row-border，则为行边框风格，每行加边框线
stripe，则为条纹风格，灰白相间背景显示
display，引入dataTables.jqueryui.js后，则为透明玻璃效果
mdl-data-table，则为材质设计风格

样式还可以组合使用，如：
display compact，则为基本+紧凑风格
row-border hover，则为每行加边框线，且有光棒效果
table table-striped table-bordered 则为引导风格，有基本的表格线框，有灰白相间背景，有格子左右竖线
table table-striped table-bordered，引入dataTables.bootstrap4.js后，则为Bootstrap 4风格
ui celled table，则为UI风格，很完美，个人推荐，但需要多引入css和js：dataTables.semanticui.js，semantic.min.js，semantic.min.css，dataTables.semanticui.css
uk-table uk-table-hover uk-table-striped，则为UIKit风格

海阳之新

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap之Datatables实践总结

下载https://www.datatables.net/download/download调用<!DOCTYPE html><head><meta charset="utf-8" /><title>Datatables测试</title><script src="//code.jquery.com/jquery-1.12.4.js"></script><script src="./med
复制链接

扫一扫