Quantcast
Channel: DataTables 1.9 — DataTables forums
Viewing all articles
Browse latest Browse all 1816

Filtering issues & Drill down table

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

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

Viewing all articles
Browse latest Browse all 1816