Button Problem with a each function

Button Problem with a each function

Andreas S.Andreas S. Posts: 207Questions: 73Answers: 4

I want create custom buttons, that stored in a database. I get the text Information with an $.get or $.ajex function from the database and add the button information with an $.each loop and the push() function in a array. The array has some object inside, but the buttons would not shown in the Button collection or as buttons outside a collection.
Have someone a idea what is here wrong with my code?

Code with Button collection:

let dtButtons = [];
let yrButtons = [];

$.get( "{{ route( 'admin.para-base-times.getBaseYears' ) }}", function( data ) {
    $.each( data, function( i, val ) {
       yrButtons.push( {
          text: val.year,
          className:  'border border-dark btn-sm ml-0 mb-1'
        } );
      } );
} );

dtButtons.push( {
   extend: 'collection',
   text: 'Year',
   className: 'btn-sm btn-White',
   collectionLayout: 'two-column auto-width',
   autoclose: true,
   buttons: yrButtons
} );

Code without Button collection:

let dtButtons = [];

$.get( "{{ route( 'admin.para-base-times.getBaseYears' ) }}", function( data ) {
    $.each( data, function( i, val ) {
        dtButtons.push( {
          text: val.year,
          className:  'border border-dark btn-sm ml-0 mb-1'
        } );
      } );
} );

Answers

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    I'm not seeing a call to button().add() which would add it to a collection or into the DOM. Are you calling that elsewhere?

    Colin

  • Andreas S.Andreas S. Posts: 207Questions: 73Answers: 4

    I think, i do that in the datatable(). Here my full code:

    Andreas

    $( function() {
        let dtButtons = [];
        let yrButtons = [];
    
        let languages = {
          'en': '{{ asset( 'i18n/datatables/English.lang' ) }}',
          'de': '{{ asset( 'i18n/datatables/German.lang' ) }}'
        };
        $.extend( true, $.fn.dataTable.Buttons.defaults.dom.container, { className: 'left' } );
        $.extend( true, $.fn.dataTable.Buttons.defaults.dom.button, { className: 'btn' } );
        $.fn.dataTable.ext.classes.sPageButton = '';
    
        $.get( "{{ route( 'admin.para-base-times.getBaseYears' ) }}", function( data ) {
          $.each( yr, function( i, val ) {
            dtButtons.push( {
              text: val.year,
              className:  'border border-dark btn-sm ml-0 mb-1'
            } );
          } )
        } );
        
        @can( 'para_base_time_create' )
          dtButtons.push( {
            text: '<i class="far fa-plus" title="{{ trans('global.add') }} {{ trans('cruds.archiveSingleRecordsSwim.title_singular') }}"></i>',
            className: 'btn-success btn-sm',
            action: function( e, dt, node, config ) {
              window.location.href = "{{ route( 'admin.para-base-times.create' ) }}";
            }
          } );
        @endcan
        dtButtons.push( {
          extend: 'collection',
          text: 'Year',
          className: 'btn-sm btn-White',
          collectionLayout: 'two-column auto-width',
          autoclose: true,
          buttons: yrButtons
        } );
        dtButtons.push( { 
          extend: 'selectAll',
          className: 'btn-DarkGray btn-sm ml-0',
          text: '<i class="far fa-object-group" title="{{ trans('global.select_all') }}"></i>',
          exportOptions: {
            columns: ':visible'
          },
          action: function(e, dt) {
            e.preventDefault()
            dt.rows().deselect();
            dt.rows( { search: 'applied' } ).select();
          }
        } );
        dtButtons.push( {
          extend: 'selectNone',
          className: 'btn-DarkGray btn-sm ml-0',
          text: '<i class="far fa-object-ungroup" title="{{ trans('global.deselect_all') }}"></i>',
          exportOptions: {
            columns: ':visible'
          }
        } );
        @can( 'para_base_time_delete' )
          dtButtons.push( {
            text: '<i class="far fa-trash-alt" title="{{ trans('global.datatables.delete') }}"></i>',
            url: "{{ route('admin.para-base-times.massDestroy') }}",
            className: 'btn-FireBrick btn-sm ml-10',
            action: function ( e, dt, node, config ) {
              var ids = $.map( dt.rows( { selected: true } ).data(), function ( entry ) {
                return entry.id;
              });
              if ( 0 === ids.length ) {
                alert( '{{ trans('global.datatables.zero_selected') }}' );
                return;
              }
              if( confirm( '{{ trans( 'global.areYouSure' ) }}' ) ) {
                $.ajax( {
                  headers: { 'x-csrf-token': _token },
                  method: 'POST',
                  url: config.url,
                  data: { ids: ids, _method: 'DELETE' }
                } ).done( function () { location.reload( null, false ); } );
              }
            }
          } );
        @endcan
        
        let table = $( '.datatable-ParaBaseTime' ).DataTable( {
          dom: "<'row'<'col-sm-170px'l><'col-sm pl-0 pr-0'B><'col-sm-3'f>>rtip<'actions'>",
          ajax: "{{ route( 'admin.para-base-times.index' ) }}",
          language: {
            url: languages[ '{{ app()->getLocale() }}' ]
          },
          select: {
            style: 'multi',
            selector: 'td:first-child'
          },
          pageLength: 25,
          lengthMenu: [ [15, 25, 50, -1], [15, 25, 50, 'All'] ],
          processing: true,
          serverSide: true,
          order: [ [ 4, 'asc' ] ],
          scrollX: false,
          columnDefs: [
            { targets: 0, className: 'select-checkbox', orderable: false},
            { targets: 1, visible: false },
            { targets: 9, className: 'text-right' },
            { targets: '_all', orderable: false }
          ],
          columns: [
            { data: 'placeholder', name: 'placeholder' },
            { data: 'id', name: 'id' },
            { data: 'course', name: 'course' },
            { data: 'stroke_title_en', name: 'stroke.title_en' },
            { data: 'sportclass_name', name: 'sportclass.name' },
            { data: 'm_basetime', name: 'm_basetime' },
            { data: 'f_basetime', name: 'f_basetime' },
            { data: 'x_basetime', name: 'x_basetime' },
            { data: 'year', name: 'year' },
            { data: 'actions', name: '{{ trans('global.actions') }}' }
          ],
          buttons: dtButtons,
          initComplete: function( data ) {
            $( '.datatable-ParaBaseTime' ).removeClass( 'd-none' );
          }
        } );
      } );
    
  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    Ah, you're adding dtButtons in the table initialisation. It looks like it should work. Are you able to create a test case, please, so we can debug. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

    Cheers,

    Colin

  • Andreas S.Andreas S. Posts: 207Questions: 73Answers: 4

    My debug upload: https://debug.datatables.net/uverit

    Andreas

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    Colin asked for a test case so we can help debug your code not the debugger trace.

    Kevin

  • Andreas S.Andreas S. Posts: 207Questions: 73Answers: 4

    Send pm to colin for the test case

This discussion has been closed.