Question

我希望能够在数据表的顶部插入自定义表，我希望自定义表显示在标题列的上方，我的代码如下：

columns: [
          { "data": "WorkFlowType" },
          { "data": "WorkflowInstanceId" },
          { "data": "WorkFlowDescription" },
          { "data": "Requester" },
          { "data": "Actors" },
          { "data": "ReceivedDate" },
          { "data": "ActionedTimeStamp" },
          { "data": "DurationInMinutes" },
          { "data": "SLAInMinutes" },
          { "data": "Status" }

           ],
             dom: 'Bfrtip',
             buttons: [
             'copy', 'csv', 'excel',
              {
                 extend: 'pdfHtml5',
                  orientation: 'landscape',
                   pageSize: 'LEGAL'
                }

            ]
           });
table = $("#reportTable").DataTable();

我试过这个，但它没有显示在数据表上：

$(document).ready(function() {
$('#reportTable').DataTable( {
    "dom": '<"toolbar">frtip'
} );

$("div.toolbar").html('<b><div class="row">
<div class="column"></div>
<div class="column"></div>
</div></b>');
 } );

我将不胜感激

Answer 1

您可以通过hid获取长度表元素或搜索栏，然后在数据表之前添加元素

var table = $('#test').DataTable();
$('<b><div class="row"><div class="column">vsdv</div><div class="column">vsdvds</div></div></b>').insertBefore($('#test_length'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

<table id="test" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009/01/12</td>
                <td>$86,000</td>
            </tr>
            </tbody>
 </table>

在工具栏里。

对于表格元素： var table = $('#reportTable').DataTable(); $("#example_length").prepend('<b><div class="row"><div class="column">test</div><div class="column">test</div></div></b>');

我希望这个答案符合你的问题。

如何将自定义表或Div Section插入数据表中

1 个答案: