pagseguro/magento2

<!-- DataTable -->
<div class="col-m-12">
    <div class="admin__data-grid-wrap" data-role="grid-wrapper">
        <table id="pagseguro-datatable" class="data-grid data-grid-draggable" data-role="grid">
            <thead>
            <tr>
                <th class="data-grid-multicheck-cell">
                        <input type="checkbox" id="conciliation-mass-select-checkbox" />
                </th>
                <th class="data-grid-th _sortable _draggable">Data</th>
                <th class="data-grid-th _sortable _draggable">ID Magento</th>
                <th class="data-grid-th _sortable _draggable">ID PagSeguro</th>
                <th class="data-grid-th _sortable _draggable">Status Magento</th>
                <th class="data-grid-th _sortable _draggable">Status PagSeguro</th>
                <th class="data-grid-th _sortable _draggable">Ação</th>
            </tr>
            </thead>
            <tbody class="admin__table-secondary">
            </tbody>
        </table>
    </div>
</div>
<input type="hidden" id="adminurl" data-target="<?=$this->getAdminurl(); ?>"/>
<script type="text/javascript">
    require(["jquery", "datatables", "public"],function($) {

        // DataTable config
        $('#pagseguro-datatable').DataTable({
            "autoWidth": true,
            "info": false,
            "lengthChange": false,
            "searching": false,
            "bStateSave": true,
            "pageLength": 10,
            "aaSorting": [[ 1, "desc" ]],
            "aoColumnDefs": [
                { 'bSortable': false, 'aTargets': [ 0, 6] },
                { "sClass": "tabela", 'aTargets': [ 1, 2, 3, 4, 5, 6 ] }
            ],
            // Creates paging and notifies when there is no record
            "oLanguage": {
                "sEmptyTable":"<?php echo __('Não há registros.'); ?>",
                "oPaginate": {
                    "sNext": '<?php echo __('Próximo');?>',
                    "sLast": '<?php echo __('Último');?>',
                    "sFirst": '<?php echo __('Primeiro');?>',
                    "sPrevious": '<?php echo __('Anterior');?>'
                }
            },
            "fnDrawCallback" : function(){
                if ( $('#pagseguro-datatable_paginate span span.paginate_button').size()) {
                    $('#pagseguro-datatable_paginate')[0].style.display = "block";
                } else {
                    $('#pagseguro-datatable_paginate')[0].style.display = "none";
                }

                //Disable/Enable conciliation button
                $('[data-target="conciliation"]').on('click', function () {
                    enableOrDisable(this);
                });

                //Disable/Enable all conciliation button
                $('#conciliation-mass-select-checkbox').on('click', function () {
                    enableOrDisable(this);
                });
            }
        });

        // Search button observer
        $('#conciliation-search').on('click', function(){
            var url = $('#adminurl').attr('data-target');
            WS.Ajax.Conciliation.Search(url);
        });

        // Conciliate button observer
        $('#conciliation-conciliate').on('click', function(){
            var url = $('#adminurl').attr('data-target');
            WS.Ajax.Conciliation.Conciliate(url);
        });

        // Check/Uncheck all checkboxes.
        $('#conciliation-mass-select-checkbox').on('click', function () {
            if (this.checked=== true) {
                $('[data-target="conciliation"]').prop('checked', true);
            }
            if (this.checked=== false) {
                $('[data-target="conciliation"]').prop('checked', false);
            }
        })

        // Enable/Disable conciliation button
        function enableOrDisable(value) {
            if ( $(value).is(':checked') ) {
                $('#conciliation-conciliate').removeAttr('disabled');
            } else {
                var hasOne = false;
                jQuery.each($('[data-target="conciliation"]'), function(index, value) {
                    if ( $(value).is(':checked') ) {
                        if (hasOne !== true) hasOne = true;
                    }
                });
                if (hasOne === false) {
                    $('#conciliation-conciliate').attr('disabled', 'disabled');
                }
            }
        }
    });
</script>