Bootstrap DataTable 表头设计

最新推荐文章于 2024-06-06 16:19:15 发布
最新推荐文章于 2024-06-06 16:19:15 发布
阅读量1.1k 收藏 2
点赞数
分类专栏： 前端技术 文章标签： Bootstrap DataTable
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012835032/article/details/119886157
版权

记录一下Bootstrap的DataTable，省得忘了。。。

项目中，有时候会遇到比较复杂的DataTable的头部需求，就像下图这样的。

表头（加粗字体的部分）包括三行，第三行就是对应得DataTable的字段，不需要分组的话，字段列会占三行，比如字段A、B、C；需要分组的话，表头的一、二行需要合并列，字段就只占一行或者两行，比如字段E-1、E-2、E-2-1。

下面来看看怎么用Bootstrap去构造一个这样的表格的。

1、需要在页面导入Bootstrap

<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

2、构造table

在table的thead添加3个tr标签，然后根据需求，看第一行是否有第二行（或第三行），选择是用rowspan还是colspan。如果第一行的一个column在第二、第三行没有包含多个字段，那么用rowspan="3"；如果有包含多个字段用colspan="3"（里面的数字可换成N个，代表包含下一行的字段个数）。如果第二行的一个column在第三行中没有多个字段，那么用rowspan="2"；如果有多个就参考第一行的情况。第三行就是列表的字段，如果该字段不包含复杂的头部结构，第一行既是第三行。

rowspan：表示合并N行

colspan：表示合并N个单元格

（我们这里是用一个三行表头举例子，其他行数的表头也差不多的做法）

详细请参考代码

<thead>
    <tr>
        <th rowspan="3">A</th>
        <th rowspan="3">B</th>
        <th rowspan="3">C</th>
        <th rowspan="3">D</th>
        <th colspan="3">E</th>
        <th colspan="4">F</th>
        <th rowspan="3">G</th>
        <th colspan="12">H</th>
        <th colspan="4">I</th>
        <th rowspan="3">J</th>
    </tr>
    <tr>
        <th rowspan="2">E-1</th>
        <th rowspan="2">E-2</th>
        <th rowspan="2">E-3</th>
        <th rowspan="2">F-1</th>
        <th colspan="3">F-2</th>
        <th rowspan="2">H-1</th>
        <th colspan="9">H-2</th>
        <th rowspan="2">H-3</th>
        <th rowspan="2">H-4</th>
        <th rowspan="2">I-1</th>
        <th rowspan="2">I-2</th>
        <th rowspan="2">I-3</th>
        <th rowspan="2">I-4</th>
    </tr>
    <tr>
        <th>F-2-1</th>
        <th>F-2-2</th>
        <th>F-2-3</th>
        <th>H-2-1</th>
        <th>H-2-2</th>
        <th>H-2-3</th>
        <th>H-2-4</th>
        <th>H-2-5</th>
        <th>H-2-6</th>
        <th>H-2-7</th>
        <th>H-2-8</th>
        <th>H-2-9</th>
    </tr>
</thead>

3、加上一些必要的样式，让表格看起来顺眼一点。

这样一个拥有三行复合表头的数据表格就出来了

全部代码如下

@page
@model IndexModel
@{
    ViewData["Title"] = "Home page";
}

<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div>
    <div class="tab-content" style="overflow:hidden;margin-top:20px;">
        <table id="list" class="table table-bordered text-nowrap dataTableList2">
            <thead>
                <tr>
                    <th rowspan="3">A</th>
                    <th rowspan="3">B</th>
                    <th rowspan="3">C</th>
                    <th rowspan="3">D</th>
                    <th colspan="3" style="text-align:center;">E</th>
                    <th colspan="4" style="text-align: center;">F</th>
                    <th rowspan="3">G</th>
                    <th colspan="12" style="text-align: center;">H</th>
                    <th colspan="4" style="text-align: center;">I</th>
                    <th rowspan="3">J</th>
                </tr>
                <tr style="text-align:center;">
                    <th rowspan="2">E-1</th>
                    <th rowspan="2">E-2</th>
                    <th rowspan="2">E-3</th>
                    <th rowspan="2">F-1</th>
                    <th colspan="3" style="text-align:center;">F-2</th>
                    <th rowspan="2">H-1</th>
                    <th colspan="9" style="text-align:center;">H-2</th>
                    <th rowspan="2">H-3</th>
                    <th rowspan="2" style="text-align:center;">H-4</th>
                    <th rowspan="2">I-1</th>
                    <th rowspan="2">I-2</th>
                    <th rowspan="2">I-3</th>
                    <th rowspan="2" style="border-right: 1px solid rgb(222, 226, 230)">I-4</th>
                </tr>
                <tr style="text-align:center;">
                    <th>F-2-1</th>
                    <th>F-2-2</th>
                    <th>F-2-3</th>
                    <th>H-2-1</th>
                    <th>H-2-2</th>
                    <th>H-2-3</th>
                    <th>H-2-4</th>
                    <th>H-2-5</th>
                    <th>H-2-6</th>
                    <th>H-2-7</th>
                    <th>H-2-8</th>
                    <th style="border-right: 1px solid rgb(222, 226, 230)">H-2-9</th>
                </tr>
            </thead>
            <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>AA</td>
                    <td>SS</td>
                    <td>DD</td>
                    <td>FF</td>
                    <td>GG</td>
                    <td>HH</td>
                    <td>ZZ</td>
                    <td>XX</td>
                    <td>CC</td>
                    <td>VV</td>
                    <td>BB</td>
                    <td>NN</td>
                    <td>MM</td>
                    <td>JJ</td>
                    <td>KK</td>
                    <td>LL</td>
                    <td>QQ</td>
                    <td>WW</td>
                    <td>EE</td>
                    <td>RR</td>
                </tr>
                <tr>
                    <td>MM</td>
                    <td>JJ</td>
                    <td>KK</td>
                    <td>LL</td>
                    <td>QQ</td>
                    <td>WW</td>
                    <td>EE</td>
                    <td>RR</td>
                    <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>AA</td>
                    <td>SS</td>
                    <td>DD</td>
                    <td>FF</td>
                    <td>GG</td>
                    <td>HH</td>
                    <td>ZZ</td>
                    <td>XX</td>
                    <td>CC</td>
                    <td>VV</td>
                    <td>BB</td>
                    <td>NN</td>
                </tr>
                <tr>
                    <td>AA</td>
                    <td>SS</td>
                    <td>DD</td>
                    <td>FF</td>
                    <td>GG</td>
                    <td>HH</td>
                    <td>ZZ</td>
                    <td>XX</td>
                    <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>CC</td>
                    <td>VV</td>
                    <td>BB</td>
                    <td>NN</td>
                    <td>MM</td>
                    <td>JJ</td>
                    <td>KK</td>
                    <td>LL</td>
                    <td>QQ</td>
                    <td>WW</td>
                    <td>EE</td>
                    <td>RR</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<script>
    $(function () {
        $("#list").wrap("<div style='overflow:auto; width:100%;position:relative;'></div>");
    })
</script>

效果图如下 

郑小晨
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
datetables ---- 表头变动，隐藏，展开，样式
萨萨的博客
10-20 1229
需求描述：datetables 写入的列表中， 默认有固定的字段，点击展开之后，可以看见更多的字段， 展开中的字段有一部分是根据返回的长度来显示，比如 一个用户A 只有两个课程，那么展示两个课程字段， 用户B 有四个课程，那么现实四个课程。另一部分是展开之后肯定会显示的 固定的字段 1， class 样式定义： HTML的按钮 点击之后 跳转处理的方法 varinfo=dt.page.info(); varcur_page=info.page; dt.page(cu...
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
10-17
在Bootstrap开发框架中，使用dataTable直接录入表格行数据是一种高效且直观的方式，尤其适用于处理简单业务的明细数据。与传统的弹出窗口录入相比，这种方式在Web应用中提供了更友好的用户体验，增强了数据录入的...
bootstrap中固定table的表头
懒人的博客
11-02 3万+
bootstrap中固定table的表头
bootstrapTable根据动态因子生成动态多行表头
wan小小冰的博客
05-05 3646
根据项目需要，前端需要实现根据用户选择的因子来生成动态多行表头，经测试发现，多行表头其实就是由多维数组实现，只要将自己的数据按照bootstrapTable数据格式拼接成所对应的数组就可以实现功能，本文为实现代码供大家参考： 【注】前端html页面需要引入对应的库， 如：bootstrap-table.js、bootstrap-table-zh-CN.js、bootstrap-table.css、...
Jquery.dataTables数据表格设置复合表头
最新发布
QINGZHID的博客
06-06 308
使用dataTables数据表格的复杂表头报错
BootStrap-DataTables教程
ajavaer的博客
01-02 1万+
本文3个部分一：什么是DataTablesDatatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。 分页，即时搜索和排序 几乎支持任何数据源：DOM， javascript， Ajax 和 服务器处理 支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation 各式各样的扩展: Editor
Bootstrap的Datatable详解
热门推荐
mingtianhaiyouwo的博客
11-24 3万+
$('#scenerytable').dataTable({ "sDom": "r>>", "bProcessing": true,//显示正在处理 "bServerSide": true,//延迟加载 "bPaginate": true,//显示（使用）分页器
bootstrap-dataTable的使用
u010652906的专栏
08-13 9673
上代码 数据 js代码 $(&amp;amp;quot;#gzTables&amp;amp;quot;).dataTable({ //lengthMenu: [5, 10, 20, 30],//这里也可以设置分页，但是不能设置具体内容，只能是一维或二维数组的方式，所以推荐下面language里面的写法。 lengthChange: false, destroy: true,//允许销毁替换 ...
强大的表格控件-Datatables
陌上花开，可缓缓归矣
02-27 2万+
背景介绍是不是习惯了EasyUI封装的DataGrid表格，传入一个json串，就可以自动加载数据，显示分页，还能实现一些特殊需求，如行内编辑，操作列等。而使用bootstrap表格的话，则需要完全自己手写table和分页控件，并且将两者组合到一起，才是个完整的表格，代码量大不说，如果需要实现一些特殊的需求，行内编辑等那就更加繁琐了。 Datatables所以我寻找到了一款bootstrap风格的第
Jquery DataTable基于Twitter Bootstrap的样式
05-15
Jquery DataTable是一个很不错的表格插件。 1、功能强大，支持分页、服务器分页、表头表格等样式自定义 2、支持jedit等其他Jquery插件 3、支持ajax、dom、json等数据源； 4、众多使用者的实例代码
Bootstrap-表格模板（动态满屏）【筛选+分页+排序】
12-26
在Bootstrap表格模板中，表格的设计基于其内置的表格类，例如`table-striped`（条纹效果）、`table-bordered`（边框）和`table-hover`（鼠标悬停高亮）。这些类可以轻松地应用到HTML表格元素上，提供美观且一致的...
bootstrap+datatable插件
12-19
这是一个datatable插件，并结合了bootstrap的样式和jQuery插件等等，要使用datatale，需要先导入jQuery，如果要使用bootstrap的表格样式，需导入bootstrap的原样式和资源中的bootstrap-3.3.7-dist\datatables_plugins\integration\bootstrap\文件下面的bootstrap样式
datatables固定头与滚动条适配文件
12-28
解决datatables出现FixedHeader 2 is not supported with DataTables' scrolling mode at this time的问题
修改DataTable的列名的三种方法
02-24
修改DataTable的列名的三种方法
DataTable插件
10-29
DataTables支持Bootstrap和其他CSS框架的样式集成，可以轻松调整表格的外观以适应不同的设计需求。 7. **API** DataTables提供丰富的API，允许在运行时动态修改表格配置，例如加载新数据、改变排序、更新行等。...
jquery datatable
09-09
6. **扩展功能**：DataTables提供了许多插件和扩展，如Responsive（响应式设计）、Buttons（按钮工具栏）和FixedHeader（固定表头）等，以增强用户体验。 7. **API和回调函数**：DataTables提供了丰富的API接口和回...
Bootstrap Table 表格参数详解
weixin_30556161的博客
08-02 351
表格参数 名称 标签 类型 默认 描述 - data-toggle String 'table' 不用写 JavaScript 直接启用表格。 classes data-classes String 'table table-hover' 表格的类名称。默认情况下，表格是有边框的，你可以...
DataTable动态表头
玻璃渣渣瓶的随笔记录
06-26 7065
jsp部分（此处只有table 其他无关）： &lt;table id="dataTable" class="table table-striped table-list table-bordered" width="100%"&gt;     &lt;thead&gt;            &lt;tr id="colTr"&gt;            &lt;/
Datables修改表头（三）
yuan487639的博客
09-07 905
background 根据某些条件查询到的表格，表格标题可能不一样，同时，表格列数也可能变化 solution 少说废话，直接最粗暴的解决方案。如果表格已经初始化，销毁表格，重置表头，然后重绘 if (table_init) $("#table").DataTable().destroy(); $("#table").empty(); $("#table").appe
bootstrap datatable
04-06
bootstrap datatable 是一种基于 Bootstrap 框架的表格插件，它可以快速地在网页中创建出美观、易用、具有交互性的表格。它具有丰富的功能、灵活的配置、高效的性能等特点，是 web 开发中常用的工具之一。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

郑小晨

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值