如何将数据表显示为卡片视图？

Question

我想将我的数据表显示为卡片视图格式，但不知道该怎么做。

我尝试参考这两个网站了解如何将 DataTable 转换为卡片视图，但仍然无法使其工作。

代码：

<head>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.20/js/dataTables.jqueryui.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.6.0/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.6.0/js/buttons.jqueryui.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.6.0/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.6.0/js/buttons.print.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.6.0/js/buttons.colVis.min.js"></script>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"></link>
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/dataTables.jqueryui.min.css"></link>
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.6.0/css/buttons.jqueryui.min.css"></link>

<style>
.cards tbody img {
    height: 100px;
}
.cards tbody tr {
    float: left;
    margin: 10px;
    border: 1px solid #aaa;
    box-shadow: 3px 3px 6px rgba(0,0,0,0.25);
    background-color: white;
}
.cards tbody td {
    display: block;
    width: 330px;
    overflow: hidden;
    text-align: left;
}
</style>

<form id="myform">

<button id ="btToggleDisplay" class="btn btn-info">CARD</button>
<table id="itineraryTable" class="display" style="width:100%"></table>
</form>

<script>

var itineraryTable = $('#itineraryTable').DataTable({
    'ajax': {
        "type" : "GET",
    "url" : "http://localhost:8080/Test-war/webresources/itinerary/getallitinerary",
    "dataSrc": ""
},
'columns': [
    {title : "Caption", "data" : "caption"},
    {title : "Title", "data" : "title"},
    {title : "Duration", "data" : "duration"},
    {title : "Start Date", "data" : "startDate", "render" : function(data) {
        var date = new Date(data);
        var month = date.getMonth() + 1;
        return (month.toString().length > 1 ? month : "0" 
        + month) + "/" + date.getDate() + "/" + date.getFullYear();
    }},
    {title : "End Date", "data" : "endDate", "render" : function(data) {
        var date = new Date(data);
        var month = date.getMonth() + 1;
        return (month.toString().length > 1 ? month : "0" 
        + month) + "/" + date.getDate() + "/" + date.getFullYear();
    }},
    {title : "Created Date", "data" : "createdDate" , "render" : function(data) {
        var date = new Date(data);
        var month = date.getMonth() + 1;
        return (month.toString().length > 1 ? month : "0" 
        + month) + "/" + date.getDate() + "/" + date.getFullYear();
    }},
],
});
</script>

我尝试过使用但无法让它工作。我需要一些关于如何在上面的代码中使用

.toggleClass('cards')

的建议。谢谢你。

 $('#btToggleDisplay').on('click', function () {
            $("#itineraryTable").toggleClass('cards')
            $("#itineraryTable thead").toggle()
        })

这是当前DataTable的图片： screenshot

Answer 1

我检查了你的代码，发现缺少将表行转换为卡片视图的脚本......

您可以添加如下代码，

'drawCallback': function (settings) {
        var api = this.api();
        var $table = $(api.table().node());
        
        if ($table.hasClass('cards')) {

           // Create an array of labels containing all table headers
           var labels = [];
           $('thead th', $table).each(function () {
              labels.push($(this).text());
           });

           // Add data-label attribute to each cell
           $('tbody tr', $table).each(function () {
              $(this).find('td').each(function (column) {
                 $(this).attr('data-label', labels[column]);
              });
           });

           var max = 0;
           $('tbody tr', $table).each(function () {
              max = Math.max($(this).height(), max);
           }).height(max);

        } else {
           // Remove data-label attribute from each cell
           $('tbody td', $table).each(function () {
              $(this).removeAttr('data-label');
           });

           $('tbody tr', $table).each(function () {
              $(this).height('auto');
           });
        }
     }

要进一步详细检查，请检查此此处

希望这有帮助...

如何将数据表显示为卡片视图？

问题描述投票：0回答：1

1个回答

最新问题

如何将数据表显示为卡片视图？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1