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.
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.