Hi,
It seems that I am using the fnFilter incorrectly. I wish to search for an exact alphanumeric number i.e. if I search for 55a I want that to be returned, not 155a or 55a1, etc... In addition, I understand that v. 1.9.4 doesn't allow for columns to be added/removed dynamically. I have tried the workaround as best as I could but was getting repeating columns. I have included code below.
// globals
var dt;
var asInitVals = new Array();
asInitVals[0] = "Number...";
asInitVals[1] = "Type...";
var num_field;
var type_field;
var rowCount;
var fldLength;
// BEGIN EXEC
$(function () {
// initialize table
initTable();
// clear fields
$("#number_fld").focus(function () {
this.value = "";
});
$("#type_fld").focus(function () {
this.value = "";
});
// restore field values
$("#number_fld").blur(function () {
if (this.value == "") {
this.value = asInitVals[0];
// hide table
dt.fnFilter("Number...");
}
});
$("#type_fld").blur(function () {
if (this.value == "") {
this.value = asInitVals[1];
// hide table
dt.fnFilter("Type...");
}
});
//grab values from fields
$("#number_fld").keyup(function () {
num_field = $(this).val();
// only filter table based on 4-5 characters
fldLength = num_field.length;
console.log(fldLength);
if (fldLength == 4 || fldLength == 5) {
dt.fnFilter("^"+num_field+"$",2, true,false);
rowCount = dt.fnSettings().fnRecordsDisplay();
console.log("Number fld Rowcount : " + rowCount);
//setTimeout("addDetails(dt, rowCount)", 2000);
addDetails(rowCount);
}
});
//grab values from fields
$("#type_fld").keyup(function () {
type_field = $(this).val();
dt.fnFilter(type_field,1,true,false);
rowCount = dt.fnSettings().fnRecordsDisplay();
console.log("Type fld Rowcount : " + rowCount);
//setTimeout("addDetails(dt,rowCount)", 2000);
addDetails(fldLength);
});
}); // END EXEC
// function declarations section
// row details function
function formatDetailsSection(dt, nTr) {
var aData = dt.fnGetData(nTr);
var sOut = '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">';
sOut += '<tr><td>Addtional Fields:</td><td>' + aData[1] + ' ' + aData[4] + '</td></tr>';
sOut += '<tr><td>Link to source:</td><td>Could provide a link here</td></tr>';
sOut += '<tr><td>Extra info:</td><td>And any further details here (images etc)</td></tr>';
sOut += '</table>';
return sOut;
}
// add details to table
function addDetails(rowCount) {
/* remove any icon table header/columns beforehand;
* look at alternative ways to
* accomplish this
*/
$(".icon_header").remove();
$(".center").remove();
/*
* Insert a 'details' column to the table
*/
var nCloneTh = document.createElement('th');
nCloneTh.className = "icon_header";
var nCloneTd = document.createElement('td');
nCloneTd.innerHTML = '<img class="expandable" src="img/details_open.png">';
nCloneTd.className = "center";
/* TODO - debug multiple icon insertions */
$('#tbl_lease_permit thead tr').each(function () {
this.insertBefore(nCloneTh, this.childNodes[0]);
});
// insert + icon before each row
$('#tbl_lease_permit tbody tr').each(function () {
//this.insertBefore(nCloneTd.cloneNode(true), this.childNodes[0]);
this.insertBefore(nCloneTd, this.childNodes[0]);
});
}
// initialize table
function initTable() {
$("#lease_permit_container").html('<table cellpadding="0" cellspacing="0" border="0" class="display" id="tbl_lease_permit"></table>');
dt = $("#tbl_lease_permit").dataTable({
"sPaginationType": "full_numbers",
"aLengthMenu": [[10, 20, -1], [10, 20, "All"]],
"iDisplayLength": 10,
"aaSorting": [[5, 'desc']],
//"aaData": csv_contents,
"bProcessing": true,
//"aaData": aaData,
"bAutoWidth": true,
"sDom": 'r<bottom"p',
"sAjaxSource": "ajsonfile.json",
"bDeferRender": true,
"bSortClasses": false,
"oLanguage": {
"sSearch": "Search across all columns:",
"sEmptyTable": "Look up lease and permit fees by searching by Type and/or Number.",
"sZeroRecords": "Look up lease and permit fees by searching by Type and/or Number."
},
//"oSearch" : {"bSmart" : false},
"aoColumnDefs": [
{ "sTitle": "a", "mData": "a", "aTargets": [0], "bVisible": false },
{ "sTitle": "Type", "mData": "type", "aTargets": [1] },
{ "sTitle": "Number", "mData": "number", "aTargets": [2] },
{ "sTitle": "b", "mData": "b", "aTargets": [3] },
{ "sTitle": "c", "mData": "c", "aTargets": [4] },
{ "sTitle": "d", "mData": "d", "aTargets": [5] },
{ "sTitle": "e", "mData": "e", "aTargets": [6] },
{ "sTitle": "f", "mData": "f", "aTargets": [7] },
{ "sTitle": "g", "mData": "g", "aTargets": [8] },
{ "sTitle": "h", "mData": "h", "aTargets": [9] },
{ "sTitle": "i", "mData": "i", "aTargets": [10] },
{ "sTitle": "j", "mData": "j", "aTargets": [11] },
{ "sTitle": "k", "mData": "k", "aTargets": [12] },
{ "sTitle": "l", "mData": "l", "aTargets": [13] }
]
/*
"fnDrawCallback": function () {
$('#tbl_lease_permit thead').html('');
}
*/
});
/* Add event listener for opening and closing details
* Note that the indicator for showing which row is open is not controlled by DataTables,
* rather it is done here
*/
$('#tbl_lease_permit tbody td img').live('click', function () {
var nTr = this.parentNode.parentNode;
if (this.src.match('details_close')) {
/* This row is already open - close it */
this.src = "img/details_open.png";
dt.fnClose(nTr);
}
else {
/* Open this row */
this.src = "img/details_close.png";
dt.fnOpen(nTr, formatDetailsSection(dt, nTr), 'details');
}
});
// display no results on initTable
dt.fnFilter('Search...');
}
Any suggestions are greatly appreciated. Thanks again.