Develop Reference

Datatable individual column searching mixing input and select

Referring to the Individual column searching (text inputs) and Individual column searching (select inputs) to use multiple filters on jQuery DataTable, I mixed them up in order to allow text inputs searches on some columns and select inputs searching on others.
It almost works, but select inputs don't work correctly: the first select input on the third column shows values of the first column, the second select input shows the second column, and so on.
$( document ).ready(function() {
$('#wbe_table tfoot th.search_th').each( function () {
var title = $(this).text();
$(this).html( '<input type="text" placeholder="Search '+title+'" />' );
} );
var oTable = $('#wbe_table').DataTable( {
orderCellsTop: true,
fixedHeader: true,
responsive: true,
lengthChange: true,
autoWidth: true,
pageLength: 50,
order: [[7, "desc"]],
columnDefs: [
{
targets: [4],
orderable: false
},
{
type: "currency",
targets: [7,8,9,10]
},
],
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
] ,
//Select input search
initComplete: function () {
var api = this.api();
$('.filterhead', api.table().footer()).each( function (i) {
var column = api.column(i);
var select = $('<select><option value=""></option></select>')
.appendTo( $(this).empty() )
.on( 'change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search( val ? '^'+val+'$' : '', true, false )
.draw();
} );
column.data().unique().sort().each( function ( d, j ) {
select.append( '<option value="'+d+'">'+d+'</option>' );
} );
} );
}
});
// Text input search
oTable.columns().every( function () {
var that = this;
$( 'input', this.footer() ).on( 'keyup change', function () {
if ( that.search() !== this.value ) {
that
.search( this.value )
.draw();
}
} );
} );
});

Individual column searching using DataTable , data source from java script

//am trying to create table using DataTable Plugin , i need individual filter column for each column in the table ,
am using javascripted resourse for data
https://jsfiddle.net/ImmanuelRocha/zu0h3yca/
example:https://datatables.net/examples/data_sources/js_array.html
var dataSet = [
["Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800"],
["Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750"]];
$(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({
data: dataSet,
columns: [{
title: "Name"
}, {
title: "Position"
}, {
title: "Office"
}, {
title: "Extn."
}, {
title: "Start date"
}, {
title: "Salary"
}]
});
// 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();
}
});
});

Add a <tfoot></tfoot> tag in your table like:
<tfoot>
<tr>
<th></th>
</tr>
</tfoot>
and the Jquery code:
$(document).ready(function() {
var data = [];
data.push(
[1,"Sasha","Brenna","0800 1111"],
[2,"Sage","Mia","(01012) 405872"],
[3,"Chelsea","Allistair","076 0578 0265"],
[4,"Uta","Savannah","070 1247 5884"],
[5,"Remedios","Berk","0995 181 0007"],
[6,"Ruby","Wayne","0800 1111"],
[7,"Faith","Fredericka","(01709) 099879"],
[8,"Myra","Harrison","070 4241 9576"],
[9,"Drake","Miriam","0800 733635"],
[10,"Reed","Shannon","076 8597 5067"]
);
var count = 0; // To manage the column count for which filter is required
$('#data_table').DataTable( {
data: data,
initComplete: function (){
this.api().columns().every( function () {
if(count == 2)
{
var column = this;
var select = $('<select><option value=""></option></select>')
.appendTo( $(column.footer()).empty() )
.on( 'change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search( val ? '^'+val+'$' : '', true, false )
.draw();
});
column.data().unique().sort().each( function ( d, j ) {
select.append( '<option value="'+d+'">'+d+'</option>' )
});
}
count++;
});
}
});
});
Working Fiddle
Working Fiddle for all column filter

JQuery Datatables.net thead sorting image removal

I am using DataTables 1.10.12. I implemented it using MVC framwork. My problem is I have 25 columns in the table which I can accomodate on the same page if I do not have the sorting images in the . To remove them I have tried the following:
<table id="datatable-buttons-por" class="table table-striped table-bordered">
<thead style="font-size:smaller; background:none">
<tr>
And following
$(document).ready(function () {
var handleDataTableButtons = function () {
if ($("#datatable-buttons-por").length) {
$("#datatable-buttons-por").DataTable({
dom: "Bfrtip",
buttons: [
{
extend: "copy",
className: "btn-sm"
},
{
extend: "csv",
className: "btn-sm"
},
{
extend: "excel",
className: "btn-sm"
},
{
extend: "pdfHtml5",
className: "btn-sm"
},
{
extend: "print",
className: "btn-sm"
},
],
responsive: true
});
}
};
TableManageButtons = function () {
"use strict";
return {
init: function () {
handleDataTableButtons();
}
};
}();
var $datatable = $('#datatable-checkbox');
$datatable.dataTable({
'order': [[1, 'asc']],
'columnDefs': [
{ orderable: false, targets: [0] }
]
});
$datatable.on('draw.dt', function () {
$('input').iCheck({
checkboxClass: 'icheckbox_flat-green'
});
});
TableManageButtons.init();
//$('#datatable-buttons-por thead').css('background-image', 'none');
var table = $('#datatable-buttons-por').DataTable();
table.columns().every(function () {
var column = this;
var select = $('<select><option value=""></option></select>')
.appendTo($(column.footer()).empty())
.on('change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search(val ? '^' + val + '$' : '', true, false)
.draw();
});
column.data().unique().sort().each(function (d, j) {
select.append('<option value="' + d + '">' + d + '</option>')
});
});
});
$('#datatable-buttons-por thead th').css('background-image', 'none');
in Javascript.
Seems like none of these working. What I am doing wrong here? By the way, I still want to keep my sorting functionality enabled.

You need to target the th not the thead
try:
$('#datatable-buttons-por thead th.sorting').css('background-image', 'none');

How do I sort(default sort), show 50 entries and filter each column datatable?

<script>
$(document).ready(function() {
$('#sortable').DataTable( {
initComplete: function () {
this.api().columns([0,1,2,3]).every( function () {
var column = this;
var select = $('<select><option value=""></option></select>')
// var select = $('<select><option value="">' + $(this.header()).html() + '</option></select>')
.appendTo( $(column.header()).empty() )
.on( 'change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search( val ? '^'+val+'$' : '', true, false )
.draw();
} );
column.data().unique().sort().each( function ( d, j ) {
//select.append( '<option value="'+d+'">'+d+'</option>' )
select.append( '<option>'+d+'</option>' )
} );
} );
}
} );
} );
$(document).ready(function() {
$('#sortable').DataTable({
"order": [[1, "asc"],[0, "asc"]],
"columns": [
null,
null,
null,
{"orderable": false},
{"orderable": false},
{"orderable": false},
],
"searching": true,
"paging": false,
"ordering": true,
"info": false
});
} );
</script>
These 2 separate blocks work well individually if the other is commented out, but I don't know how I can combine them to be one block so I can achieve default sorting and drop-down filters.
The aim is to have drop-down filters on columns [0,1,2,3], default sorting and have defaults number of rows shown = 50.
//like so:
<script>
$(document).ready(function() {
$('#sortable').DataTable( {
sort by default;
set default rows shown to 50;
put filter on first 4 colmuns;
})
})
</script>
Thanks in advance for your help.

Your "two blocks" are two initializations of a DataTables object made from the same table, which is why they don't work together. The good news is that you can just combine the two into a single block and they should work together, since none of the options you're using conflict with each other (as far as I can tell). It should look like this:
<script>
$(document).ready(function() {
$('#sortable').DataTable( {
pageLength: 50, //This is the option which will give you 50 rows by default
order: [[1, "asc"],[0, "asc"]],
columns: [
null,
null,
null,
{"orderable": false},
{"orderable": false},
{"orderable": false},
],
searching: true,
paging: false,
ordering: true,
info: false,
initComplete: function () {
this.api().columns([0,1,2,3]).every( function () {
var column = this;
var select = $('<select><option value=""></option></select>')
// var select = $('<select><option value="">' + $(this.header()).html() + '</option></select>')
.appendTo( $(column.header()).empty() )
.on( 'change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search( val ? '^'+val+'$' : '', true, false )
.draw();
} );
column.data().unique().sort().each( function ( d, j ) {
//select.append( '<option value="'+d+'">'+d+'</option>' )
select.append( '<option>'+d+'</option>' )
} );
} );
}
} );
} );
</script>
You'll note that all I did was put the options selected in the second block into the first block and add the pageLength option to start the number of rows at 50. You can optionally surround the names of the options with "" if you want, but it's unneccessary, just a preference thing (e.g. "order" vs order).
You should only ever have one DataTables initialization .DataTable() call in your code per page.

Console: ReferenceError: stopPropagation is not defined

What's the problem here? I get the search I want, but it doesn't redraw the table when using the exact match regex column. I'm using a single column to better filter a ranking value that is numeric.
<script>
jQuery(document).ready( function () {
// Setup - add a text input to each header cell
jQuery('#table1 thead tr#filterrow th').each( function () {
var title = jQuery('#table1 thead th').eq( jQuery(this).index() ).text();
jQuery(this).html( '<input type="text" onclick="stopPropagation(event);" placeholder="Search '+title+'" />' );
} );
// Setup - add a text input to each footer cell
jQuery('#table1 tfoot tr#filterrow th').each( function () {
var title = jQuery('#table1 tfoot th').eq( jQuery(this).index() ).text();
jQuery(this).html( '<input type="text" onclick="stopPropagation(event);" placeholder="Search '+title+'" />' );
} );
// DataTable
var table = jQuery('#table1').DataTable( {
orderCellsTop: true,
aLengthMenu: [[-1, 10, 25, 50, 100, 200, 300, 400, 500],[ "All", 10, 25, 50, 100, 200, 300, 400, 500]],
iDisplayLength: -1,
dom: 'B<"lb">lfrtip',
responsive: 'true',
buttons: [
{ extend: 'copy',
oSelectorOpts: {
filter: 'applied'
}
},
{ extend: 'csv',
oSelectorOpts: {
filter: 'applied'
}
},
{ extend: 'pdfHtml5',
oSelectorOpts: {
filter: 'applied'
}
},
{ extend: 'print',
autoPrint: false,
oSelectorOpts: {
filter: 'applied'
}
}
]
} );
// Apply the filter
jQuery("#table1 thead input").on( 'keyup change', function () {
table
.column( jQuery(this).parent().index()+':visible' )
.search(this.value)
.draw();
} );
jQuery("#table1 tfoot input").on( 'keyup change', function () {
table
.column( jQuery(this).parent().index()+':visible' )
.search(this.value)
.draw();
} );
jQuery("#table1 thead input").on( 'keyup change', function () {
table
.column(4)
.search("^" + this.value + "$", true, false, true)
.draw();
} );
jQuery("#table1 tfoot input").on( 'keyup change', function () {
table
.column(4)
.search("^" + this.value + "$", true, false, true)
.draw();
} );
function stopPropagation(evt) {
if (evt.stopPropagation !== undefined) {
evt.stopPropagation();
} else {
evt.cancelBubble = true;
}
}
} );
</script>
I feel like something in my code should be condensed.

The problem is that stopPropagation() method is defined inside ready event handler and is not visible outside of it.
Move definition stopPropagation() outside of ready event handler:
jQuery(document).ready( function () {
// ... skipped ...
});
function stopPropagation(evt) {
if (evt.stopPropagation !== undefined) {
evt.stopPropagation();
} else {
evt.cancelBubble = true;
}
}
NOTES
Since you're using jQuery you could rewrite the same with less code. And the click event handler could be placed inside ready event handler.
You're assigning keyup change twice for each input element in footer and header. Consider rewriting your code as shown in this example.