javascript - 如何自定义数据表中的表格?
问题描述
我搜索了很多链接,但没有得到任何自定义表格的解决方案。任何小建议都会有所帮助。
通常我们得到的数据表是这样的结构:
| col1 | col2 | col3 |
|---------------------------------------------------
| col1 row1 | col2 row1 | col3 row1 |
|---------------------------------------------------
| col1 row2 | col2 row2 | col3 row2 |
|---------------------------------------------------
现在我想要结构中的数据表,例如
| col1 | col2 | col3 |
|---------------------------------------------------
| | col2 row11 | col3 row11 |
| row1 -----------------------------------
| | col2 row2 1 | col3 row12 |
|---------------------------------------------------
解决方案
试试这个例子,
$(document).ready( function () {
var data = [
['subgroupN', 'Group1', 'sub-subgroupN', 'ElementN', '2Element N'],
['subgroup1', 'Group2', 'sub-subgroup1', 'Element1', '2Element 1'],
['subgroup2', 'Group2', 'sub-subgroup1', 'Element1', '2Element 1'],
['subgroup2', 'Group2', 'sub-subgroup1', 'Element2', '2Element 2'],
['subgroup2', 'Group2', 'sub-subgroup2', 'Element3', '2Element 2'],
['subgroup2', 'Group2', 'sub-subgroup2', 'Element4', '2Element 4'],
['subgroup2', 'Group2', 'sub-subgroup2', 'Element2', '2Element 2'],
['subgroup3', 'Group1', 'sub-subgroup1', 'Element1', '2Element 1'],
['subgroup3', 'Group1', 'sub-subgroup1', 'Element1', '2Element 1'],
['subgroup2', 'Group2', 'sub-subgroup2', 'Element1', '2Element 1'],
['subgroup4', 'Group2', 'sub-subgroup2', 'Element1', '2Element 1'],
['subgroup4', 'Group2', 'sub-subgroup3', 'Element10', '2Element 17'],
['subgroup4', 'Group2', 'sub-subgroup3', 'Element231', '2Element 211'],
];
var table = $('#example').DataTable({
columns: [
{
title: 'First group',
},
{
name: 'second',
title: 'Second group [order first]',
},
{
title: 'Third group',
},
{
title: 'Forth ungrouped',
},
{
title: 'Fifth ungrouped',
},
],
data: data,
rowsGroup: [// Always the array (!) of the column-selectors in specified order to which rows grouping is applied
// (column-selector could be any of specified in https://datatables.net/reference/type/column-selector)
'second:name',
0,
2
],
pageLength: '20',
});
} );
body {
font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
color: #333;
background-color: #fff;
}
div.container {
min-width: 980px;
margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<link href="//datatables.net/download/build/nightly/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="//datatables.net/download/build/nightly/jquery.dataTables.js"></script>
<script src="//cdn.rawgit.com/ashl1/datatables-rowsgroup/v1.0.0/dataTables.rowsGroup.js"></script>
<meta charset=utf-8 />
<title>DataTables - JS Bin</title>
</head>
<body>
<div class="container">
<table id="example" class="display" width="100%">
</table>
</div>
</body>
</html>
希望这会帮助你。
有关更多示例访问,
推荐阅读
- python - Pyinstaller 在不存在的文件夹中搜索
- excel - 如何在 Mac 上保存 Excel JS 加载项授权令牌(Excel JS 加载项)?
- java - 掷骰子游戏问题
- c# - Web 服务无法返回完整的 json
- php - 如何在 PHP 中实现 AES 128 ECB?
- ios - 在 SwiftUI 中从 ViewModel 访问 EnvironmentObject
- java - 如何以编程方式更改 Android Toggle/LabeledSwitch 边框颜色?
- c++ - WaitCommTimeout() 错误87“参数无效”等事项
- arrays - RPG YAJL 解析数组内的数组
- javascript - axios - 从 url 获取 gz 信息