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();
}
} );
} );
});

how to add filters to each columns for datatables

I'm using jquery and used datatable library.
I created my datatable like this:
$datatable = $('#datatable-buttons').DataTable({
keys: true, searching: false, "paging": false, "info": false,
buttons: [
{
extend: 'copyHtml5',
text: '<i class="fa fa-files-o"></i>',
titleAttr: 'Copy'
},
{
extend: 'excelHtml5',
text: '<i class="fa fa-file-excel-o"></i>',
titleAttr: 'Excel'
},
{
extend: 'csvHtml5',
text: '<i class="fa fa-file-text-o"></i>',
titleAttr: 'CSV'
}
],
orderCellsTop: true,
fixedHeader: true,
initComplete: function () {
var api = this.api();
// For each column
api
.columns()
.eq(0)
.each(function (colIdx) {
// Set the header cell to contain the input element
var cell = $('.filters th').eq(
$(api.column(colIdx).header()).index()
);
var title = $(cell).text();
$(cell).html('<input type="text" placeholder="' + title + '" />');
// On every keypress in this input
$(
'input',
$('.filters th').eq($(api.column(colIdx).header()).index())
)
.off('keyup change')
.on('keyup change', function (e) {
e.stopPropagation();
// Get the search value
$(this).attr('title', $(this).val());
var regexr = '({search})'; //$(this).parents('th').find('select').val();
var cursorPosition = this.selectionStart;
// Search the column for that value
api
.column(colIdx)
.search(
this.value != ''
? regexr.replace('{search}', '(((' + this.value + ')))')
: '',
this.value != '',
this.value == ''
)
.draw();
$(this)
.focus()[0]
.setSelectionRange(cursorPosition, cursorPosition);
});
});
}
});
I have a submit button to get data from my server and draw data to datatable:
function refreshDataTable(result) {
rowDataTable = PER_PAG * (CURRENT_PAGE - 1)
var rows = []
result.forEach((item => {
++rowDataTable
var data = [rowDataTable, item.order_id, "item.shipping.mobile", item.shipping.first_name, item.shipping.last_name, item.shipping.state, item.shipping.city, item.shipping.address, item.shipping.title, item.shipping.cost, item.shipping.delivery_time]
console.log("data",data)
rows.push(data)
}))
$datatable.rows.add(rows).draw();
}
it shows some inputs above each columns. but when I typing some texts it doesn't to filter my rows.

Datatable custom filtering with Server Side with Editor

I am having some trouble integrating some custom functionalities with Datatable and Datatable Editor at the same time.
Without server-side processing my current functionalities works perfectly but I want to be able to implement server-side filtering with Editor.
With server-side filtering these work:
1.Pagination
2.Global Search
3.Sorting
4.Row reorder
5.Dynamic Page length
With server-side filtering these don't work:
1.Custom column input filtering
2.Custom footer select filtering
My serverside script for Datatable and Editor:
Editor::inst($db, 'article_categories')
->fields(
Field::inst('article_categories.id')->validator('Validate::numeric'),
Field::inst('article_categories.name')->validator('Validate::notEmpty'),
Field::inst('article_categories.description'),
Field::inst('article_categories.rowOrder')->validator('Validate::numeric')
)
->on('preCreate', function ($editor, $values) {
if (!$values['article_categories']['rowOrder']) {
$next = $editor->db()->sql('select IFNULL(MAX(rowOrder)+1, 1) as next FROM article_categories')->fetch();
$editor->field('article_categories.rowOrder')->setValue($next['next']);
} else {
$editor->db()
->query('update', 'article_categories')
->set('rowOrder', 'rowOrder+1', false)
->where('rowOrder', $values['article_categories']['rowOrder'], '>=')
->exec();
}
})
->on('preRemove', function ($editor, $id, $values) {
$order = $editor->db()
->select('article_categories', 'rowOrder', array('id' => $id))
->fetch();
$editor->db()
->query('update', 'article_categories')
->set('rowOrder', 'rowOrder-1', false)
->where('rowOrder', $order['rowOrder'], '>')
->exec();
})
->process($request->all())
->json();
My client-side script:
Default config:
jQuery(function () {
$.extend(true, $.fn.dataTable.defaults, {
serverSide: true,
fixedHeader: true,
searchDelay: 800,
paging: true,
processing: true,
pageLength: 10,
info: true,
dom: "Blfrtip",
select: true,
responsive: true,
lengthMenu: [
[10, 25, 50, -1],
[10, 25, 50, "All"],
],
});
});
Datatable and Editor setup:
var editor;
jQuery(function () {
//Editor
editor = new $.fn.dataTable.Editor({
table: "#article-category",
ajax: {
url: "article-categories",
type: "POST",
},
fields: [
{
label: "Order:",
name: "article_categories.rowOrder",
type: "hidden",
fieldInfo:
"This field can only be edited via click and drag row reordering.",
},
{
label: "FAQ Category Name:",
name: "article_categories.name",
},
{
label: "Description (optional):",
name: "article_categories.description",
type: "textarea",
},
],
});
//Datatable
var table = $("#article-category").DataTable({
ajax: {
url: "article-categories",
type: "POST",
},
rowReorder: {
dataSrc: "article_categories.rowOrder",
editor: editor,
},
buttons: cms.editorFormButtons(editor),
initComplete: function () {
cms.headerInputFilter("article-category", this.api(), [1, 2]);
cms.footerSelectFilter(this.api(), [1, 2]);
},
columns: [
{
data: "article_categories.rowOrder",
name: "article_categories.rowOrder",
className: "reorder no-inline",
},
{
data: "article_categories.name",
name: "article_categories.name",
},
{
data: "article_categories.description",
name: "article_categories.description",
},
],
});
//Inline Editor
cms.inlineEdit("article-category", editor);
editor
.on("postCreate postRemove", function () {
table.ajax.reload(null, false);
})
.on("initCreate", function () {
editor.field("article_categories.rowOrder").enable();
})
.on("initEdit", function () {
editor.field("article_categories.rowOrder").disable();
});
});
Custom functions:
let footerSelectFilter = function (table, columns) {
if (typeof columns != "undefined" && typeof table != "undefined") {
table.columns(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>"
);
});
});
}
};
let headerInputFilter = function (target, table, searchableColumns) {
if (
typeof searchableColumns != "undefined" &&
typeof target != "undefined" &&
typeof table != "undefined"
) {
$("#" + target + " thead tr")
.clone(true)
.addClass("filters")
.appendTo("#" + target + " thead");
var i = 0;
var api = table;
api.columns()
.eq(0)
.each(function (colIdx) {
if (
searchableColumns.includes(
$(api.column(colIdx).header()).index()
)
) {
var cell = $(".filters th").eq(
$(api.column(colIdx).header()).index()
);
var title = $(cell).text();
$(cell).html(
'<input style="width:100% !important" type="text" placeholder="' +
title +
'" />'
);
$(
"input",
$(".filters th").eq(
$(api.column(colIdx).header()).index()
)
)
.off("keyup change")
.on("keyup change", function (e) {
e.stopPropagation();
$(this).attr("title", $(this).val());
var regexr = "({search})";
var cursorPosition = this.selectionStart;
api.column(colIdx)
.search(
this.value != ""
? regexr.replace(
"{search}",
"(((" + this.value + ")))"
)
: "",
this.value != "",
this.value == ""
)
.draw();
$(this)
.focus()[0]
.setSelectionRange(
cursorPosition,
cursorPosition
);
});
} else {
return true;
}
});
}
};
let editorFormButtons = function (editor) {
if (typeof editor != "undefined") {
return [
{
extend: "create",
editor: editor,
formButtons: [
{
label: "Save",
fn: function () {
var that = this;
this.submit(function () {
that.close();
});
},
},
],
},
{
extend: "edit",
text: "Edit",
editor: editor,
formButtons: [
{
label: "Save & close",
fn: function () {
var that = this;
this.submit(function () {
that.close();
});
},
},
{
label: "Update",
fn: function () {
this.submit(function () {
editor.edit(
table.rows({ selected: true }).indexes()
);
});
},
},
],
},
{
extend: "remove",
editor: editor,
formButtons: [
{
label: "Delete",
fn: function () {
var that = this;
this.submit(function () {
that.close();
});
},
},
],
},
];
}
};
let inlineEdit = function (target, editor) {
if (typeof target != "undefined" && typeof editor != "undefined") {
$("#" + target + "").on(
"click",
"tbody td:not(.no-inline)",
function (e) {
if (
$(this).hasClass("editor-edit") ||
$(this).hasClass("control") ||
$(this).hasClass("select-checkbox") ||
$(this).hasClass("dataTables_empty")
) {
return;
}
editor.inline(this, {
submit: "allIfChanged",
});
}
);
}
};
module.exports = {
headerInputFilter,
footerSelectFilter,
editorFormButtons,
inlineEdit,
};
When I set server-side to false the custom functionalities I need works perfectly but I need these with server-side processing as it will significantly improve overall performance . I would appreciate any help and suggestion.
Regards,
Shovon Choudhury

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');

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.