Bootstrap之Datatables实践总结

来源：互联网发布：微商拍小视频的软件编辑：程序博客网时间：2024/06/10 17:06

下载

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 0