Why is my search not working for my first column?
Why is my search not working for my first column?

Below is how my table is put together
var mainDT;
/**
* Generates Main DataTables
*/
function getTable(){
//Initialize Main DataTable
mainDT = $('#mainTable').DataTable( {
display: 'enevlope',
ajax: {
'type': 'POST',
'url': './ajax/getData.ajax.php',
'data': {
'getTable': 1,
}
},
table: ('#mainTable'),
orderCellsTop: true,
searching: true,
paging: true,
iDisplayLength: 10,
bInfo: true,
scrollX: true,
dom:
"<'row'<'col-12 col-sm-6 col-md-4 col-lg-3'l><'col-md-4 col-lg-6 d-none d-md-block'><'col-12 col-sm-6 col-md-4 col-lg-3'f>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-5'i><'col-sm-7'p>>",
columns: [
{ data: null, render: function( data, type, row ){
return "<a class=\" default-link\" onClick=\"viewEmployee(" + data.uid + ")\">" + data.card_name;
}},
{ data: null, render: function( data, type, row ){
if (data.attendance == 1){
return "Y";
} else {
return "N";
}
}},
{ data: null, render: function( data, type, row ){
if (data.batchweight == 1){
return "Y";
} else {
return "N";
}
}},
{ data: null, render: function( data, type, row ){
if (data.brkroomkiosk == 1){
return "Y";
} else {
return "N";
}
}},
{ data: null, render: function( data, type, row ){
if (data.capex_ro == 1){
return "Y";
} else {
return "N";
}
}},
{ data: null, render: function( data, type, row ){
if (data.capex_rw == 1){
return "Y";
} else {
return "N";
}
}},
{ data: null, render: function( data, type, row ){
if (data.labelmanage == 1){
return "Y";
} else {
return "N";
}
}},
{ data: null, render: function( data, type, row ){
if (data.mixercountdn == 1){
return "Y";
} else {
return "N";
}
}},
{ data: null, render: function( data, type, row ){
if (data.oraclecomp == 1){
return "Y";
} else {
return "N";
}
}},
{ data: null, render: function( data, type, row ){
if (data.personnel_m == 1){
return "Y";
} else {
return "N";
}
}},
{ data: null, render: function( data, type, row ){
if (data.personnel_ro == 1){
return "Y";
} else {
return "N";
}
}},
{ data: null, render: function( data, type, row ){
if (data.personnel_rw == 1){
return "Y";
} else {
return "N";
}
}},
{ data: null, render: function( data, type, row ){
if (data.phoneupdate == 1){
return "Y";
} else {
return "N";
}
}},
{ data: null, render: function( data, type, row ){
if (data.pressparam == 1){
return "Y";
} else {
return "N";
}
}},
{ data: null, render: function( data, type, row ){
if (data.projskedro == 1){
return "Y";
} else {
return "N";
}
}},
{ data: null, render: function( data, type, row ){
if (data.projskedrw == 1){
return "Y";
} else {
return "N";
}
}},
{ data: null, render: function( data, type, row ){
if (data.recipe == 1){
return "Y";
} else {
return "N";
}
}},
{ data: null, render: function( data, type, row ){
if (data.safety == 1){
return "Y";
} else {
return "N";
}
}},
{ data: null, render: function( data, type, row ){
if (data.safetymgr == 1){
return "Y";
} else {
return "N";
}
}},
{ data: null, render: function( data, type, row ){
if (data.schedkiosk == 1){
return "Y";
} else {
return "N";
}
}},
{ data: null, render: function( data, type, row ){
if (data.siginstruct == 1){
return "Y";
} else {
return "N";
}
}},
{ data: null, render: function( data, type, row ){
if (data.super == 1){
return "Y";
} else {
return "N";
}
}},
{ data: null, render: function( data, type, row ){
if (data.txtalert == 1){
return "Y";
} else {
return "N";
}
}},
{ data: null, render: function( data, type, row ){
if (data.uploadoff == 1){
return "Y";
} else {
return "N";
}
}},
{ data: null, render: function( data, type, row ){
if (data.webprod == 1){
return "Y";
} else {
return "N";
}
}},
],
fixedColumns: {
leftColumns: 1
},
initComplete: function(){
//This draws the option for the table for static row
this.api().columns([0]).every( function () {
var column = this;
var select = $('<input type="text" class="fixed_col" placeholder="Search" />')
.appendTo($(column.header()).parent().parent().children('tr').eq(1).children('th').eq(0).empty() )
.on( 'keyup change clear', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search( this.value )
.draw();
} );
} );
//This Draws The Option For The Table
this.api().columns([]).every(function(index){
var column = this;
var select = $('<select><option value=""></option></select>')
.appendTo($(column.header()).parent().children('tr').eq(1).children('th').eq(index).empty() )
.on( 'keyup change clear', function(){
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search( this.value )
.draw();
});
});
//This Draws The Option For The Table
this.api().columns([]).every(function(index) {
var column = this;
var width = "100%";
if(index == 1){
width = "600px";
}
var select = $('<input type="text" style="width:' + width + '"placeholder="Search"/>')
.appendTo($(column.header()).parent().parent().children('tr').eq(1).children('th').eq(index).empty() )
.on( 'keyup change clear', function(){
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search( this.value )
.draw();
});
});
}
});
mainDT.buttons().container()
.appendTo( '#mainTable_wrapper .col-md-6:eq(0)' );
$( mainDT.table().container() ).on ( 'keyup change clear', 'fixed_col', function(){
mainDT
.mainDT( $(this).data('index') )
.search( this.value )
.draw();
});
//Wait Half A Second For The Table To Finish And Align Columns
setTimeout(fixColumns, 500, mainDT);
}
At line 205 is where I begin to configure the search function for my table. I have it configured the same way in multiple other applications and it works fine. Was wondering why is won't work here? Do I have an error within my code that I can't see? Or what could be a potential probably?
Answers
I copied your code for the first column into this test case and it seems to work.
https://live.datatables.net/saqozowe/2482/edit
Can you post a link to your page or a test case that replicates the issue.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case
Kevin
I took another look. For the first column you have this:
You might need to extract the data you want to search by using orthogonal data to set the
search
and if desired thesort
operations to the value you want. Maybe thedata.card_name
value?Kevin