如何在dataTable.js中转置行和列 [英] How to transpose rows and columns in dataTable.js

问题描述

我想在行而不是列中显示我的数据.(移调)您可以在这里看到我的示例.

  var dataSet = [[老虎尼克松"，系统架构师"，爱丁堡"，"5421"，"2011/04/25"，"$ 320,800"]，[加勒特·温特斯(Garrett Winters)，"会计，"东京，" 8422，" 2011/07/25，" $ 170,750]，["Ashton Cox"，初级技术作者"，旧金山"，"1562"，"2009/01/12"，"$ 86,000"]，["Cedric Kelly"，高级JavaScript开发人员"，"Edinburgh"，"6224"，"2012/03/29"，"$ 433,060"]，[艾里佐藤"，会计师"，东京"，"5407"，"2008/11/28"，"$ 162,700"]];$(document).ready(function(){$('#example').DataTable({数据:dataSet，列: [{title:"Name"}，{title:"Position"}，{title:"Office"}，{title:"Extn."}，{title:开始日期"}，{title:薪金"}]})；});  

 < 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链接

在我的示例中，我的类别(姓名，职位，办公室，外部开始日期，薪水)固定在列中.我的数据显示在行"中.我想用我的类别修复行.我该怎么办?

解决方案

尝试一下..

  var dataSet = [[老虎尼克松"，系统架构师"，爱丁堡"，"5421"，"2011/04/25"，"$ 320,800"]，[加勒特·温特斯(Garrett Winters)，"会计，"东京，" 8422，" 2011/07/25，" $ 170,750]，["Ashton Cox"，初级技术作者"，旧金山"，"1562"，"2009/01/12"，"$ 86,000"]，["Cedric Kelly"，高级JavaScript开发人员"，"Edinburgh"，"6224"，"2012/03/29"，"$ 433,060"]，[艾里佐藤"，会计师"，东京"，"5407"，"2008/11/28"，"$ 162,700"]];$(document).ready(function(){$('#example').DataTable({数据:dataSet，列: [{title:"Name"}，{title:"Position"}，{title:"Office"}，{title:"Extn."}，{title:开始日期"}，{title:薪金"}]})；});  

 表{}tr，thead {display:block;向左飘浮;}th，td {display:block;边框:1px纯黑色；}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>  

>

另一种方式..使用 Transpose-Table-jQuery-Plugin

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

I want to show my Data in rows not in columns. (tranposing) You can see my example here.

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 link

In my example, my categories (name, position, office, extn. start date, salary) were fixed in columns. My data was shown in Rows. I want to fix rows with my categories. How can I do this?

解决方案

Try this..

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>

Another way.. Use Transpose-Table-jQuery-Plugin

Updated answer link : http://jsfiddle.net/t73danpb/4/

这篇关于如何在dataTable.js中转置行和列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！