程序员经验分享-hwhale

如何在 dataTable.js 中转置行和列

2024-06-19

我想在行而不是列中显示我的数据。 （转置）你可以在这里看到我的例子。

var dataSet = [
    [ "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800" ],
    [ "Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750" ],
    [ "Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12", "$86,000" ],
    [ "Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "6224", "2012/03/29", "$433,060" ],
    [ "Airi Satou", "Accountant", "Tokyo", "5407", "2008/11/28", "$162,700" ]
];
 
$(document).ready(function() {
    $('#example').DataTable( {
        data: dataSet,
        columns: [
            { title: "Name" },
            { title: "Position" },
            { title: "Office" },
            { title: "Extn." },
            { title: "Start date" },
            { title: "Salary" }
        ]
    } );
} );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/jquery.dataTables.min.js"></script>

<table id="example" class="display" width="100%"></table>

jsfiddle 链接 http://jsfiddle.net/Lkyxegnf

在我的示例中，我的类别（姓名、职位、办公室、分机、开始日期、工资）固定在列中。我的数据显示在行中。我想用我的类别修复行。我怎样才能做到这一点？


尝试这个..

var dataSet = [
    [ "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800" ],
    [ "Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750" ],
    [ "Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12", "$86,000" ],
    [ "Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "6224", "2012/03/29", "$433,060" ],
    [ "Airi Satou", "Accountant", "Tokyo", "5407", "2008/11/28", "$162,700" ]
];
 
$(document).ready(function() {
    $('#example').DataTable( {
        data: dataSet,
        columns: [
            { title: "Name" },
            { title: "Position" },
            { title: "Office" },
            { title: "Extn." },
            { title: "Start date" },
            { title: "Salary" }
        ]
    } );
} );
table { border-collapse: collapse; }
tr ,thead{ display: block; float: left; }
th, td { display: block; border: 1px solid black; }
tbody{display: block;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="example" class="display" width="100%"></table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/jquery.dataTables.min.js"></script>

其他方式.. 使用转置表 jQuery 插件 https://www.jqueryscript.net/table/Transpose-Table-jQuery-Plugin.html

更新了答案链接：http://jsfiddle.net/t73danpb/4/ http://jsfiddle.net/t73danpb/4/

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

jQuery

dataTable

如何在 dataTable.js 中转置行和列 的相关文章

随机推荐

  • 在asp net mvc中简单的图像上传

    我正在构建一个简单的学校门户 我一直坚持将图像上传到我的应用程序中 即用户应该将学校图像上传到我的服务器 我的图像目录为 Content Images 所有上传图像都应该上传到这个目录 我有以下代码 input type file id S

  • 关于 inflater.inflate Android 文档的困惑

    我正在研究此链接中的片段 http developer android com guide components fragments html http developer android com guide components frag

  • Sencha Cmd 5 + Java 8 错误

    在我的 Windows 构建服务器上安装 Java 8 JDK 后 执行以下命令时遇到以下错误sencha命令 C gt sencha Error Registry key Software JavaSoft Java Runtime En

  • 如何将列表列表写入 CSV 文件 Python？

    我有一个列表 例如 a b c d e f 我想将其写入 CSV 文件 如下所示 a b c d e f 我怎么做 我尝试过使用 csv writerows 但输出文件的每个字符位于不同的单元格中 并且全部位于同一行中 从某种意义上说 第一

  • Cocos2D复杂动画[关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我正在使用 Cocos2D 将我的游戏从 Flash 移植到 iOS 我现在有一个工作版本 我很高兴我

  • 使用ftplib进行多线程上传

    我正在尝试进行多线程上传 但出现错误 我猜想也许不可能在 ftplib 中使用多线程 这是我的代码 class myThread threading Thread def init self threadID src counter ima

  • 在汇编中初始化字符串数组

    我想创建一个数据数组 在初始化数据部分保存 5 个字符串 每个字符串正好有 4 个字符 每个字符串都有一些初始数据 例如第一个字符串的 abcd 第二个字符串的 efgh 等等 无效的 0任何字符串都不需要字符 如何用汇编语言初始化字符串数

  • 从存储访问框架 UI 获取文件夹后保存图像

    我设置了一个首选项 让用户使用存储访问框架为我的应用程序选择保存文件夹 获取uri后onActivityResult我将其保存到SharedPreferences作为字符串并在要保存时保存图像 我正在使用此方法成功保存图像 public v

  • Flutter：如何使用 AnimatedContainer 和扩展列？

    假设我们有 3 个孩子Column Flexible flex 1 child Container color Colors red Flexible flex 3 child Container color Colors yellow F

  • 如何在 Ubuntu Karmic 上安装 LFE？

    Erlang 已经安装 dpkg l grep erlang ii erlang 1 13 b 3 dfsg 2ubuntu2 Concurrent real time distributed function ii erlang appm

  • 在响应模式下使用 CSS 更改元素顺序

    图1为桌面模式 下面两张图片和文字 总共三个div 图 2 是我希望它在移动浏览器 例如手机 中的显示方式 关于如何实现这一点有什么想法吗 我愿意接受任何建议 这个想法是让文本显示在图像上方 以最好地说明这两个图像的描述 在桌面版本中将文本

  • 无法删除 Access 中 SQL 表上的注册表

    我有一个在 Access 应用程序中链接的 SQL Server 表 如果我尝试使用删除查询删除记录 则没有问题 但是 如果我尝试直接在表中删除记录或在数据表模式下使用选择查询 Access 不允许我删除记录并引发以下警告 Microsof

  • 如何在 RequireJS 中模拟单元测试的依赖关系？

    我有一个要测试的 AMD 模块 但我想模拟它的依赖项 而不是加载实际的依赖项 我正在使用 requirejs 我的模块的代码如下所示 define hurp durp function Hurp Durp return foo functi

  • 如何获取核心数据中现有实体（表）的列表

    如何获取核心数据中特定模式 托管对象模型 的现有实体 表 列表 我刚刚开始实施核心数据概念并坚持这些要点 就像是 SELECT COUNT FROM information schema tables WHERE table schema

  • 当我启动 Windows 命令提示符时，我做了什么导致环境变量发生更改？

    我使用的是 Windows 10 x64 我安装了 Anaconda3 如果我启动 C Windows system32 cmd exe 时没有运行任何其他内容 并且在我可以看到的后台中没有任何有趣的内容 则以下内容将添加到控制面板 UI

  • 诊断“功能主机未运行。”在码头工人

    我正在尝试将几个基于 dotnet 的功能应用程序 v3 迁移到 docker 容器 为此 我们使用来自mcr microsoft com azure functions dotnet https hub docker com micros

  • 我如何在使用sequelize的包含模型中使用限制

    我想从关注模型中获取限制为 2 的用户图像 Models const Follow connector define Follow no type Sequelize INTEGER primaryKey true autoIncremen

  • 如何在android中使用kso​​ap2库解析复杂的响应

    大家好 我正在使用 Ksoap2 库解析以下类型的响应 但没有成功获得结果 我的请求如下

  • Excel 2007 从 C# get_Value 始终返回 -2146826265

    我有一个引用 Microsoft Excel 12 0 对象库的小型 C 应用程序 除此之外 它还从 Excel 单元格读取值 它从一些较旧的 Excel xls 文件和一些 2007 文件 xlsx 中读取此值 所有 xls 文件的值都会

  • 如何在 dataTable.js 中转置行和列

    我想在行而不是列中显示我的数据 转置 你可以在这里看到我的例子 var dataSet Tiger Nixon System Architect Edinburgh 5421 2011 04 25 320 800 Garrett Winte

热门标签