jQuery DataTable rowGroup Toggle не работает - PullRequest
Новая
       10

jQuery DataTable rowGroup Toggle не работает

1 голос
/ 17 июня 2020

Мне не удается получить Jquery DataTable, чтобы свернуть / развернуть мои группы. Мои группы отображаются правильно, однако я не могу заставить работать переключатель сворачивания.

Может ли кто-нибудь помочь мне понять, почему это не работает? 

 <script type="text/javascript">

       var collapsedGroups = {};

        $(document).ready(function () {
            $('#proposals').DataTable({
                "paging": false,
                columns: [
                    { name: 'status' },
                    { name: 'number' },
                    { name: 'proposaldate' },
                    { name: 'description' },
                    { name: 'employee' },
                    { name: 'action' }
                ],
                rowGroup: {
                    startRender: function (rows, group) {
                        var collapsed = !!collapsedGroups[group];

                        rows.nodes().each(function (r) {
                            r.style.display = collapsed ? 'none' : '';
                        });

                        var toggleClass = collapsed ? 'fa-plus-square' : 'fa-minus-square';

                        return $('<tr/>')
                            .append("<td colspan='" + rows.columns()[0].length + "'>" + "<div class='p-2 mb-2 bg-primary text-white'>" + "<span class='fa fa-fw " + toggleClass + " toggler'/> " + group + "</div></td>")
                            .attr('data-name', group)
                            .toggleClass('collapsed', collapsed);
                    },
                    endRender: function (rows, group) {
                        return "<div class='bg-light'>" + "<span class='text-muted'>" + "<small>" + rows.count() + " proposals" + "</small>" + "</span>" + "</div>";
                    }
                }
            })
        });

        $('#proposals tbody').on('click', 'tr.group-start', function () {
            var name = $(this).data('name');
            collapsedGroups[name] = !collapsedGroups[name];
            proposals.draw(false);
        });

    </script>

Большое спасибо.

--- Val

1 Ответ

0 голосов
/ 17 июня 2020

Наконец-то это заработало. Вот обновленный код: 

<script type="text/javascript">

        var collapsedGroups = {};

        $(document).ready(function () {
            var collapsedGroups = {};

            var table = $('#proposals').DataTable({
                "paging": false,
                columns: [
                    { name: 'status' },
                    { name: 'number' },
                    { name: 'proposaldate' },
                    { name: 'description' },
                    { name: 'employee' },
                    { name: 'action' }
                ],
                rowGroup: {
                    dataSrc: 0,
                    startRender: function (rows, group) {
                        var collapsed = !!collapsedGroups[group];

                        rows.nodes().each(function (r) {
                            r.style.display = collapsed ? 'none' : '';
                        });

                        var toggleClass = collapsed ? 'fa-plus-square' : 'fa-minus-square';

                        return $('<tr/>')
                            .append("<td colspan='" + rows.columns()[0].length + "'>" + "<span class='fa fa-fw " + toggleClass + " toggler'/> " + group + "</td>")
                            .attr('data-name', group)
                            .toggleClass('collapsed', collapsed);
                    },
                    endRender: function (rows, group) {
                        return rows.count() + " proposals";
                    },
                    startClassName: 'group-start',
                    endClassName: 'group-end'
                }
            })


            $('#proposals tbody').on('click', 'tr.group-start', function () {
                var name = $(this).data('name');
                collapsedGroups[name] = !collapsedGroups[name];
                table.draw(false);
            });
        });

    </script>
...