Skip to content

Instantly share code, notes, and snippets.

@satputekuldip
Created October 13, 2021 10:16
Show Gist options
  • Save satputekuldip/caa1ce014be96fc8bc8f506b57a4ee54 to your computer and use it in GitHub Desktop.
Save satputekuldip/caa1ce014be96fc8bc8f506b57a4ee54 to your computer and use it in GitHub Desktop.
Datatable Filter in headers
```
<script>
$(function () {
let dtButtons = $.extend(true, [], $.fn.dataTable.defaults.buttons)
let deleteButtonTrans = '{{ trans('global.datatables.delete') }}'
let deleteButton = {
text: deleteButtonTrans,
url: "{{ route('products.massDestroy') }}",
className: 'btn-danger',
action: function (e, dt, node, config) {
var ids = $.map(dt.rows({ selected: true }).nodes(), function (entry) {
return $(entry).data('entry-id')
});
if (ids.length === 0) {
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() })
}
}
}
dtButtons.push(deleteButton)
$.extend(true, $.fn.dataTable.defaults, {
orderCellsTop: true,
order: [[ 1, 'desc' ]],
pageLength: 100,
});
$('.datatable-Product tfoot th').each( function () {
var title = $(this).text();
if (title != '') {
if (title == 'Category') {
$(this).html('{!! Form::select('category_id', $categories,null, ['class' => 'form-control','required']) !!}');
} else {
$(this).html('<input type="text" placeholder="Search ' + title + '" />');
}
}
} );
let table = $('.datatable-Product:not(.ajaxTable)').DataTable({
buttons: dtButtons,
initComplete: function () {
// Apply the search
this.api().columns().every( function () {
var that = this;
$( 'input', this.footer() ).on( 'keyup change clear', function () {
if ( that.search() !== this.value ) {
that
.search( this.value )
.draw();
}
} );
$( 'select', this.footer() ).on( 'change clear', function () {
if ( that.search() !== this.value ) {
that
.search( this.value )
.draw();
}
} );
} );
}
})
$('a[data-toggle="tab"]').on('shown.bs.tab click', function(e){
$($.fn.dataTable.tables(true)).DataTable()
.columns.adjust();
});
})
</script>
```
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment