Column().search() not accurate

Rob54

I have a column that is numeric and when I apply a column search, I am getting numbers that are not the searched value (i.e. "150" when searching for "130")

``` Table declaration the {tblData} string is replaced by a JSON string in the PHP that loads the page with data from the server:

tblRows = $('#tblRows').DataTable(
{
"bDeferRender": true,
"bSortClasses": false,
"paging": false,
"autoWidth": false,
"info": true,
{tblData},
"columns": [
{
"data":"i"
},
{
"data":"Date"
},
{
"data":"Invoice"
},
{
"data":"Company"
},
{
"class":"dt-right",
"data":"Age"
},
{
"class":"dt-right",
"data":"Amount"
},
{
"class":"dt-right",
"data":"BalanceDue"
},
{
"class":"dt-right",
"data":null
},
{
"class":"dt-right",
"data":null
}
],
"columnDefs": [
{
"orderable": false,
"render": function ( data, type, row )
{
var formatting = '<input type="checkbox" id="Select' + row.i + '" name="Select' + row.i + '">';
return formatting;
},
"targets": 0
},
{
"render": function ( data, type, row )
{
var formatting = '<label id="Date' + row.i + '">' + data + '</label>';
return formatting;
},
"targets": 1
},
{
"render": function ( data, type, row )
{
var formatting = '<label id="Invoice' + row.i + '">' + data + '</label>';
return formatting;
},
"targets": 2
},
{
"type":"num",
"render": function ( data, type, row )
{
var formatting = '<label id="Company' + row.i + '" class="text-right">' + data + '</label>';
return formatting;
},
"targets": 3
},
{
"render": function ( data, type, row )
{
var formatting = '<label id="Age' + row.i + '" class="text-right">' + data + '</label>';
return formatting;
},
"targets": 4
},
{
"render": function ( data, type, row )
{
var formatting = '<label id="Amount' + row.i + '" class="text-right">' + data + '</label>';
return formatting;
},
"targets": 5
},
{
"render": function ( data, type, row )
{
var formatting = '<label id="BalanceDue' + row.i + '" class="text-right">' + data + '</label>';
return formatting;
},
"targets": 6
},
{
"render": function ( data, type, row )
{
var formatting = '<input type="text" class="text_right" id="PaidAmount' + row.i +
'" name="PaidAmount" value="" onblur="HandleAmountPaid(this,' + row.i + ');" dataformat="currency" />';
return formatting;
},
"targets": 7
},
{
"render": function ( data, type, row )
{
var formatting = '<span class="text_right" id="Variance' + row.i + '" dataformat="currency">0.00</span>';
return formatting;
},
"targets": 8
}
]
});

The function to call column filter based on dropdown selection:

Note: I have tried "tblRows.column(3).search(val).draw();" as well without success.

function setCoDDL(ddl)
{
var val = $(ddl).val();
if (val != -1)
{
var regex = "/^" + val + "$/";
tblRows.column(3).search(val,true,false,true).draw();
}
else
{
tblRows.column(3).search("").draw();
}
}

The dataset contains about 5,700 rows, if that makes any difference. Any ideas why the extraneous rows are showing up after searching?

Rob54

I feel stupid. I forgot I am wrapping the data in an HTML label. Setting "type":"html" in columnDefs fixed it.