如何使用 DataTables 添加自定义查看更多详细信息按钮？

Question

如何在 DataTables 中自定义查看更多详细信息按钮？是的，我知道 DataTables 已经有一个查看更多详细信息按钮，但我想要一个自定义设计的按钮。

我希望在单击自定义视图更多按钮时显示子行。

这是我一直在尝试使用的代码，使用 '.table-toggle' 作为类名，以将其激活到我应用此类名的任何内容。

以下是脚本：

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.20/r-2.2.3/datatables.min.css"/>

<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jq-3.3.1/dt-1.10.20/r-2.2.3/datatables.min.js"></script>

这是我的 HTML 代码：

<table class="table">
    <thead>
        <tr>
            <th class="never">ID</th>
            <th>Category</th>
            <th>Amount</th>
            <th class="none">Date</th>
            <th class="desktop">Time</th>
            <th class="desktop">Balance </th>
            <th class="none">Payment Type</th>
            <th class="none">Note</th>
            <th class="desktop">Action</th>
        </tr>
    </thead>
    <tbody>
        <tr class="table-toggle">
            <td>1</td>
            <td>     
                  <h5>Charles Smith</h5>
                   <span>Lending</span>
            </td>
            <td>
                -$500.00
            </td>
            <td>02-January-2020</td>
            <td></i> 11:01 am </td>
            <td>$67,256.00</td>
            <td>Cash</td>
            <td>Collected and deposited</td>
            <td>
                <a href="javascript:void(0)" class="table-toggle">View More</a>
                <a href="javascript:void(0)"></a>Edit</span>           
                <a href="javascript:void(0)"></a>Delete</span>
            </td>
        </tr>
    </tbody>
</table>

这是我的 Javascript 代码：

<script>
    // Add event listener for opening and closing details
    $('.table tbody').on('click', '.table-toggle', function () {
        var tr = $(this).closest('tr');
        var table = $('.table').DataTable();
        var row = table.row(tr);

        if (row.child.isShown()) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        } else {
            // Open this row
            row.child(format(row.data())).show();
            tr.addClass('shown');
        }
    });

</script>

这是我在按钮上的 HTML 代码

<a href="javascript:void(0)" class="table-toggle">View More</a>  

Answer 1

  <script>
    // Add event listener for opening and closing details
    $('.table').on('click', '.table-toggle', function () {
       var table = $('.table').DataTable();

       var tr = $(this).closest('tr');

       var row = table.row(tr);

        if (row.child.isShown()) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        } else {
            // Open this row
            row.child( format(row.data()) ).show();
            tr.addClass('shown');
        } 

    }); 

    /* Formatting function for row details - modify as you need */
function format ( d ) {
    // `d` is the original data object for the row
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
        '<tr>'+
            '<td>Full name:</td>'+
            '<td>'+d[0]+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Extension number:</td>'+
            '<td>'+d[1]+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Extra info:</td>'+
            '<td>And any further details here (images etc)...</td>'+
        '</tr>'+
    '</table>';
}

</script>

好的，我让代码工作了。如果您将类 '.table-toggle' 放在任何对象上，它都会起作用。如果您将按钮放在表格行中，然后单击该按钮，它将触发两次。 tr 的一场火灾和td 的另一场火灾。所以请记住这一点。

<tr class=".table-toggle">
  <td><a href="javascript:void(0)" class="table-toggle">View More</a></td> 
</tr>

如果您想格式化子表中显示的内容，您可以使用链接或参考。 Child Details 示例使用 format() 函数作为构建 HTMl 的一种方式，该 HTMl 将显示您的子行。您可以使用任何您想要的有效 HTML，并仅显示您想要的行数据部分。 https://datatables.net/examples/api/row_details.html

这就是你的格式代码替换上面一行的样子：

  // Open this row
    row.child( format(row.data()) ).show();
    tr.addClass('shown');

此链接显示了一种进行格式化的好方法： DataTables - Expand Child details without using Ajax