Button Problem with a each function

Andreas S. · May 2021

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'
        } );
      } );
} );

colin · May 2021

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. · May 2021

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' );
      }
    } );
  } );

colin · May 2021

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. · May 2021

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

Andreas

kthorngren · May 2021

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

Kevin

Andreas S. · May 2021

Send pm to colin for the test case

Button Problem with a each function

Button Problem with a each function

Answers

Howdy, Stranger!

Categories

DataTables

Button Problem with a each function

Button Problem with a each function

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables