Datatables columnFilter showing old values on table reload

southfanning

I'm passing a json object into a function that creates a datatable. I'm using columnFilter to add filters to each column, and I use an array to fill the filter list.

I have a pic here showing a good filter.

The problem is if I call the function with a new json, the column filters turn into a big string with the previous filter values in it. This happens even though I'm setting my array lengths to 0 and the json is empty.

This pic shows a mash of the previous values in the filter header when the table is reloaded with an empty json.

In a lot of examples online, I see people using this:

{ type: "select"}

That seems to build the list for them, but it's not working for me. This method seems to be fine other than when I reload the table.

How do I clear this select filter out each time I call the popNoteTable function?

function popNoteTable(oJson) {
//these store the unique values for filtering columns
var oTitles = [];
var oLocs = [];
var oSigned = [];

if (oJson.M_REC.NOTE.length > 0) {
oTitles = getUniqueJsonValuesByCol("S_TITLE", oJson.M_REC.NOTE);
oLocs = getUniqueJsonValuesByCol("S_FACILITY", oJson.M_REC.NOTE);
oSigned = getUniqueJsonValuesByCol("S_SIGNED_BY", oJson.M_REC.NOTE);
} else {
oTitles.length = 0;
oLocs.length = 0;
oSigned.length = 0;
}

var oTable = $('#example').dataTable({
"bFilter": true,
"iDisplayLength": 50,
"bProcessing": true,
"bDestroy": true,
"aaData": oJson.M_REC.NOTE,
"bAutoWidth": false,
"aoColumns": [
{"mDataProp": "S_TITLE"},
{"mDataProp": "S_FACILITY"},
{"mDataProp": "S_SIGNED_BY"},
{"mDataProp": "S_SIGN_DT_TM"},
{"mDataProp": "F_EVENT_ID", "bVisible": false}
]
}).columnFilter({
sPlaceHolder: "head:before",
aoColumns: [
{type: "select", values: oTitles},
{type: "select", values: oLocs},
{type: "select", values: oSigned},
null,
null
]
});