Filters in the thead become disabled when ColReorder is enabled?
Filters in the thead become disabled when ColReorder is enabled?
DTBLs
Posts: 3Questions: 1Answers: 0
Hi,
dom: 'Rlfrtip' - removing the R enables the Filters.
I put the code I'm using here - http://live.datatables.net/kimuniza/1/edit?html,css,js,output
I tweaked the stock example found here http://datatables.net/release-datatables/extensions/ColReorder/examples/col_filter.html
Thanks
If this helps, I'm pasting the script as well:
'''js
// taken from http://datatables.net/release-datatables/extensions/ColReorder/examples/col_filter.html
$(document).ready(function () {
// Setup - add a text input to each header cell
$('#example thead th').each(function () {
var title = $('#example thead th').eq($(this).index()).text();
$(this).html(title + '<input type="text" placeholder="Search ' + title + '" onclick="stopPropagation(event)" />');
});
// DataTable
var table = $('#example').DataTable({
dom: 'Rlfrtip'
});
// Apply the filter
$("#example thead input").on('keyup change', function () {
table
.column($(this).parent().index() + ':visible')
.search(this.value)
.draw();
});
});
//04.17.2015 to stop the textboxes from triggering the sort added this code
//https://datatables.net/forums/discussion/20272/how-to-put-individual-column-filter-inputs-at-top-of-columns
function stopPropagation(evt) {
if (evt.stopPropagation !== undefined) {
evt.stopPropagation();
} else {
evt.cancelBubble = true;
}
}
'''
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
Excellent feedback from Allan:
"The issue you are seeing with the filters not working when ColReorder is enabled is basically due to the same issue as the
preventDefaultcode in your example! ColReorder has apreventDefaulton mousedown which is stopping the text box from being selected.I think probably the best fix would be to have a second row in the header that will contains your search boxes: http://live.datatables.net/kimuniza/2/edit . Then ColReorder can do what it needs on the top row (
orderCellsTopused), while the filtering occurs on the second row."I would follow Allan's advice but for I'm using an unbound asp.net gridview to generate the header and rest of the table markup. That control isn't the nicest when trying to add an additional row to the header.
I modified the js to include the onmousedown and it appears to be working well. http://live.datatables.net/kimuniza/4/edit
Thanks again Allan!!!
Welcome :-).
edit:
Could you use a line of jQuery immediately before the DataTables initialisation to clone the existing header row and insert it? Might save some grief on the backend!
Allan, thank you again!