Как добавить пользовательский вид более подробной информации с помощью 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 и отображать только те части данных строки, которые вам нужны. https://datatables.net/examples/api/row_details.html

Вот так будет выглядеть код вашего формата, заменив приведенную выше строку:

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

Эта ссылка показывает хороший способ форматирования: DataTables - Расширить дочерние данные без использования Ajax