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