首页 > 解决方案 > 表中的服务器端数据表实现

问题描述

我开发了一个 PHP Wordpress 模板来在数据表中显示我的 buddypress 成员目录。但它首先生成 html 表,然后通过表 ID 实现数据表调用。

现在由于性能问题,希望在服务器端执行表制作单独的 PHP 文件并通过 Ajax 在数据表中调用它。请帮助我提出建议和正确的代码。

<?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(); ?>

由于与编码更相关,因此 wp 在此处发布。

标签: phpajaxwordpressdatatablebuddypress

解决方案


推荐阅读