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


function list_staff() {


    // 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);


                    <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>';
                        } ?>

            echo '</table>';
            <script type="text/javascript">
                    // Init dataTable
                        aoColumnDefs: [
                                bSortable: false,
                                aTargets: [ 0,4 ]


           <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 ) {
                    .search( this.value )
        } );
    } );
} );



function list_staff_obj($atts, $content=null) {
    list_staff($atts, $content=null);
    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

  • i m adding script to display search column is right or wrong i can't understand – harry Feb 7 '19 at 12:56
  • @fuxia any suggest me to solved this problem – harry Feb 7 '19 at 13:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.