Custom Filtering

nscottbrown

I have used the example at https://datatables.net/examples/api/multi_filter.html to create custom column filtering for my table but I can't seem to get it to work. The code to turn my footer cells into input boxes work but the code to apply the search doesn't seem to work and causes all of my code after this snippet in my ready function to break. Here is part of my code. The click function does not work if I have it in this order. If I move it above the "Apply the search" code then it the click function works.

    $(document).ready(function() {

        // Setup - add a text input to each footer cell
        $('#tracker_table tfoot th').each( function () {
            var title = $('#tracker_table tfoot th').eq( $(this).index() ).text();
            $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
        } );

        var tracker_table=$('#tracker_table').dataTable( {
                "bRetrieve": true,
                "sPaginationType": "full_numbers",
                "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
                "iDisplayLength": 50,
                "sScrollY": "700px",
                "sScrollX": "100%",
                "bJQueryUI": true,
                stateSave: true,
        } );

        // Apply the search     
        tracker_table.columns().eq( 0 ).each( function ( colIdx ) {             
            $( 'input', tracker_table.column( colIdx ).footer() ).on( 'keyup change', function () {             
                alert("here");
                tracker_table
                    .column( colIdx )
                    .search( this.value )
                    .draw();
            } );
        });

        //Pop up interface to edit issue
        $("tbody td").click(function(event) {
            var myClass = $(this).attr("class");
            //alert(myClass);
            //View Order Interface
            if($(event.target).hasClass('clickable')){
                id = $(this).closest('tr').find('td:eq(0)').text();

                url="update_issue.php?id="+ id;
                window.open(url ,'Update Issue' + id,"width=800,height=550,scrollbars=1");
            }                               
        });

    }); //END READY FUNCTION

nscottbrown

After reading the API docs a little closer I was able to fix my issue. I was declaring my instance using .dataTable instead of .DataTable