javascript - create to search column

i m create to custom post type shortcode but at the last i m trying to add Individual column searching in my table but i can't access.. this is my post_type_shortcode.php

<?php

function list_staff() {

    wp_reset_query();

    // Only staff members
    $args = array(
        'post_type' => 'staff_member',
        'posts_per_page' => 9999 // Set to high number to override default posts limit
    );

    $query = new WP_Query( $args );

        if ($query->have_posts()) :
            // Specify this table is a dataTable and assign an ID
            echo '<table class="tablepress dataTable" id="staff_table">';
            echo '<thead>';
            echo '<tr>';

            echo '<th>First Name</th>';
            echo '<th>Blood Group</th>';
            echo '<th>Phone</th>';
            echo '<th>Address</th>';
             echo '<th>Edit</th>';
            echo '</tr>';
            echo '</thead>';
            while( $query->have_posts() ) : $query->the_post();

                // Get meta if exists

                $first_name = get_post_meta( get_the_ID(), '_first_name', true);
                $blood_group = get_post_meta( get_the_ID(), '_blood_group', true);
                $phone = get_post_meta( get_the_ID(), '_phone', true);
                $address = get_post_meta( get_the_ID(), '_address', true);

                ?>
                <tr>

                    <td><?php echo $first_name; ?></td>
                    <td><?php echo $blood_group; ?></td>
                    <td><?php echo $phone; ?></td>
                    <td><?php echo $address; ?></td>
                       <td> <?php if ( current_user_can('edit_post', get_the_ID()) ) {
                            // Edit button if current user can edit staff members
                            echo '<span class="edit-link"><a class="post-edit-link" href=" http://localhost/project/custom/wp-admin/post.php?post='.get_the_ID().'&action=edit">EDIT</a></span>';
                        } ?>
                    </td>
                </tr>


                <?php
            endwhile;
            echo '</table>';
            ?>
            <script type="text/javascript">
               jQuery(document).ready(function(){
                    // Init dataTable
                    jQuery('#staff_table').dataTable({
                        "aaSorting":[],
                        "bSortClasses":false,
                        "asStripeClasses":['even','odd'],
                        "bSort":true,
                        aoColumnDefs: [
                            {
                                bSortable: false,
                                aTargets: [ 0,4 ]
                            }

                        ]
                    });
               });
            </script>

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

    // DataTable
    var table = $('#staff_table').DataTable();

    // Apply the search
    table.columns().every( function () {
        var that = this;

        $( 'input', this.footer() ).on( 'keyup change', function () {
            if ( that.search() !== this.value ) {
                that
                    .search( this.value )
                    .draw();
            }
        } );
    } );
} );
</script>

            <?php
        endif;

}



function list_staff_obj($atts, $content=null) {
    ob_start();
    list_staff($atts, $content=null);
    $output=ob_get_contents();
    ob_end_clean();
    return $output;
}
add_shortcode( 'list-staff', 'list_staff_obj' );


?>

in this coding i m using example of the Individual column searching (text inputs) but this example didn't work to me..i m not getting any error but search column didn't display to my output result..i cant understand what the wrong with this code and please answer to me