Filtering issues & Drill down table
Filtering issues & Drill down table
sonicbug
Posts: 26Questions: 0Answers: 0
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.
[code]
// 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 = '';
sOut += 'Addtional Fields:' + aData[1] + ' ' + aData[4] + '';
sOut += 'Link to source:Could provide a link here';
sOut += 'Extra info:And any further details here (images etc)';
sOut += '';
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 = '';
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('');
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
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.
[code]
// 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 = '';
sOut += 'Addtional Fields:' + aData[1] + ' ' + aData[4] + '';
sOut += 'Link to source:Could provide a link here';
sOut += 'Extra info:And any further details here (images etc)';
sOut += '';
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 = '';
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('');
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
This discussion has been closed.