Initialising jQuery DataTables in Wordpress Breaking HTML Table - javascript

I've been working with DataTables in Wordpress but ran into a weird issue which seems like a wordpress specific problem.
I can initialise the jQuery DataTable without a problem using:
<script>
jQuery(document).ready( function () {
jQuery('#test_table').DataTable( {
dom: 'lBfrtip',
} );
} );
</script>
But the jQuery functionality disappears rendering the table back to plain html when I use:
<script>
jQuery(document).ready(function() {
// Setup - add a text input to each footer cell
jQuery('#test_table tfoot th').each( function () {
var title = jQuery(this).text();
jQuery(this).html( '<input type="text" placeholder="Search '+title+'" />' );
} );
// DataTable
var table = jQuery('#test_table').DataTable();
// Apply the search
table.columns().every( function () {
var that = this;
jQuery( 'input', this.footer() ).on( 'keyup change', function () {
if ( that.search() !== this.value ) {
that
.search( this.value )
.draw();
}
} );
} );
} );
</script>
It doesn't make sense because both of the above work fine in jsfiddle. Any ideas?

Thanks for your reply that makes sense,
Im enqueueing my .js file as described here: https://developer.wordpress.org/themes/basics/including-css-javascript/
After an excruciating few hours I managed to get it working with:
jQuery(document).ready(function() {
var table = jQuery('#test_table').DataTable();
// Setup - add a text input to each footer cell
jQuery('#test_table tfoot th').each( function () {
var title = jQuery(this).text();
jQuery(this).html( '<input type="text" placeholder="Search '+title+'" />' );
});
table.columns().every( function () {
var that = this;
jQuery( 'input', this.footer() ).on( 'keyup change', function () {
if ( that.search() !== this.value ) {
that
.search( this.value )
.draw();
}
});
});
});
I moved
var table = jQuery('#test_table').DataTable();
to line 2.
If anyone else runs into this problem my setup is:
Wordpress 5.0.3
Plugins:
Formidable Forms 3.0.5
Formidable Forms Pro 3.0.5

Related

How to do search with first letter in individual column searching datatable

I'am working on a web app with datatable.
I've done global research bar and individual research bar, like this example: https://datatables.net/examples/api/multi_filter.html
Now what I want to do is to start research by the first letter only in the individuals columns.
I tried to do this whith global research and it worked fine, thank to this :
$(document).ready(function() {
var table=$('#example').DataTable( {
responsive: true
} );
$('.dataTables_filter input').on( 'keyup', function (e) {
var regExSearch = '\\b' + this.value;
table.search(regExSearch, true, false).draw();
});
} );
But this is not what I want
And I have programmed my individual research like that :
table.columns(':gt(1)').every( function () {
var that = this;
$( 'input', this.footer() ).on( 'keyup change clear', function () {
if ( that.search() !== this.value ) {
that
.search(this.value )
.draw();
}
} );
} );
I tried to use the same logic as global research while adding
.search('\\b' +this.value )
but when I try to search something, nothing is returned.
Maybe I do something wrong, does anyone know how to do that ?
Ok I was so close.
The only thing I had to do is :
table.columns(':gt(1)').every( function () {
var that = this;
$( 'input', this.footer() ).on( 'keyup change clear', function () {
if ( that.search() !== this.value ) {
that
.search('\^'+this.value, true, false ) // regex=true, smart=false
.draw();
}
} );
} );
And it work.

How to apply search filter for only one column using datatables

I have a table and I'd like to apply a search filter on a specific column. I see a number of links on how to do so but in my code when I insert a javascript block to do the filter, there is nothing that shows up.
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
</head>
<body>
<table id="example">
<thead>
<tr><th>Sites</th></tr>
</thead>
<tbody>
<tr><td>SitePoint</td></tr>
<tr><td>Learnable</td></tr>
<tr><td>Flippa</td></tr>
</tbody>
</table>
<script>
$(function(){
$("#example").dataTable();
})
</script>
my confusion is where does this block of code go ( fit in to the main code )?
<script>
$(document).ready(function() {
// Setup - add a text input to each footer cell
$('#example tfoot th').each( function () {
var title = $(this).text();
$(this).html( '<input type="text" placeholder="Search '+title+'"
/>' );
} );
// DataTable
var table = $('#example').DataTable();
// Apply the search
table.columns().every( function () {
var that = this;
$( 'input', this.footer() ).on( 'keyup change', function () {
if ( that.search() !== this.value ) {
that
.search( this.value )
.draw();
}
} );
} );
} );
</script>
From their source:
$('#example thead tr').clone(true).appendTo( '#example thead' );
$('#example thead tr:eq(1) th').each( function (i) {
var title = $(this).text();
$(this).html( '<input type="text" placeholder="Search '+title+'" />' );
$( 'input', this ).on( 'keyup change', function () {
if ( table.column(i).search() !== this.value ) {
table
.column(i)
.search( this.value )
.draw();
}
} );
} );
var table = $('#example').DataTable( {
orderCellsTop: true,
fixedHeader: true
} );
This piece of code is executed after DOM has been rendered.
Cloning id used to fix the table column names from scrolling off the page.
You need this script as well for that.
If you want to apply a search filter using the datatable search input then you can achieve that by setting the searchable option to false for the rest of columns like this:
$('#example').datatable({
columnDefs: {
targets: [1,2], // the desired columns
searchable: false
}
});

Javascript placeholder doesnt show results on Datatables

After we apple the "oLanguage" this code blocks It doesnt show search resutls.
ORIGINAL CODE BLOCKS
<script>
$(document).ready(function() {
// Setup - add a text input to each footer cell
$('table.table tfoot th').each( function () {
var title = $(this).text();
$(this).html( '<input type="text" placeholder="'+title+' ARA" />' );
} );
// DataTable
var table = $('table.table').DataTable();
// Apply the search
table.columns().every( function () {
var that = this;
$( 'input', this.footer() ).on( 'keyup change', function () {
if ( that.search() !== this.value ) {
that
.search( this.value )
.draw();
}
} );
} );
} );
</script>
AFTER THE APPLYING "oLanguage"
$(document).ready(function() {
// Setup - add a text input to each footer cell
$('table.table tfoot th').each(function () {
$(this).html('<input type="text" placeholder="'+$(this).text()+' ARA" />');
});
// DataTable
var table = $('table.table').DataTable({
order: [
[0, "desc"]
],
paging: true,
oLanguage: {
sUrl: "js/dil/LANGUAGE.json",
}
});
// Apply the search
table.columns().every(function () {
var that = this;
$('input', this.footer()).on('keyup change', function () {
if (that.search() !== this.value ) {
that
.search( this.value )
.draw();
}
});
});
});
placeholder="'+$(this).text()+' ARA" works but It doesnt show search results. Before appliying "oLanguage" placeholder="'+title+' ARA" was working perfectly?
Any opinion?

export csv file for selected rows from datatable

I have created a datatable using the following examples:
1.Individual column searching
2.File export
And my code is as follows:
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// Setup - add a text input to each footer cell
$('#example tfoot th').each( function () {
var title = $(this).text();
$(this).html( '<input type="text" placeholder="Search '+title+'" />' );
} );
// DataTable
var table = $('#example').DataTable({'scrollX':true, 'dom': 'lBfrtip','buttons': ['csv']});
// Apply the search
table.columns().every( function () {
var that = this;
$( 'input', this.footer() ).on( 'keyup change', function () {
if ( that.search() !== this.value ) {
that
.search( this.value )
.draw();
}
} );
} );
} );
</script>
This code is working perfectly. Now I want to export only selected rows without changing the datatable structure in example 1. I am not an expert in Jquery. So can anyone can help me please? Also is it possible add checkboxes for selecting rows?
Thanks
I have managed to do that by using following code:
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// Setup - add a text input to each footer cell
$('#example tfoot th').each( function () {
var title = $(this).text();
$(this).html( '<input type="text" placeholder="Search '+title+'" />' );
} );
// DataTable
var table = $('#example').DataTable({'scrollX':true, 'dom': 'lBfrtip',buttons: [{ extend: 'csv',text: 'CSV all'},{extend: 'csv',text: 'CSV selected',exportOptions: {modifier: {selected: true}}}],select: true});
// Apply the search
table.columns().every( function () {
var that = this;
$( 'input', this.footer() ).on( 'keyup change', function () {
if ( that.search() !== this.value ) {
that
.search( this.value )
.draw();
}
} );
} );
} );
</script>
So I have added new code in my existing script.
buttons: [{ extend: 'csv',text: 'CSV all'},{extend: 'csv',text: 'CSV selected',exportOptions: {modifier: {selected: true}}}],select: true

How to use keyup in ckeditor

I am using angular js for development.
Initializing ck editor on controller
function initEditor(){
CKEDITOR.replace( 'editor1', {
on: {
pluginsLoaded: function( evt )
{
var doc = CKEDITOR.document, ed = evt.editor;
if ( !ed.getCommand( 'bold' ) )
doc.getById( 'exec-bold' ).hide();
if ( !ed.getCommand( 'link' ) )
doc.getById( 'exec-link' ).hide();
}
}
});
}
Html
<textarea cols="100" id="editor1" name="editor1" rows="50"></textarea>
I have tried several way to find key up but not working
CKEDITOR.instances["editor1"].on('keyup', function() {
alert('key up');
}
I have refereed some other SO answers also , nothing seems to be working . Is it because of i am using angular js controller .
Please suggest a way to do this
I got the solution
var editor = CKEDITOR.instances["editor1"] ;
editor.on( 'contentDom', function() {
var editable = editor.editable();
editable.attachListener( editor.document, 'keydown', function() {
console.log('key up');
} );
} );

Categories

Resources