I'm piggybacking off of this post in hopes that someone can help me out,
http://www.sitepoint.com/forums/java...le-757820.html

I'm pretty much doing the same, with a few exceptions. 1) I'm using a combination of PHP (CodeIgniter), JQuery & Ajax when rendering my tables. 2) Users submit a query, which then calls to a .js file which returns the results to table.

The problem (I think) I'm encountering is that since my table and its contents are rendered dynamically, I cannot get your example to work. While everything renders, when clicking on a checkbox, it doesn't remove that corresponding table row.

My code is below, with "Do it here?" where I think it should go?

Any and all assistance is greatly appreciated!

Search.php (main page that the results are shown on):

PHP Code:
<link rel="stylesheet" href="css/jquery.fancybox-1.3.4.css" type="text/css" media="all" />

<script type="text/javascript" src="js/jquery/jquery.fancybox-1.3.4.js"></script>
<script type="text/javascript">
       $(document).ready(function(){
          $('form').jqTransform();
                                    $(".suggest a").fancybox();
                                    $(".go a").fancybox();
                                    
                                    //DO IT HERE???
                                    $('#eventRecords').dataTable();
 
                $(':checkbox[name="rendering_filter"]').click(function() {
                    var filter = '',
                        regexFilter = true,
                        smartFilter = false;
 
                    filter = $('[name="' + this.name + '"]:checked').map(function () {
                        return this.value;
                    }).toArray().join('|');
 
                    $('#eventRecords').dataTable().fnFilter(filter, 0, regexFilter, smartFilter);
                });
                                    
        });
    </script>
 </head>
</head>
<body class="inner-page">
<div class="wrapper">
    <!-- Shell -->
    <div class="shell">
        <!-- Header -->
        <div id="header">
            <h1 id="inner-logo"><?php echo anchor('public_home/index'Null);?></h1>
            <!-- Top Menu -->
            <div class="top-menu">
                <ul class="social">
                    <li class="facebook"><a href="#">facebook</a></li>
                    <li class="twitter"><a href="#">twitter</a></li>
                    <li class="youtube"><a href="#">youtube</a></li>
                </ul>
                <ul>
                    <li class="mycart"><?php echo anchor('public_pop/openCart''my cart');?></li>
                    <li class="myaccount"><?php echo anchor('public_pop/openAcct''my account');?></li>
                </ul>
            </div>
            <!-- end Top Menu -->
            <div class="cl">&nbsp;</div>
        </div>
        <!-- end Header -->
        <!-- Main -->
        <div id="main" class="search-page">
            <div class="search-left">
                <!-- Search Box -->
                <div class="search-box">
                    <div class="search-box-b">
                        <div class="search-box-t">
                            <span class="red-mark"></span>
                            <h3>REFINE RESULTS</h3>
                            <form action="" method="post">
                                <div class="form-box">
                                    <p class="title">EVENT TYPE:</p>
                                       
                                    <div class="check-field">
                                        <input type="checkbox" name="rendering_filter" value="Sports" checked="checked"/><label>Sports</label>
                                    </div>
                                    <div class="check-field">
                                        <input type="checkbox" name="rendering_filter" value="Theater" checked="checked"/><label>Theater</label>
                                    </div>
                                    <div class="cl">&nbsp;</div>
                                    <div class="check-field">
                                        <input type="checkbox" name="rendering_filter" value="Lift Tickets" checked="checked"/><label>Lift Tickets</label>
                                    </div>
                                    <div class="check-field">
                                        <input type="checkbox" name="rendering_filter" value="Activities" checked="checked"/><label>Activities</label>
                                    </div>
                                    <div class="cl">&nbsp;</div>
                                    <div class="check-field">
                                        <input type="checkbox" name="rendering_filter" value="Concerts" checked="checked"/><label>Concerts</label>
                                    </div>
                                     <div class="check-field">
                                        <input type="checkbox" name="rendering_filter" value="Other" checked="checked"/><label>Other</label>
                                        
                                    </div>
                                    <div class="cl">&nbsp;</div>
                                </div>
                                <div class="form-box">
                                     <p class="title">DATES:</p>
                                     <input type="text" class="date blink" name="" value="begin date" title="begin date" id="from" />
                                     <a class="date-picker" href="#"></a>
                                     <div class="cl">&nbsp;</div>
                                     <input type="text" class="date blink" name="" value="end date" title="end date" id="to" />
                                     <a class="date-picker" href="#"></a>
                                     <div class="cl">&nbsp;</div>
                                </div>
<!--                                <div class="form-box">
                                     <p class="title">EVENT NAME:</p>
                                       <?php        
                                                        $events_options 
= array();
                                                        foreach(
$events as $event){
                                                        
$events_options[$event->event_id]=$event->event_name;
                                                        }
                                                        echo 
"<td>" form_dropdown('pTicketEvent'$events_optionsnull'id="pTicketEvent"') . "</td>";
                                                  
?>         
                                </div>
                                <div class="form-box">
                                     <p class="title">EVENT VENUE:</p>
                                      <?php        
                                                        $venue_options 
= array();
                                                        foreach(
$venues as $venue){
                                                        
$venue_options[$venue->venue_id]=$venue->venue_name;
                                                        }
                                                        echo 
"<td>" form_dropdown('pEventVenue'$venue_optionsnull'id="pEventVenue"') . "</td>";
                                                  
?>    
                                </div>
                                <div class="form-box">
                                     <p class="title">CHANGE CITY:</p>
                                      <?php        
                                                        $cities_options 
= array();
                                                        foreach(
$cities as $city){
                                                        
$cities_options[$city->city_id]=$city->city_full;
                                                        }
                                                        echo 
"<td>" form_dropdown('pVenueCity'$cities_optionsnull'id="pVenueCity"') . "</td>";
                                                  
?>   
                                </div>-->
                            </form>
                        </div>
                    </div>
                </div>
                <!-- end Search Box -->

                         <?php $img img('css/images/suggest-event.png'); ?> 
                    <p class="suggest"><?php echo anchor('public_search/openSuggest'$img);?></p>
                           


                <!-- Search Box -->
                <div class="search-box">
                    <div class="search-box-b">
                       
                    </div>
                </div>
                <!-- end Search Box -->
            </div>

            <div class="search-right" id="readEvents">
                    <table border="0" cellspacing="0" cellpadding="0" id="eventRecords">
                                <thead>
                                    <tr>
                                        <th>TYPE</th>
                                        <th>EVENT</th>
                                        <th></th>
                                        <th>DATE</th>
                                        <th>PRICE</th>
                                        <th>CITY</th>
                                        <th></th>
                                    </tr>
                                </thead>
<!--                                <tfoot>
                                    <tr>
                                         <th>TYPE</th>
                                        <th>EVENT</th>
                                        <th></th>
                                        <th>DATE</th>
                                        <th>PRICE</th>
                                        <th>CITY</th>
                                        <th></th>
                                        <th width="108">TYPE</th>
                                        <th width="162">EVENT</th>
                                        <th width="48">&nbsp;</th>
                                        <th width="97">DATE</th>
                                        <th width="102">PRICE</th>
                                        <th width="98">CITY</th>
                                        <th width="">&nbsp;</th>
                                    </tr>
                                </tfoot>
                            <tbody></tbody>-->
                    </table>
               </div>
                  
<!--          $img2 = img('css/images/go.png');      echo anchor('public_search/openGo', $img2);-->
                    
                    <table id="eventRecords"></table>
                        
                    <script type="text/template" id="readEventsTemplate">
                            <tr id="${event_id}">
                                <td>${eventtype_desc}</td>
                                <td><p class='event-name'>${event_name}</p><p>${venue_name}</p></td>
                                <td class="go"><a href="${buyLink}"><img src="css/images/go.png" alt="Buy!" /></a></td>
                                <td><p><strong>${event_date}</strong></p><p>${event_day}</p></td>
                                <td><span class="price">${tickets_discountprice}</span> <img src="css/images/beer.png" alt="image" /> <img src="css/images/p.png" alt="image" /></td>
                                <td>${city_full}</td>
                                <td><a class="facebook-social" href="#"><span>3</span><img src="css/images/facebook-icon.png" alt="image" /></a></td>
                            </tr>
                   </script>

                    
                    
                    
<!--                <div class="bottom-nav">
                    <ul>
                        <li class="first"><a href="#"><img src="css/images/left-arrow.png" alt="image" /></a></li>
                        <li><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li class="last"><a href="#"><img src="css/images/right-arrow.png" alt="image" /></a></li>
                    </ul>
                </div>-->
            </div>
            <div class="cl">&nbsp;</div>
        </div>
        <!-- end Main -->
        <div class="cl">&nbsp;</div>
    </div>
    <!-- end Shell -->
    <div class="push"></div>
    </div>
    <!-- end Wrapper -->
    <!-- Footer -->
        <div id="footer">
            <div class="shell">
                <div class="footer-boxes">
                    <div class="footer-box">
                        <span class="red-mark"></span>
                        <span class="shadow"></span>
                        <img src="css/images/box1.png" alt="image" />
                        <p>“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras magna felis, vestibulum” - Jake, San Francisco</p>
                    </div>
                    <div class="footer-box">
                         <span class="red-mark"></span>
                        <span class="shadow"></span>
                         <img src="css/images/box2.png" alt="image" />
                         <p>“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras magna felis, vestibulum” - Jake, San Francisco</p>
                    </div>
                    <div class="buttons">
                        <p><a href="#">venues</a></p>
                        <p><a href="#">advertising</a></p>
                    </div>
                    <div class="cl">&nbsp;</div>
                </div>
                <p class="footer-nav">
                    <a href="#">about</a>         
                    <a href="#">privacy</a>
                    <a href="#">faq</a>
                    <a href="#">contact</a>
                </p>
             </div>
        </div>
        <!-- end Footer -->  
<script type="text/javascript" src="js/public_events.js"></script>

<pre>$(':checkbox[name="rendering_filter"]').click(function() {
        var filter = '',
        regexFilter = true,
        smartFilter = false;
 
    filter = $('[name="' + this.name + '"]:checked').map(function () {
        return this.value;
    }).toArray().join('|');
 
    $('#eventRecords').dataTable().fnFilter(filter, 0, regexFilter, smartFilter);
});</pre> 
</body>
</html>
My .js page that calls to my backend to get the query results and push the to the display:

Code JavaScript:
var readUrl   = 'index.php/public_search/readEvents',
     dataTable,
    buyUrl = 'index.php/public_eventdetails/eventdetails';
 
$( function() {
 
 
    readEvents();
 
 
}); 
 
 
 
function readEvents() {
    //display ajax loader animation
    $( '#ajaxLoadAni' ).fadeIn( 'slow' );
 
    $.ajax({
        url: readUrl,
        dataType: 'json',
        success: function( response ) {
 
              for( var i in response ) {
                  response[ i ].buyLink = buyUrl + '/' + response[ i ].event_id;
              }
 
            //clear old rows
            $( '#eventRecords tbody' ).html( '' );
 
            //append new rows
            $( '#readEventsTemplate' ).tmpl( response ).appendTo( "#eventRecords" );
 
             //apply dataTable to #records table and save its object in dataTable variable
            if( typeof dataTable == 'undefined' )
 
          dataTable = $( '#eventRecords' ).dataTable();
 
      //DO IT HERE???
      $(':checkbox[name="rendering_filter"]').click(function() {
                    var filter = '',
                        regexFilter = true,
                        smartFilter = false;
 
                    filter = $('[name="' + this.name + '"]:checked').map(function () {
                        return this.value;
                    }).toArray().join('|'); 
                    $('#eventRecords').dataTable().fnFilter(filter, 0, regexFilter, smartFilter);
                });
 
 
            //hide ajax loader animation here...
            $( '#ajaxLoadAni' ).fadeOut( 'slow' );
        }
    });
} // end