How to costumize datatables button and checkbox?

How to costumize datatables button and checkbox?

uTrxuTrx Posts: 24Questions: 6Answers: 0
edited February 2022 in DataTables

I have a table where i get data from a db and use normal table to display on laravel.blade. I find a script whitch allows me to add datatables button easy on this table and to use export button and some others. But i need to costumize button like, colors or tittle, Also need to hide checkbox or to make it functional, I mean to export only checked rows not all rows displayed. I know to do this on normal datatbales, but i dont know how to use in this script, any help?:

$(function () {
    let dtButtons = $.extend(true, [], $.fn.dataTable.defaults.buttons)

    $.extend(true, $.fn.dataTable.defaults, {
        order: [[ 1, 'desc' ]],
        pageLength: 100,
    });
  
    $('.datatable-User:not(.ajaxTable)').DataTable({ buttons: dtButtons })
    $('a[data-toggle="tab"]').on('shown.bs.tab', function(e){
        $($.fn.dataTable.tables(true)).DataTable()
            .columns.adjust();
    });
})
<div class="table-responsive mt-3">
    <table id="reports" class="table table-striped table-hover table-bordered table-sm datatable datatable-User" cellspacing="0" width="100%">
        <thead class="thead-light">    
            <tr>
                <td> <b> </b>  </td>
                <td> <b> User </b>  </td>
                <td> <b> Full Name </b>  </td>
                <td> <b> Total </b>  </td>
            </tr>
        </thead>

        <tbody>
        @if( $data->count() > 0 )
        @foreach($data as $record)
        <tr data-entry-id="{{ $record->id ?? '' }}" @if ($loop->odd) style="background-color: #B0D6F2;" @endif >
            <td> </td>
            <td> {{ $record->user ?? '' }} </td>
            <td> {{ $record->full_name ?? '' }} </td>
            <td> {{ $record->total ?? '' }} </td>
        </tr>
        @endforeach
        @else 
        <td align="center" colspan="14"> No record found </td>
        @endif
        </tbody>
    </table>
</div>

Answers

  • colincolin Posts: 15,240Questions: 1Answers: 2,599

    With Buttons, you can use buttons.buttons.className which would provide styling.

    I'm not clear what you mean by hiding the checkbox, we'll need a test case for that. 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

Sign In or Register to comment.