Datatables Jquery развернуть / свернуть и анимация - PullRequest
Новая
       69

Datatables Jquery развернуть / свернуть и анимация

1 голос
/ 10 июня 2011

Я использую плагин datatables, и в настоящее время код, который у меня есть, разворачивается / сворачивается при нажатии на изображение в td, но я хотел бы иметь возможность щелкнуть строку, чтобы развернуть ее. Может ли кто-нибудь помочь с этим?Вот код: 

            $(document).ready(function() {
            /*
             * Insert a 'details' column to the table
             */
            var nCloneTh = document.createElement( 'th' );
            var nCloneTd = document.createElement( 'td' );
            nCloneTd.innerHTML = '<img src="../examples_support/details_open.png">';
            nCloneTd.className = "center";

            $('#example thead tr').each( function () {
                this.insertBefore( nCloneTh, this.childNodes[0] );
            } );

            $('#example tbody tr').each( function () {
                this.insertBefore(  nCloneTd.cloneNode( true ), this.childNodes[0] );
            } );

            /*
             * Initialse DataTables, with no sorting on the 'details' column
             */
            var oTable = $('#example').dataTable( {
                "aoColumnDefs": [
                    { "bSortable": false, "aTargets": [ 0 ] }
                ],
                "aaSorting": [[1, 'asc']]
            });

            /* Add event listener for opening and closing details
             * Note that the indicator for showing which row is open is not controlled by DataTables,
             * rather it is done here
             */
            $('#example tbody td').live('click', function () {
                var nTr = this.parentNode.parentNode;
                if ( this.src.match('details_close') )
                {
                    /* This row is already open - close it */
                    this.src = "../examples_support/details_open.png";
                    oTable.fnClose( nTr );
                }
                else
                {
                    /* Open this row */
                    this.src = "../examples_support/details_close.png";
                    oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
                }
            } );
        } );

Во-вторых, я бы хотел, чтобы разворачивание и разворачивание было плавной анимацией, может кто-нибудь посоветует мне, как это сделать?

Спасибо

Ответы [ 3 ]

2 голосов
/ 17 апреля 2012

Если у вас есть div в вашем новом коде строки, вы можете сделать следующее.В моих новых строках у меня есть div с классом innerDetails.Вот что я сделал:

Строка 5648 файла jquery.dataTables.js: 

$(nNewRow).insertAfter(nTr);

Измените его на: 

var innerDetails = $(nNewRow).find('div.innerDetails');
innerDetails.css('display', 'none');
$(nNewRow).insertAfter(nTr);
innerDetails.slideDown();

Так оно и должно работатьиз коробки, имо.

0 голосов
/ 26 апреля 2017

Мое решение:

JS 

$(document).ready(function () {
......
$('.datatable-header-footer').on('draw.dt', function () {
                bindRowToggle();
            });

            $('.datatable-header-footer').on('processing.dt', function () {
                bindRowToggle();
            });

            $('.datatable-header-footer').on('search.dt', function () {
                bindRowToggle();
            });

            bindRowToggle();
        });

        function bindRowToggle() {
            $('tr.parentOrder').click(function () {
                $(this).nextAll(':lt(2)').toggle();
            });
        }

CSS 

.parentOrder {

}

.childOrder {
    display: none;
}

HTML 

<table class="table datatable-header-footer text-nowrap">
...
<tr class="parentOrder"></tr>
<tr class="childOrder"></tr>
<tr class="childOrder"></tr>
0 голосов
/ 10 июня 2011

Для первой части вашего вопроса: 

$('#example tbody tr').live('click', function () {...}

Для второй части найдите this.fnOpen = function( nTr, sHtml, sClass ) в jquery.dataTables.js, а затем найдите эту строку внутри метода fnOpen: 

$(nNewRow).insertAfter(nTr);

Измените его следующим образом: 

$(nNewRow).css('display','none').insertAfter(nTr).slideDown();

Или любой другой выбранной вами анимацией.

Это не проверено, но что-то вроде этого точно будет работать.

...