Develop Reference

Correct way to check if yajra/laravel table was already initialized?

In use laravel 5.7 / jquery 3 / blade app I use yajra/laravel-datatables-oracle 8
and open it in modal dialog and I open this dialog for the 2nd/3rd time
I got warning message :
DataTables warning: table id=get-fee-dt-listing-table - Cannot reinitialise DataTable
In blade file :
<div class="modal-body">
<div class="table-responsive dataTables_header">
<table class="table table-bordered table-striped text-primary" id="get-fee-dt-listing-table">
<thead>
<tr>
<th></th>
and in .js file:
bookingsAndAvailability.prototype.showFeesSelection = function () {
console.log('showFeesSelection::')
$("#div_check_in_fees_modal").modal({
"backdrop": "static",
"keyboard": true,
"show": true
});
// var dtListingTable= document.getElementById('get-fee-dt-listing-table')
// dtListingTable = null // If to uncomment these 2 lines - they do not help
$("#get-fee-dt-listing-table").html('') // // If to uncomment these 2 lines - they do not help
oTable = $('#get-fee-dt-listing-table').DataTable({
processing: true,
language: {
"processing": "Loading fees..."
},
I close the modal with command :
$("#div_check_in_fees_modal").modal('hide');
which is correct way to check if table was already initialised?
Thanks!

You can use $.fn.dataTable.isDataTable() for this.
From the docs:
This method provides the ability to check if a table node is already a
DataTable or not. This can be useful to ensure that you don't
re-initialise a table that is already a DataTable.
Please note that this is a static function and is accessed through the
$.fn.dataTable object, not an API instance. It can be accessed at any
time, even before any DataTables have been created on the page.
if ( ! $.fn.DataTable.isDataTable( '#example' ) ) {
$('#example').dataTable();
}
In your case it would be something like this:
if (! $.fn.DataTable.isDataTable('#get-fee-dt-listing-table')) {
oTable = $('#get-fee-dt-listing-table').DataTable({
processing: true,
language: {
"processing": "Loading fees..."
},
...
}

JS Datatables - filtering table from combo box in header

I have the following datatable which uses the js datatable plugin from https://datatables.net/
The datatable is set using the following JS:
$(document).ready(function () {
$('#tracerTable').DataTable({
"bInfo": false,
"order": [[2, "desc"]], //order by date created
"aoColumnDefs": [
{ aTargets: [3], "bSortable": false },
{ aTargets: [4], "bSortable": false },
{ aTargets: [5], "bSortable": false }
]
});
}
Question:
Is it possible to update the JS to allow me to filter on the 'Type' column using a dropdown with tickbox options within in the table header (just like the filter option in excel - see image below). I would want this for selecting Water and Oil Tracers, but not showing Gas tracers.
If this is not possible within the datatable plugin, can anyone suggest a plugin which would provide this functionality?

Make use of the bootstrap-select plugin, append it to the header of your DataTables by targeting the desired column (in your case 1), get the checked values, join it with | (the or operand) then use search API.
var table = $('#example').DataTable({
initComplete: function() {
this.api().columns([1]).every(function() {
var column = this;
var select = $('<select class="selectpicker" data-show-content="false" data-none-selected-text="Position" multiple><option value="" >Show All</option></select>')
.appendTo($(column.header()).empty())//use $(column.footer() to append it to the table footer instead
.on('changed.bs.select', function(e) {
var val = $(this).val();
var fVal = val.join("|")
column
.search(fVal, true, false)
.draw();
}); //select
column.data().unique().sort().each(function(d, j) {
select.append('<option value="' + d + '">' + d + '</option>')
}); //column.data
}); //this.api
} //initComplete
});
Fiddle for more details, I suggest moving the filter function on the footer as clicking the dropdown button on the table header will sort the table.

Apply column search to current jQuery DataTable part 2

So I was able to get part 1 of my question to work, which is located here: Apply column search to current jQuery DataTable
That was utilizing a dropdown select method to the individual columns. However it appears that utilizing an INPUT box would be more effective.
So I came across this fiddle: http://jsfiddle.net/dmurph/b71jtjf1/
This is exactly what I am looking for. So first off, I added to my current table:
<table class="table table-bordered" id="example1" width="100%">
<thead>
<tr>
<th>Edit/Del</th>
<th>Booking</th>
<th>Quote</th>
........
</tr>
</thead>
<thead class="filters">
<tr>
<th>Edit/Del</th>
<th>Booking</th>
<th>Quote</th>
........
</tr>
</thead>
// the DATATABLE IN BETWEEN </thead> and </table>
</table>
Now utilizing the code from the jfiddle link I provided above, this is what I have in total:
$('#example1 .filters th').each(function(){
var title = $('#example1 thead th').eq($(this).index()).text();
$(this).html('<input type="text" placeholder="Search '+title+'" />');
});
My original javascript to print the datatable comes next:
var $dataTable = $('#example1').DataTable({
"ajax": serviceUrl,
"iDisplayLength": 25,
"order": [[ 6, "desc" ]],
"scrollY": 600,
"scrollX": true,
"bDestroy": true,
"columnDefs": [ {
"targets": 0,
"render": function ( data, type, full, meta ) {
return '
<a class="editBookingLink" id="editBookingLink" href="#">Edit</a>
<a class="delBookingLink" id="delBookingLink" href="#">Del</a>';
}
}]
});
So far so good...the datatable still displays. But here comes the part where I'm having the issue:
Immediately after the above code, I have this (according to the jfiddle link):
$dataTable.columns().eq(0).each(function(colIdx){
$('input', $('.filters th')[colIdx]).on('keyup change', function(){
table
.column(colIdx)
.search(this.value)
.draw();
});
});
So errors until I try to search the INPUT field...well first of all, the column search doesn't search anything, but then I check the console and the error I am receiving is "Uncaught ReferenceError: table is not defined" pointing to line 805, which doesn't really make sense, because line 805 is in my original code where it reads below:
"scrollX": true
I am not sure why I am getting this error.

Change table to $dataTable, so it reads:
$dataTable
.column(colIdx)
.search(this.value)
.draw();

jQuery DataTable exact match

I have this jQuery datatable in place:
var $dataTable = $('#example1').DataTable({
"ajax": serviceUrl,
"iDisplayLength": 25,
"order": [[ 2, "asc" ]],
"scrollY": 600,
"scrollX": true,
"bDestroy": true
});
I also have this CHANGE event happening when the user selects an option in a dropdown:
$('#serviceload').on('change',function()
{
$dataTable.columns(1).search( this.value ).draw();
});
I need to be able to alter the CHANGE event so that it searches the DataTable for the exact match in the dropdown.
For example, the v has 2 services called SERV and SERV_ONE. In the dropdown, both SERV and SERV_ONE are available for the user to choose, but if the user chooses SERV, the datatable filters for SERV and also displays the records for SERV_ONE. But when SERV_ONE is chosen, the DataTable only displays the records for SERV_ONE.

See this example for proper use of drop-down filters.
$('#serviceload').on('change keyup', function(){
var val = $.fn.dataTable.util.escapeRegex($(this).val());
$dataTable
.columns(1)
.search( val ? '^' + val + '$' : '', true, false )
.draw();
});

jQuery DataTables - Remove Label

I'm trying to remove the words "Search:" from the filter label in DataTables. I have tried to use jQuery to replace the label dom but when replaced the filter will not work. Any one have any other solutions?
Well seems everybody wants code:
<div id="table-staff_wrapper" class="dataTables_wrapper">
<div id="table-staff_length" class="dataTables_length">
<div id="table-staff_filter" class="dataTables_filter">
<label>
Search:
<input type="text">
</label>
</div>
<table id="table-staff" cellspacing="0" cellpadding="0">
<div id="table-staff_info" class="dataTables_info">Showing 1 to 3 of 3 entries</div>
<div id="table-staff_paginate" class="dataTables_paginate paging_full_numbers">
the above is auto generated by DataTables

refer this link http://datatables.net/ref#sinfo
add this thing to your code--
"oLanguage": { "sSearch": "" }
even if you don't get what you wished then you can simply post the same question on dataTable forum...dataload team will assist you...
Hope it will help you..

You must initialize datatables like this:
$('#yourtable').dataTable({
//your normal options
"oLanguage": { "sSearch": "" }
});

For datatables 1.10.10 (& possibly above), you can use following configuration while creating the datatables instance:
$('.datatable').DataTable({
// other initialization configurations...
// ...
"language": {
"search": "_INPUT_",
"searchPlaceholder": "Search..."
}
});
For more details, here is the link from DataTables site: https://datatables.net/reference/option/language.searchPlaceholder

For Datatables 1.9.4 and above you can use this
$('#yourtable').dataTable({
//your normal options
"language": { "search": "" }
});

Put placeholder when you remove search label
$("#data-table").DataTable({
language: { search: "",searchPlaceholder: "Search..." }
});

try below code:
jQuery("level").html("") or
jQuery("level").text("") or
jQuery("level").get(0).text("")
this will get all the level tag element,
since there is only on ehere use index 0.
It will find level element and set the value as ""

For some reason Placeholder wasn't working for me.
So, My workaround for removing Label and Putting place holder is,
$('#RecentLogs').dataTable({
"oLanguage": { "sSearch": "" }
});
So, above code will remove search label.
And for placeholder.
$('.dataTables_filter input').attr("placeholder", "Search Here");
Note :- Be sure that you are including placehoder's jquery line after datatable's initialization and after loading external js of datatable.