Serverside Datatable implementation from table

Question

I have developed a PHP Wordpress template to display my buddypress member directory in datatable. But it is done 1st generating html table then implementing datatable calling by table ID.

Now due to perfomance issue, looking to execute table in severside making separate PHP file and calling it in datatable by Ajax. Please help me with suggestion and correct code.

<?php
/**
 * Template Name: Alumni Directory
 *
 * Description: Use this page template for a page with a left sidebar.
 *
 * @package WordPress
 * @subpackage tecnaa.com
 */
get_header(); ?>

 <div>&nbsp;</div>
<div id="main">

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jqc-1.12.4/dt-1.10.18/af-2.3.0/b-1.5.2/b-colvis-1.5.1/b-flash-1.5.2/b-print-1.5.2/cr-1.5.0/fc-3.2.5/fh-3.1.4/kt-2.4.0/r-2.2.2/rg-1.0.3/rr-1.2.4/sc-1.5.0/sl-1.2.6/datatables.min.css"/>
 
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jqc-1.12.4/dt-1.10.18/af-2.3.0/b-1.5.2/b-colvis-1.5.1/b-flash-1.5.2/b-print-1.5.2/cr-1.5.0/fc-3.2.5/fh-3.1.4/kt-2.4.0/r-2.2.2/rg-1.0.3/rr-1.2.4/sc-1.5.0/sl-1.2.6/datatables.min.js"></script>

<table id="directory">
 <thead> 
  <tr>
    <th>ID</th>
    <th>Pic</th>
    <th>Name</th> 
    <th>Batch</th>
    <th>Status</th>
    <th>Sector</th>    
    <th>Engagement</th>
    <th>Position</th> 
    <th>Location</th>
    <th>Actions</th> 
   </tr> 
  </thead>  
 <tbody> 

<?php if ( bp_has_members( bp_ajax_querystring( 'members' ).'&page=0') ) : ?>

 <?php while ( bp_members() ) : bp_the_member(); 

$memberid = xprofile_get_field_data( 'Member ID', bp_get_member_user_id() );

if (empty( $memberid ))
{}
else 
{
?>

<tr>
    <td><?php  bp_member_profile_data( 'field=Member ID' );?></td>
    <td><a href="<?php bp_member_permalink(); ?>"><?php bp_member_avatar('type=thumb&height=30&width=30'); ?></a></td>
    <td><a href="<?php bp_member_permalink(); ?>"><?php bp_member_name(); ?></td> 
    <td><?php  bp_member_profile_data( 'field=Batch' );?></td>
    <td><?php  bp_member_profile_data( 'field=Current Status' );?></td>  
    <td><?php  bp_member_profile_data( 'field=Job Sector' );?></td>    
    <td><?php  bp_member_profile_data( 'field=Company Name (Job)' );?></td>
    <td><?php  bp_member_profile_data( 'field=Position (Job)' );?></td> 
    <td><?php  bp_member_profile_data( 'field=Location' );?></td>
    <td><a href="<?php bp_member_permalink(); ?>profile/edit">Update</td>  
</tr>
<?php

}

endwhile; ?>


<?php endif; ?>
</tbody>
</table>
<script type="text/javascript">

$(document).ready(function() {
    $('#directory').DataTable( {
        "processing": true,
        "paging":   false,
        "autoWidth": true,
        "ordering": true,
        "scrollCollapse": true,
        "scrollY": 450,
        "scrollX": true,
        "info": true,
        "dom": 'Bfrtip',
        "buttons": ['colvis','copy', 'csv', 'excel', 'pdf', 'print'],
        "order": [[ 0, "asc" ]],
        "fixedColumns":   {
            leftColumns: 2
        }

    } 
    
    );
} );
</script>

  
  </div><!-- end .wrapper-content -->
 
 </div><!-- end #content -->
 


</div><!-- end #main -->

<?php get_footer(); ?>

Since is more related to coding then wp posting here.

Serverside Datatable implementation from table

0 Answers0