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
Related
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
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
}
});
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?
I have a DataTable that has frezzed columns. Now I also placed a search input type text as footer. Now I have this script on keyup which is under on a .every function but its not firing up. Can anyone help?
<script type="text/javascript">
$(document).ready(function() {
$('#example tfoot th').each( function () {
var title = $('#example thead th').eq( $(this).index() ).text();
$(this).html( '<input type="text" placeholder="'+title+'" />' );
} );
var table = $('#example').DataTable({
setTimeout: "50",
scrollY: "350px",
scrollX: true,
scrollCollapse: true,
paging: false,
heightMatch: "auto",
columnFilter: true,
fixedColumns: {
leftColumns: 2
},
});
table.columns().every( function () {
var that = this;
$( 'input', this.footer() ).on( 'keyup', function () {
alert('NAGIBA');
/*that
.search( this.value )
.draw();*/
} );
} );
});
</script>
Hi use 'keyup change' instead of 'keyup' as showb below.
$( 'input', this.footer() ).on( 'keyup change', function () {
alert('NAGIBA');
/*that
.search( this.value )
.draw();*/
} );
For more details check this link
and this link
When I integrate jQuery DataTables column filter and row grouping, jQuery DataTables column filter is not working.
I tried the demo but it seems in the demo column filter also does not work.
SOLUTION
Plug-ins Row Grouping along with Column Filtering are no longer being developed, I would not recommend using them. Use DataTables options and API methods to perform row grouping and individual column searching as shown in Row grouping example and Individual column searching example.
// Setup - add a text input to each footer cell
$('#example tfoot th').each( function () {
var title = $('#example thead th').eq( $(this).index() ).text();
$(this).html( '<input type="text" placeholder="Search '+title+'" />' );
} );
// DataTable
var table = $('#example').DataTable({
"order": [[2, 'asc']],
"drawCallback": function (settings){
var api = this.api();
// Zero-based index of the column for row grouping
var col_name = 2;
// If ordered by column containing names
if (api.order()[0][0] === col_name) {
var rows = api.rows({ page: 'current' }).nodes();
var group_last = null;
api.column(col_name, { page: 'current' }).data().each(function (name, index){
var group = name;
if (group_last !== group) {
$(rows).eq(index).before(
'<tr class="group"><td colspan="6">' + group + '</td></tr>'
);
group_last = group;
}
});
}
}
});
// 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();
}
} );
} );
DEMO
See this jsFiddle for code and demonstration.